Document节点 常用 API 让你成为 DOM 操作专家

Document对象

Document对象是DOM树的根节点，它代表整个HTML文档。我们可以通过以下方式获取Document对象：

const doc = document;

节点对象

节点对象是DOM树中的基本单位，它可以是元素节点、文本节点、注释节点等。我们可以通过以下方式获取节点对象：

const node = document.getElementById('my-id');

属性

节点对象拥有许多属性，这些属性可以让我们获取或设置节点的各种信息。例如，我们可以通过以下方式获取节点的ID属性：

const id = node.id;

方法

节点对象也拥有许多方法，这些方法可以让我们对节点进行各种操作。例如，我们可以通过以下方式在节点后插入一个新的节点：

node.insertBefore(newElement, referenceNode);

创建元素

我们可以通过以下方式创建新的元素节点：

const newElement = document.createElement('div');

查找节点

我们可以通过以下方式查找节点：

const nodes = document.querySelectorAll('.my-class');

事件处理

我们可以通过以下方式为节点添加事件监听器：

node.addEventListener('click', function() {
  // 当节点被点击时执行此函数
});

HTML

我们可以通过以下方式获取或设置节点的HTML内容：

const html = node.innerHTML;
node.innerHTML = '<p>Hello, world!</p>';

文档信息

我们可以通过以下方式获取文档信息：

const title = document.title;
const url = document.URL;

结语

Document节点是DOM操作的基础，通过熟练掌握Document节点的常用API，我们可以轻松地进行DOM操作，从而创建出各种动态的web页面。希望本文能够帮助你成为DOM操作专家！