Document对象是获取元素后返回的是HtmlElement对象，它是由Element对象派生而来。所有的HTML元素都是HTMLElement对象的实例，如<div>、<p>、<span>等。HTMLElement对象提供了一些属性和方法，用于访问和操作元素节点的属性和内容，同样它也继承了Document部分函数例如getElementsByxxxx等等。
属性
1. accessKey
该属性表示对元素的快捷键，按下键盘上定义的快捷键即可聚焦到该元素上。取值为字符串类型。
<button id="myButton" accesskey="b">点击我（Alt+B）</button>
2. classList
该属性返回一个 DOMTokenList 对象，表示元素类名的列表，这个对象提供了一些操作类名的方法，例如添加、删除、切换等。详细使用方式请参考 MDN 文档。
<div id="myDiv" class="box"></div>
<script>
var div = document.getElementById("myDiv");
div.classList.add("new-class");
div.classList.remove("box");
console.log(div.classList.contains("new-class")); // true
</script>
3. className
该属性表示元素的 CSS 类名，取值为字符串类型。可以直接读取其值或者更改其值。
<div id="myDiv" class="box"></div>
<script>
var div = document.getElementById("myDiv");
div.className = "new-class";
console.log(div.className); // new-class
</script>
4. contentEditable
该属性表示元素是否可编辑，取值为字符串类型的枚举值，包括："true"、"false" 和 "inherit"。
<div id="myDiv" contenteditable="true">这是一段可编辑的文本。</div>
5. dir
该属性表示元素内容的方向，取值为字符串类型的枚举值，包括："ltr"（从左到右）和 "rtl"（从右到左）。
<div id="myDiv" dir="rtl">这是一段从右到左的文本。</div>
6. draggable
该属性表示元素是否可以被拖动，取值为字符串类型的枚举值，包括："true"、"false" 和 "auto"。
<img src="example.png" draggable="true">
7. hidden
该属性表示元素是否隐藏，取值为字符串类型的布尔值，包括："hidden" 和 "visible"。
<div id="myDiv" hidden>这个元素被隐藏了</div>
8. id
该属性表示元素的唯一标识符，可以通过该属性和 document.getElementById() 方法获取元素的引用。取值为字符串类型。
<div id="myDiv"></div>
<script>
var div = document.getElementById("myDiv");
</script>
9. lang
该属性表示元素内容的语言代码，取值为字符串类型的 BCP 47 语言标记，例如："zh-CN"。
<div id="myDiv" lang="en-US">This is an English text.</div>
10. offsetHeight
该属性表示元素的高度，包括内容、内边距、边框和滚动条（如果存在）。取值为数字类型的像素值。
<div id="myDiv" style="height: 100px; padding: 10px; border: 1px solid #000; overflow: auto;">这是一段有滚动条的文本。</div>
<script>
var div = document.getElementById("myDiv");
console.log(div.offsetHeight); // 122
</script>
类似API:offsetLeft、offsetParent、offsetTop、
11.scrollHeight
该属性表示元素的滚动高度，包括被隐藏部分。取值为数字类型的像素值。
<div id="myDiv" style="height: 100px; overflow: auto;">
<p>这是一段有滚动条的文本。</p>
<p>这是一段有滚动条的文本。</p>
<p>这是一段有滚动条的文本。</p>
<p>这是一段有滚动条的文本。</p>
</div>
<script>
var div = document.getElementById("myDiv");
console.log(div.scrollHeight); // 200
</script>
类似API:scrollLeft、scrollTop、
12.style
该属性表示元素的样式。可以通过该属性修改元素的 CSS 样式。
<div id="myDiv">这是一个 div 元素。</div>
<script>
var div = document.getElementById("myDiv");
div.style.color = "red";
div.style.backgroundColor = "yellow";
</script>
函数
1. addEventListener()
该方法用于给元素添加事件监听器，当特定事件发生时触发回调函数。
<button id="myButton">点击我！</button>
<script>
var button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("按钮被单击了！");
});
</script>
对应API:removeEventListener
2. setAttribute()
该方法用于设置指定属性的值。如果该属性不存在，则会创建该属性并设置其值。
<div id="myDiv">这是一个 div 元素。</div>
<script>
var div = document.getElementById("myDiv");
div.setAttribute("class", "myClass");
</script>
类似API: getAttribute
3. classList
该属性返回一个类数组对象，包含元素的类名。
<div id="myDiv" class="class1 class2 class3">这是一个 div 元素。</div>
<script>
var div = document.getElementById("myDiv");
console.log(div.classList.length); // 3
console.log(div.classList.contains("class1")); // true
console.log(div.classList.contains("class4")); // false
div.classList.add("class4");
console.log(div.getAttribute("class")); // class1 class2 class3 class4
div.classList.remove("class2");
console.log(div.getAttribute("class")); // class1 class3 class4
</script>
4. innerHTML
该属性返回或设置元素的 HTML 内容。
<div id="myDiv">这是原始内容。</div>
<script>
var div = document.getElementById("myDiv");
div.innerHTML = "<p>这是新的 HTML 内容。</p>";
</script>
5. scrollIntoView()
该方法将元素滚动到可见区域内。
<div style="height: 1000px;"></div>
<div id="myDiv" style="height: 200px; border: 1px solid black;">这是一个 div 元素</div>
<button onclick="document.getElementById('myDiv').scrollIntoView()">滚动到我的位置</button>
6. scrollIntoViewIfNeeded()
如果元素不在可见区域内，则该方法将其滚动到可见区域。
<div style="height: 1000px;"></div>
<div id="myDiv" style="height: 200px; border: 1px solid black;">这是一个 div 元素</div>
<button onclick="document.getElementById('myDiv').scrollIntoViewIfNeeded()">滚动到我的位置</button>
7. insertAdjacentHTML()
该方法在元素的相对位置插入指定的 HTML 内容。
<div id="myDiv"><p>段落1</p><p>段落2</p></div>
<button onclick="document.getElementById('myDiv').insertAdjacentHTML('beforeend', '<p>段落3</p>')">插入段落3</button>
- 该方法有两个有效的插入位置：
'beforebegin'(元素前)、'afterbegin'(元素内部开始)、'beforeend'(元素内部结尾)、'afterend'(元素后)
类似API:insertAdjacentText
8、Document.APi
- 以当前元素为根节点:
getElementByIdxxxx - 添加子节点:
appendChild - ...
等等以上是常用API。
