学习JS中的DOM节点以及操作

学习JS中的DOM节点以及操作是Web前端开发的基础，下面是一个完整的攻略，主要包含以下几个部分：

理解DOM的基础知识

DOM，即文档对象模型，是指将HTML和XML文档表示为树形结构的方式，使开发者可以使用脚本语言例如Javascript来操作这个文档的树形结构。

Web浏览器将HTML和XML文档转变为一系列的节点，而这些节点就是元素（如<div>、<p>、<ul>等标签）、属性、文本等。这些节点构成了文档的树形结构，节点之间存在父子关系、兄弟关系等。

获取DOM节点

获取DOM节点是操作DOM的前置步骤，常见的获取DOM节点的方法有：

通过ID获取

使用getElementById()方法，传递一个ID参数，可以获取匹配ID的节点对象。

const myDiv = document.getElementById("myDiv");

通过标签名获取

使用getElementsByTagName()方法，传递一个标签名参数，可以获取所有匹配标签名的节点的集合。

const listItems = document.getElementsByTagName("li");

通过类名获取

使用getElementsByClassName()方法，传递一个类名参数，可以获取所有匹配类名的节点的集合。

const myClass = document.getElementsByClassName("myClass");

通过选择器获取

使用querySelector()和querySelectorAll()方法，传递一个选择器参数，可以获取匹配选择器的节点对象或节点集合。

const firstParagraph = document.querySelector("p:first-of-type");
const allParagraphs = document.querySelectorAll("p");

操作DOM节点

获得DOM节点后，我们可以通过操作DOM节点来实现一些交互效果，常见的操作DOM节点的方法有：

创建节点

使用createElement()方法创建新的元素节点，然后使用appendChild()方法将其添加到已有的DOM节点中。

const newDiv = document.createElement("div");
const parentDiv = document.getElementById("parentDiv");
parentDiv.appendChild(newDiv);

修改节点的属性

使用属性方法，如getAttribute()和setAttribute()来获取或设置节点的属性。

const myImage = document.getElementById("myImage");
const imageSrc = myImage.getAttribute("src");
myImage.setAttribute("src", newImageSrc);

修改节点的文本内容

使用textContent属性可以修改节点的文本内容。

const firstParagraph = document.querySelector("p:first-of-type");
firstParagraph.textContent = "New Text";

示例

示例1：动态添加新的列表项

<button id="addButton">添加新项目</button>
<ul id="myList"></ul>

const addButton = document.getElementById("addButton");
addButton.onclick = function() {
    const newItem = document.createElement("li");
    newItem.textContent = "新项目";
    const myList = document.getElementById("myList");
    myList.appendChild(newItem);
}

示例2：当按钮被点击时隐藏一个元素

<button id="hideButton">隐藏元素</button>
<div id="myDiv">要隐藏的元素</div>

const hideButton = document.getElementById("hideButton");
hideButton.onclick = function() {
    const myDiv = document.getElementById("myDiv");
    myDiv.style.display = "none";
}

以上是基础的操作DOM节点的攻略，可以通过继续学习来掌握更高级的技巧和用法。