js 获取子元素(JavaScript获取子元素的实现方式)

JavaScript获取子元素的实现方式

在前端开发中，经常需要获取指定元素的子元素进行操作。JavaScript提供了多种实现方式，可以通过DOM操作实现获取子元素。以下是常用的三种实现方式：

使用childNodes属性获取子元素

childNodes是DOM节点对象的一个属性，返回一个NodeList对象，包含指定节点的所有子节点，包括元素节点、文本节点等。我们可以使用其中的item(index)方法来获取具体的子元素。

示例代码：

```

var parent = document.getElementById("parent");

var childNodes = parent.childNodes;

for (var i = 0; i < childNodes.length; i++) {

if (childNodes[i].nodeType === 1) {

console.log(childNodes[i]);//输出子元素

}

}

```

以上代码获取了id为“parent”的元素的所有子节点，循环判断并输出nodeType为1的节点，即元素节点。

使用children属性获取子元素

children是DOM节点对象的另一种属性，返回一个HTMLCollection对象，包含指定元素的所有子元素节点，不包括文本节点等。

示例代码：

```

var parent = document.getElementById("parent");

var children = parent.children;

for (var i = 0; i < children.length; i++) {

console.log(children[i]);//输出子元素

}

```

以上代码获取了id为“parent”的元素的所有子元素节点，并循环输出。

使用querySelectorAll方法获取子元素

querySelectorAll是DOM节点对象的一个方法，接收一个CSS选择器作为参数，返回一个NodeList对象，包含匹配该选择器的所有元素节点，包括子元素节点。

示例代码：

```

var children = document.querySelectorAll("#parent > div");

for (var i = 0; i < children.length; i++) {

console.log(children[i]);//输出子元素

}

```

以上代码获取了id为“parent”的所有直接子元素节点的div元素，并循环输出。

总结

以上三种方法均可以用于获取指定元素的子元素。childNodes和children返回的对象类型不同，需要根据实际需要选择使用。querySelectorAll需要支持CSS选择器的浏览器才能使用。