Document 方法修改文档open打开一个要写入的文档。
这将会有一些连带的影响。例如：
此时已注册到文档、文档中的节点或文档的 Window 的所有事件监听器会被清除文档中的所有节点会被清除document.open();当 document.write() 在页面加载后调用，会发生自动的 document.open() 调用。不要和 window.open() 方法混淆。document.open 可用于重写当前的文档内容或者追加内容，而 window.open 是提供了打开一个新的窗口的方法，当前的网页文档内容给你会被保留。由于 Window 是一个全局对象，直接调用 open(...) 和 window.open(...) 的效果是一样的。write将一个文本字符串写入一个由 document.open() 打开的文档流。
📖 语法:
document.write(maskup);参数 maskup 为一个包含要写入文档的文本的字符串。
对文档的写入操作主要通过 document.write() 方法。该方法主要用在两方面：
页面载入过程中用实时脚本创建页面内容用延时脚本创建本窗口或新窗口的内容只有当页面被加载的时候 document.write() 函数才会被执行
⚠️ 注意：
因为 document.write() 需要向文档流中写入内容，所以，若在一个已关闭（例如，已完成加载）的文档上调用 document.write()，就会自动调用 document.open()，浙江清空该文档的内容。在由 deferred 或 asynchronous 属性的 参数 id：根据元素的 id 属性获取元素引用（大小写敏感）任何 HTML 元素可以有一个 ID 属性，但在文档中该值必须唯一。若浏览器中出现多个 ID 名的情况，CSS 样式对所有该 ID 名的元素都生效，但 JavaScript 脚本仅对第一个出现该 ID 名的元素生效。document.getElementById() 只能在 document 对象上调用，它在整个文档中查找给定的 id 属性。getElementsByNamegetElementsByName() 方法通过指定 HTML 元素 name 属性获取元素引用的集合。
参数 name：根据元素的 name 属性获取元素引用因为一个文档中 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所以 getElementsByName() 方法返回的是 元素的数组（NodeList），而不是一个元素。在 HTML 元素中，并不是所有元素都有 name 属性，比如
- 1
- 2
- 3
返回的元素的顺序是它们在文档中的顺序返回的类数组对象有一个 namedItem() 方法，可以通过元素的 name 属性取得集合中的第一个值。Safari 和 IE 不支持该方法getElementsByTagName() 方法可以用于 Document 对象，也可以用于 Element 元素对象，用于调用该方法的元素的 后代元素如果要对 HTMLCollection 集合进行循环操作，最好将其长度缓存起来，因为每次循环都会去计算长度，暂时缓存起来可以提高效率如果没有存在指定的标签，该接口返回的不是 null，而是一个空的 HTMLCollection匹配所有标签
使用通配符 *。
const all = document.getElementsByTagName('*');getElementByClassNamegetElementsByClassName() 方法通过指定 HTML 子元素的类名获取元素引用的集合。
参数 className：根据元素类名获取元素引用返回值 elementList：返回值为匹配类名的元素集合IE9 以下浏览器不支持如果要获取 2 个以上 className，可传入多个className，每个用空格分隔querySelectorquerySelector() 方法返回文档中匹配指定 CSS 选择器的第一个元素。
参数 selectors 必须是有效的 CSS 选择器字符串；如果不是，则引发 SYNTAX_ERR 异常。如果没有找到匹配的元素，返回 null。该方法既可用于 Document 类型，也可用于元素 Element 类型。🌰 示例：
// ID 为 foo 的元素const foo = document.querySelector('.foo');// 类名为 bar 的元素const bar = document.querySelector('.bar');querySelectorAllquerySelectorAll() 方法返回与指定的选择器组匹配的文档中的元素列表（使用 深度优先 的先序遍历文档的节点）。
没有匹配元素时，返回空的类数组对象，而不是 null创建节点创建元素节点：document.createElement创建属性节点：document.createAttribute设置属性节点到元素节点：document.setAttribute创建文本节点：document.createTextNode创建注释节点：document.createComment创建空白文档片段：document.createDocumentFragmentcreateElement通过 document.createElement 创建由 tagName 指定的 HTML 元素，或一个 HTMLUnkownElement。
document.createElement(tagName [, options])当执行此方法后，该元素并未显示在 HTML 文档中，需要将该元素添加到 DOM 树中：
找到一个作为父元素的元素使用 appendChild() 方法，并将您想要的元素添加到指定的元素中🌰 示例：
What's happening?
let newElement = document.createElement('p');newElement.textContent = '新创建的p元素';
document.body.appendChild(newElement);createAttribute创建新的属性节点，这种创建方式下 DOM 不限制节点能够添加的属性种类。
document.createAttribute(name);参数 name 是属性的属性名
🌰 示例：
const node = document.getElementById('node');const att = document.createAttribute('name');
att.value = 'newValue';
node.setAttribute(att);console.log(node.getAttribute('name'));// newValuecreateDocumentFragment创建一个新的空白的文档片段 DocumentFragments。
DocumentFragments 是 DOM 节点。它们不是主 DOM 树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到 DOM 树。在 DOM 树中，文档片段被其所有的子元素所代替。
因为文档片段存在于内存中，并不在 DOM 树中，所以将子元素插入到文档片段时不会引起页面回流（对元素位置和几何上的计算）。因此，使用文档片段通常会带来更好的性能。
🌰 示例：
文档对象方法总结在 DOM 中获取元素（或节点）的五种常用的方法：
方法参数是否调用一个元素是否动态document.getElementByIdiddocument.getElementByNamename✔document.getElmentByTagNametag 或 *✔✔document.getElmentByClassNameclassName✔✔document.querySelectorCSS Selector✔document.querySelectorAllCSS Selector✔除 getElementById 和 getElementByName，其它方法均可以在指定元素上搜索指定的选择器。
除此之外：
elem.matches(css) 用于检查 elem 是否匹配指定的 CSS 选择器elem.closet(css) 用于查找匹配给定的 CSS 选择器的最近的组件级elemA.contains(elemB) 表示的是如果 elemB 是否包含 elemA，如果包含就返回 true参考资料：
Selectors API Level1DOM 系列：getElement* 和 querySelector*