在JavaScript中进行DOM节点操作是一项基础且重要的技能。通过这些操作，开发者可以动态创建、访问、修改以及删除网页的元素和内容。常见的DOM节点操作包括但不限于：创建新节点、插入节点、删除节点、替换节点、复制节点，以及获取和修改节点的属性。
创建新节点是最基础也是最频繁使用的DOM操作之一。这通常通过document.createElement()方法实现。该方法接受一个标签名作为参数，返回一个新创建的元素，该元素尚未添加到文档中。创建节点后，可以使用appendChild()或insertBefore()方法将其插入到文档中。
一、创建新节点
创建新的DOM节点通常是为了动态添加内容到网页中。这样的操作允许开发者在不刷新页面的情况下，更新页面的内容或样式。使用document.createElement(tagName)函数，可以创建一个新的元素节点。tagName是一个字符串，表示希望创建的元素的标签名，比如'div'、'span'等。
创建完节点之后，你可能还需要给它设置一些属性或内容，这可以通过操作返回的元素对象来实现。比如使用.innerText或.innerHTML属性设置元素的文本或HTML内容，或者使用.setAttribute(name, value)方法给元素添加新的属性。
二、插入节点
一旦创建了新的DOM元素，下一步就是将这个元素添加到文档中的某个现有元素下。这可以通过appendChild()和insertBefore()方法完成。appendChild()方法将一个节点添加到指定父节点的子节点列表的末尾。而insertBefore()方法则将节点插入到父节点的特定子节点之前。
这意味着，如果想要在页面上显示新创建的元素，你需要找到一个现有的父元素，然后使用这些方法之一进行插入。父元素可以是任何能够包含其他元素的DOM节点，如<div>、<body>等。
三、删除节点
在网页开发过程中，有时需要删除页面上的某些元素。这可以通过removeChild()方法完成。该方法从DOM中删除一个子节点，释放与之相关的资源。使用该方法时，你需要首先获取欲删除节点的父节点，然后调用parentNode.removeChild(childNode)，其中childNode是需要删除的节点。
删除节点是一个敏感的操作，需要确保不会误删除未备份的重要内容，同时考虑到页面布局的变化。
四、替换节点
DOM提供了replaceChild(newNode, oldNode)方法，允许你用一个新的节点替换现有的一个节点。这个方法需要在父节点上调用，并将新节点和旧节点作为参数传入。这种操作在需要更新页面某部分内容时非常有用，它允许你保持其他DOM结构不变，只替换特定的节点。
替换操作往往需要精确控制，因为它涉及到将现有的元素完全替换为新元素，这可能会对事件监听和元素样式产生影响。
五、复制节点
在某些情况下，可能需要创建一个节点的副本而不是完全新的元素。DOM提供了cloneNode(deep)方法来实现这一点。这个方法创建一个调用它的节点的精确副本，并可以选择是否进行深复制。参数deep为true时，会连同节点下的所有子孙节点一起复制，为false时，则只复制该节点本身。
复制节点通常用于需要大量相似DOM结构的场景，通过复制基础结构再进行小规模修改，可以大大减少代码量。
六、获取和修改节点属性
每个DOM节点都有一系列属性，如id、class、style等，这些属性可以通过JavaScript进行读取和修改。使用getAttribute(attrName)和setAttribute(attrName, attrValue)方法，可以分别获取和设置节点的属性。
此外，针对一些常用属性，如id和className，DOM节点还提供了直接的属性访问方式，例如element.id或element.className。这让属性的修改变得更加方便快捷。
通过掌握这些常见的DOM节点操作，开发者能够有效地控制和操纵网页内容，为用户提供丰富的交互体验。
相关问答FAQs：
如何在JavaScript中创建一个新的DOM节点？
要在JavaScript中创建一个新的DOM节点，可以使用createElement方法。该方法可以接受一个参数，即要创建的节点类型，例如 "div"、"p"、"span"等。创建新节点后，可以使用appendChild方法将其添加到已有的节点中。
如何在JavaScript中删除一个DOM节点？
要删除一个DOM节点，可以使用removeChild方法。这个方法需要一个参数，即要删除的节点对象。首先，需要找到要删除的节点，可以使用querySelector或getElementById等方法获取到节点对象，然后再调用removeChild方法将其删除。
如何在JavaScript中修改一个DOM节点的文本内容？
要修改一个DOM节点的文本内容，可以使用textContent属性或innerText属性。这两个属性都可以用来获取或设置节点的文本内容。textContent属性会将节点中的所有文本内容作为一个字符串返回，而innerText属性只返回可见的文本内容，会忽略掉被CSS样式隐藏的文本。可以通过给这两个属性赋值来修改节点的文本内容。
