js中怎么获取一个节点的子节点

在JavaScript中获取一个节点的子节点可以使用以下几种方法：childNodes、children、firstElementChild、lastElementChild。这些方法和属性各有不同的使用场景和优缺点。下面将详细介绍它们的具体用法及优缺点，并提供一些最佳实践建议。

一、CHILDNODES 与 CHILDREN

1.1、CHILDNODES

childNodes 属性返回一个 NodeList，其中包含所有类型的子节点，包括元素节点、文本节点和注释节点。

let parent = document.getElementById('parent');
let children = parent.childNodes;
console.log(children);

优点：

包含所有类型的节点：不仅限于元素节点，还包括文本节点和注释节点。
实时更新：返回的 NodeList 是实时的，DOM 变化会实时反映在 NodeList 中。

缺点：

可能包含不需要的节点：如空白的文本节点和注释节点，可能需要进一步过滤。
性能问题：在处理大量节点时，可能会因为需要过滤无用节点而影响性能。

1.2、CHILDREN

children 属性返回一个 HTMLCollection，仅包含元素节点。

let parent = document.getElementById('parent');
let children = parent.children;
console.log(children);

优点：

仅包含元素节点：不需要进一步过滤，直接使用。
性能较好：因为不包含无用的文本节点和注释节点。

缺点：

不包含非元素节点：如果需要获取所有类型的节点，children 无法满足需求。

二、FIRSTELEMENTCHILD 与 LASTELEMENTCHILD

2.1、FIRSTELEMENTCHILD

firstElementChild 属性返回第一个元素子节点。

let parent = document.getElementById('parent');
let firstChild = parent.firstElementChild;
console.log(firstChild);

优点：

快速获取第一个元素节点：不需要遍历所有子节点。
性能较高：仅返回一个节点。

缺点：

仅限第一个元素节点：无法获取其他类型的节点或多个节点。

2.2、LASTELEMENTCHILD

lastElementChild 属性返回最后一个元素子节点。

let parent = document.getElementById('parent');
let lastChild = parent.lastElementChild;
console.log(lastChild);

优点：

快速获取最后一个元素节点：不需要遍历所有子节点。
性能较高：仅返回一个节点。

缺点：

仅限最后一个元素节点：无法获取其他类型的节点或多个节点。

三、NODELIST 与 HTMLCOLLECTION 的区别

3.1、NODELIST

NodeList 是一种类数组对象，包含所有类型的节点，可以通过索引访问。

特点：

包含所有类型的节点。
实时更新：DOM 变化会反映在 NodeList 中。
可遍历：支持 forEach 等数组方法。

let parent = document.getElementById('parent');
let nodeList = parent.childNodes;
nodeList.forEach(node => console.log(node));

3.2、HTMLCOLLECTION

HTMLCollection 是一种类数组对象，仅包含元素节点。

特点：

仅包含元素节点。
实时更新：DOM 变化会反映在 HTMLCollection 中。
类数组：可以通过索引访问，但不支持 forEach 等数组方法。

let parent = document.getElementById('parent');
let htmlCollection = parent.children;
for (let i = 0; i < htmlCollection.length; i++) {
    console.log(htmlCollection[i]);
}

四、最佳实践

4.1、选择合适的方法

根据需求选择合适的方法：

需要所有类型的节点：使用 childNodes。
仅需要元素节点：使用 children。
只需要第一个或最后一个元素节点：使用 firstElementChild 或 lastElementChild。

4.2、性能优化

在处理大量节点时，尽量避免使用 childNodes，因为需要进一步过滤无用节点。优先使用 children 或其他更高效的方法。

4.3、使用现代 JavaScript 特性

在遍历 NodeList 时，可以使用现代 JavaScript 特性，如 forEach 方法，以提高代码可读性和简洁性。

let parent = document.getElementById('parent');
let nodeList = parent.childNodes;
nodeList.forEach(node => {
    if (node.nodeType === Node.ELEMENT_NODE) {
        console.log(node);
    }
});

五、示例项目管理系统

在实际开发中，项目管理系统中经常需要操作 DOM 节点。例如，在研发项目管理系统PingCode和通用项目协作软件Worktile中，可能需要动态添加、删除或修改任务节点。

5.1、在 PingCode 中的应用

在 PingCode 中，可以通过操作 DOM 节点来动态更新任务列表。例如，当用户创建新任务时，可以使用 appendChild 方法将新任务节点添加到任务列表中。

let taskList = document.getElementById('task-list');
let newTask = document.createElement('li');
newTask.textContent = 'New Task';
taskList.appendChild(newTask);

5.2、在 Worktile 中的应用

在 Worktile 中，可以通过操作 DOM 节点来实现任务的拖拽排序。例如，当用户拖拽任务节点时，可以使用 insertBefore 方法将任务节点插入到新位置。

let taskList = document.getElementById('task-list');
let task = document.getElementById('task');
let referenceTask = document.getElementById('reference-task');
taskList.insertBefore(task, referenceTask);

通过了解 JavaScript 中获取节点子节点的方法及其优缺点，可以更高效地操作 DOM 节点，提高代码的可读性和性能。在实际项目中，如 PingCode 和 Worktile 中的应用，充分利用这些方法可以大大简化任务管理的实现。