DOM 创建节点学习笔记

DOM（Document Object Model）是一种以树结构表示文档的方式，可以通过 JavaScript 对其进行操作。

在 DOM 中，节点可以分为三类：元素节点、属性节点和文本节点。元素节点指的是 HTML 元素，例如 <div>、<p>、<ul> 等等；属性节点指的是 HTML 元素的属性，例如 class、id、href 等等；文本节点则是 HTML 元素中的文本内容。

在 JavaScript 中，我们可以使用以下方法创建、添加、修改和删除节点：

创建节点

document.createElement()

使用 document.createElement() 方法可以创建一个新的元素节点。该方法接受一个字符串参数，代表要创建的元素节点的标签名。

javascriptCopy Code
const newDiv = document.createElement('div');

document.createTextNode()

使用 document.createTextNode() 方法可以创建一个新的文本节点。该方法接受一个字符串参数，代表要创建的文本内容。

javascriptCopy Code
const newText = document.createTextNode('This is a new text node.');

添加节点

element.appendChild()

使用 element.appendChild() 方法可以将一个元素节点或文本节点添加到指定元素节点的子节点列表的末尾。

javascriptCopy Code
const parent = document.getElementById('parent');
parent.appendChild(newDiv);
parent.appendChild(newText);

修改节点

element.setAttribute()

使用 element.setAttribute() 方法可以为指定元素节点设置一个属性。该方法接受两个字符串参数，第一个参数是要设置的属性名，第二个参数是要设置的属性值。

javascriptCopy Code
newDiv.setAttribute('class', 'new-class');

element.innerHTML

使用 element.innerHTML 属性可以设置或获取指定元素节点的 HTML 内容。

javascriptCopy Code
newDiv.innerHTML = '<p>This is some new HTML content.</p>';

删除节点

element.removeChild()

使用 element.removeChild() 方法可以从指定元素节点的子节点列表中删除一个元素节点或文本节点。

javascriptCopy Code
parent.removeChild(newDiv);

以上就是 DOM 创建节点的常见方法和操作示例。通过这些方法，我们可以动态地创建、添加、修改和删除节点，实现更加灵活、精细的页面效果。