js DOM模型操作

什么是DOM模型？

DOM代表“文档对象模型”，它是一种访问和操作HTML和XML文档的标准方法。通过DOM，开发者可以使用JavaScript以及其他编程语言来处理HTML和XML文档的内容、结构以及样式。

在浏览器中，所有的HTML和XML文档都会被转换成一个树形结构的文档对象模型。每个节点都代表了文档中的一个元素、属性、文本或者其他内容。

获取DOM节点

我们可以使用document对象来获取DOM节点，如下所示：

// 获取一个元素节点
const element = document.getElementById('my-element-id');

// 获取一组元素节点
const elements = document.getElementsByClassName('my-class-name');

// 获取一组元素节点
const elements = document.getElementsByTagName('div');

// 获取一个元素节点
const element = document.querySelector('#my-element-id');

// 获取一组元素节点
const elements = document.querySelectorAll('.my-class-name');

以上方法分别可以通过id、class、标签名等方式获取一个或多个DOM节点。

操作DOM节点

获取DOM节点后，我们可以对其进行各种操作，如修改节点的属性、添加/删除节点、修改节点的样式等。

修改节点属性

可以通过节点的setAttribute方法来修改节点的属性：

const element = document.getElementById('my-element-id');
element.setAttribute('class', 'new-class-name');

上述代码将节点my-element-id的class属性值修改为new-class-name。

添加/删除节点

可以使用createElement方法创建一个元素节点，使用appendChild方法将其添加到DOM树中：

const newElement = document.createElement('p');
newElement.innerHTML = '这是一个新的段落';
document.body.appendChild(newElement);

上述代码会创建一个段落元素节点，将其内容设置为“这是一个新的段落”并添加到body节点下。

我们也可以使用removeChild方法将某个节点从DOM树中删除：

const element = document.getElementById('my-element-id');
document.body.removeChild(element);

上述代码将节点my-element-id从DOM树中删除。

修改节点样式

可以通过修改节点的style属性来修改节点的样式：

const element = document.getElementById('my-element-id');
element.style.backgroundColor = 'red';

上述代码将节点my-element-id的背景颜色改为红色。

示例一：实现点击按钮改变文本颜色

HTML代码：

<button id="btn-change-color">改变颜色</button>
<p id="text-color">这是一个文本，初始颜色是黑色</p>

JavaScript代码：

const btn = document.getElementById('btn-change-color');
const text = document.getElementById('text-color');

btn.addEventListener('click', () => {
  text.style.color = 'red';
});

上述代码实现了点击按钮后将文本颜色改为红色的效果。

示例二：实现添加列表项

HTML代码：

<button id="btn-add">添加</button>
<ul id="list-container"></ul>

JavaScript代码：

const btn = document.getElementById('btn-add');
const list = document.getElementById('list-container');

let count = 0;

btn.addEventListener('click', () => {
  count++;
  const li = document.createElement('li');
  li.innerHTML = `这是第${count}个列表项`;
  list.appendChild(li);
});

上述代码实现了每点击一次按钮，就在列表中添加一个列表项的效果。

结语

DOM模型操作是Web前端开发中必不可少的一部分，开发者需要熟练掌握这方面的知识。本文提供了简要的介绍和两个示例，希望对您有所帮助。