转换为节点 JavaScript

在前端开发中，经常需要将 HTML 中的一些元素转成 JavaScript 中的节点对象，以便进行 DOM 操作。本文将介绍如何使用原生 JavaScript 将 HTML 元素转换成节点对象。

使用 document.createElement() 创建节点对象

我们可以通过 document.createElement(tagName) 方法来创建一个指定标签名的 HTML 元素节点。

// 创建一个 <div> 节点对象
const divNode = document.createElement('div');

使用 document.createTextNode() 创建文本节点对象

我们可以通过 document.createTextNode(text) 方法来创建一个包含指定文本的文本节点对象。

// 创建一个文本节点对象
const textNode = document.createTextNode('Hello World!');

使用 parentNode.appendChild() 添加子节点

我们可以通过 parentNode.appendChild(childNode) 方法将一个节点对象插入到指定父节点的子节点列表的末尾。

// 将新创建的 <div> 添加到 body 中
document.body.appendChild(divNode);

使用 parentNode.insertBefore() 插入节点

我们可以通过 parentNode.insertBefore(newNode, referenceNode) 方法将一个节点对象插入到指定父节点的子节点列表的指定位置。

// 将新创建的 <div> 插入到最前面
document.body.insertBefore(divNode, document.body.childNodes[0]);

还有一种常见的需求是将一个已存在的 HTML 字符串转换成节点对象。我们可以通过将字符串赋值给元素的 innerHTML 属性，并将其添加到文档中，然后取出其中的节点对象。

// 将 HTML 字符串转换成节点对象
const htmlStr = '<div>Hello World!</div>';
const tempDiv = document.createElement('div');
tempDiv.innerHTML = htmlStr;
const node = tempDiv.childNodes[0];
document.body.appendChild(node);

这就是如何使用原生 JavaScript 将 HTML 元素转换成节点对象的方法。希望本文能对你有所帮助。