JS中访问节点和创建节点的方法都有什么？

在JavaScript中，访问节点和创建节点的方法非常丰富。以下是对这两种操作的详细方法归纳：

访问节点的方法

1. 通过ID访问：
   • getElementById(id)：通过元素的ID属性获取对应的DOM节点。
2. 通过类名访问：
   • getElementsByClassName(className)：通过元素的class属性获取所有具有相同类名的DOM节点，返回一个HTMLCollection对象。
3. 通过标签名访问：
   • getElementsByTagName(tagName)：通过元素的标签名获取所有具有相同标签名的DOM节点，返回一个HTMLCollection对象。
4. 通过CSS选择器访问：
   • querySelector(selector)：通过CSS选择器选择一个满足条件的DOM节点，返回第一个匹配的元素。
   • querySelectorAll(selector)：通过CSS选择器选择所有满足条件的DOM节点，返回一个NodeList对象。
5. 通过节点关系访问：
   • parentNode：返回当前节点的父节点。
   • childNodes：返回当前节点的所有子节点的节点列表（一个NodeList对象）。
   • firstChild：返回当前节点的首个子节点。
   • lastChild：返回当前节点的最后一个子节点。
   • nextSibling：返回当前节点之后相邻的同级节点。
   • previousSibling：返回当前节点之前相邻的同级节点。

创建节点的方法

1. 创建元素节点：
   • createElement(tagName)：创建一个新的HTML元素节点。例如，document.createElement("div")会创建一个新的<div>元素。
2. 创建文本节点：
   • createTextNode(text)：创建一个包含文本内容的文本节点。这个文本节点可以被添加到元素节点中作为其内容。
3. 创建属性节点（虽然参考文章中未直接提及，但这也是一种常见的节点类型）：
   • 可以通过setAttribute()方法为元素节点添加属性，但这不是直接创建属性节点的方法。如果需要单独操作属性节点，通常是通过元素的attributes属性进行访问和修改。
4. 将新节点添加到DOM中：
   • 一旦创建了新的节点，可以使用appendChild()、insertBefore()或replaceChild()等方法将其添加到现有的DOM结构中。

以上就是在JavaScript中访问节点和创建节点的主要方法。通过这些方法，可以方便地操作DOM树，实现动态的网页内容更新和交互效果。