JavaScript 如何修改节点

在网页开发中，经常需要通过 JavaScript 来修改节点，以实现动态更新页面内容等功能。以下将介绍几种常见的修改节点的方法。

改变节点的属性

可以使用 setAttribute() 方法来修改节点的属性。例如，有一个 <img> 标签，想修改其 src 属性来更换图片。通过 document.getElementById() 或其他选择器获取到该节点，假设图片的 id 为 “myImage”，代码如下：

const myImage = document.getElementById('myImage');
myImage.setAttribute('src', 'new-image-url.jpg');

这样就成功修改了图片的 src 属性，页面上显示的图片也会相应改变。

修改节点的文本内容

若要修改节点的文本内容，可使用 textContent 属性。比如，有一个 <p> 标签，其 id 为 “myParagraph”，想改变它里面的文字：

const myParagraph = document.getElementById('myParagraph');
myParagraph.textContent = '这是新的文本内容';

需要注意的是，textContent 会替换掉节点内原来的所有文本内容，包括子节点的文本。

替换节点

如果要将一个节点替换为另一个新节点，可以使用 replaceChild() 方法。首先创建一个新节点，然后获取到要被替换的节点及其父节点，例如：

// 创建新节点
const newDiv = document.createElement('div');
newDiv.textContent = '这是新的 div 节点';

// 获取要被替换的节点及其父节点
const oldDiv = document.getElementById('oldDiv');
const parent = oldDiv.parentNode;

// 替换节点
parent.replaceChild(newDiv, oldDiv);

如此，页面上原来的 oldDiv 就会被新创建的 newDiv 所取代。

修改节点的样式

使用 style 属性可以直接修改节点的内联样式。例如，要将一个按钮的背景颜色改为红色：

const myButton = document.getElementById('myButton');
myButton.style.backgroundColor ='red';

通过这些方法，开发者能够灵活地利用 JavaScript 修改节点，实现各种动态交互效果，提升网页的用户体验，满足多样化的业务需求。掌握这些技巧，对于前端开发来说至关重要。