js遍历子节点子元素附属性及方法

遍历子节点和子元素是JavaScript和DOM中常用的操作之一。以下是详细讲解“js遍历子节点子元素附属性及方法”的完整攻略。

1. 获取父元素中的所有子节点

在DOM中，获取父元素中的所有子节点可以使用childNodes属性。该属性会返回一个列表，其中包含父元素中的所有子节点。但是需要注意，这个列表可能包含空格和文本节点，因此我们需要对其进行处理，只获取元素节点。我们可以借助nodeType属性判断一个节点是元素节点还是文本节点。

代码示例：

const parent = document.querySelector('#parent'); // 获取父元素
const children = parent.childNodes; // 获取父元素的所有子节点
const elements = []; // 存储所有元素节点

for (let i = 0; i < children.length; i++) {
  if (children[i].nodeType === 1) { // 判断是元素节点
    elements.push(children[i]); // 添加到元素节点列表中
  }
}

console.log(elements); // 打印所有元素节点

2. 获取元素的所有子元素

与获取所有子节点相似，获取一个元素的所有子元素也需要注意只获取元素节点而过滤文本节点。可以使用children属性代替childNodes，该属性只会返回元素节点而排除文本节点。

代码示例：

const parent = document.querySelector('#parent'); // 获取父元素
const children = parent.children; // 获取父元素的所有子元素

console.log(children); // 打印所有子元素

3. 遍历所有子元素并执行方法

我们可以在获取到所有子元素后遍历它们，以执行自定义的方法。在此过程中，我们可以将方法作为参数传递给一个名为forEachElement的函数。该函数将遍历元素列表并执行该方法。在这个方法内部，可以根据需要访问每个元素的属性，修改它们的样式等。

代码示例：

const forEachElement = (elements, fn) => {
  for (let i = 0; i < elements.length; i++) {
    fn(elements[i], i);
  }
};

const parent = document.querySelector('#parent'); // 获取父元素
const children = parent.children; // 获取父元素的所有子元素

// 自定义方法，将每个元素设置为200x200像素
const setSize = (element) => {
  element.style.width = '200px';
  element.style.height = '200px';
};

forEachElement(children, setSize); // 遍历所有元素并执行setSize方法

以上就是关于“js遍历子节点子元素附属性及方法”的完整攻略，希望能对你有所帮助。