在前端开发中，Document 对象是一个非常重要的对象，它代表了当前 HTML 文档。通过 JavaScript，我们可以创建和操作 Document 对象，从而达到动态修改网页内容、样式和结构的目的。
创建 Document 对象
首先，让我们来看一下如何创建一个新的 Document 对象。使用以下代码即可创建一个新的空白文档：
const doc = document.implementation.createHTMLDocument('New Document');上述代码将创建一个名为“New Document”的空白文档，并将其赋值给变量 doc。你可以在此基础上进行进一步的操作，例如向文档中添加元素、修改属性等等。
如果你想要从一个已有的 HTML 字符串创建 Document 对象，也可以这么做：
const parser = new DOMParser(); const htmlString = '<html><head><title>My Title</title></head><body><p>Hello World!</p></body></html>'; const doc = parser.parseFromString(htmlString, 'text/html');
上述代码将会把 htmlString 转换成一个 Document 对象并赋值给变量 doc。这种方法通常用于加载外部 HTML 文件或 AJAX 响应。
操作 Document 对象
创建了 Document 对象后，我们就可以开始对其进行操作了。以下是一些常见的操作：
获取元素
要获取文档中的元素，可以使用诸如 getElementById、getElementsByTagName、getElementsByClassName 等方法。例如，如果你想获取 ID 为 myDiv 的元素：
const myDiv = doc.getElementById('myDiv');创建元素
要在文档中创建新的元素，可以使用 createElement 方法。例如，以下代码将创建一个新的 <p> 元素：
const p = doc.createElement('p');添加元素
要将新的元素添加到文档中，可以使用 appendChild 或 insertBefore 方法。例如，以下代码将把上面创建的 <p> 元素添加到文档中：
doc.body.appendChild(p);
修改元素属性
要修改元素的属性，可以使用 setAttribute 或直接修改属性值。例如，以下代码将修改 <p> 元素的 class 属性：
p.setAttribute('class', 'red');
// 或者直接修改属性值
p.className = 'red';修改元素内容
要修改元素的内容，可以使用 innerHTML 或 textContent 属性。例如，以下代码将修改 <p> 元素的文本内容：
p.textContent = 'Hello World!';
示例代码
下面是一个完整的示例代码，它会创建一个新的文档、添加一个标题和一些段落，并将其输出到控制台：
-- -------------------- ---- ------- ----- --- - ----------------------------------------------- ----------- ----- ----- - --------------------------- ----------------- - --- --- ---------- ---------------------------- ----- -- - ----------------------- -------------- - ----- -- --- ----- ------------ ------------------------- ----- -- - ----------------------- -------------- - ----- -- --- ------ ------------ ------------------------- -------------------------------------------
以上代码将输出以下内容：
-- -------------------- ---- -------
--------- -----
------
------
--------- --- ----------------
-------
------
------- -- --- ----- --------------
------- -- --- ------ --------------
-------
-------这个示例代码展示了如何使用 JavaScript 创建和修改 Document 对象。希望它能帮助你更好地理解 Document 对象和 JavaScript 的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29096