3.Document类型
Javascript通过使用Document类型表示文档。在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面。document对象是window对象的一个属性，因此可以直接调用。HTMLDocument继承自Document。
3.1.属性
documentElement
始终指向HTML页面中的元素。
body
直接指向元素
doctype
访问<!DOCTYPE>, 浏览器支持不一致，很少使用
title
获取文档的标题
URL
取得完整的URL
domain
取得域名，并且可以进行设置，在跨域访问中经常会用到。
referrer
取得链接到当前页面的那个页面的URL，即来源页面的URL。
images
获取所有的img对象，返回HTMLCollection类数组对象
forms
获取所有的form对象，返回HTMLCollection类数组对象
links
获取文档中所有带href属性的元素
3.2.DOM编程界面
HTML DOM 能够通过 JavaScript 进行访问（也可以通过其他编程语言）。
在 DOM 中，所有 HTML 元素都被定义为对象。
编程界面是每个对象的属性和方法。
属性是您能够获取或设置的值（就比如改变 HTML 元素的内容）。
方法是您能够完成的动作（比如添加或删除 HTML 元素）。
实例
下面的例子改变了 id=“demo” 的
元素的内容：
<html> <body> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Hello World!"; </script> </body> </html>
在上面的例子中，getElementById 是方法，而 innerHTML 是属性。
getElementById 方法
访问 HTML 元素最常用的方法是使用元素的 id。
在上面的例子中，getElementById 方法使用 id=“demo” 来查找元素。
innerHTML 属性
获取元素内容最简单的方法是使用 innerHTML 属性。
innerHTML 属性可用于获取或替换 HTML 元素的内容。
innerHTML 属性可用于获取或改变任何 HTML 元素，包括 和 。
3.3.查找元素
| 方法 | 描述 |
| document.getElementById(id) | 通过元素 id 来查找元素 |
| document.getElementsByTagName(name) | 通过标签名来查找元素 |
| document.getElementsByClassName(name) | 通过类名来查找元素 |
| document.querySelector() | 返回文档中匹配指定的CSS选择器的第一元素 |
| document.querySelectorAll() | document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表 |
getElementById()
返回匹配指定 id 的一个元素。
<div id="d1">我是一个div标签</div> <script> // 查找id为d1的标签 var div = document.getElementById('d1'); console.log(div); </script>
getElementsByTagName()
返回一个HTMLCollection(伪数组)，包含匹配指定标签名的所有元素。
<p>我是p标签</p> <p>我是p标签</p> <p>我是p标签</p> <script> // 查找所有p标签 var p = document.getElementsByTagName('p'); console.log(p); </script>
getElementsByClassName()
返回一个HTML集合HTMLCollection(伪数组)，包含匹配指定类名的所有元素。
<div class="div1">我是div标签</div> <div class="div1">我是div标签</div> <div class="div1">我是div标签</div> <script> // 查找class为div1的标签 var div = document.getElementsByClassName('div1'); console.log(div); </script>
document.querySelector()
返回文档中匹配指定的CSS选择器的第一元素
<div id="div1">我是一个div</div> <div id="div1">我是一个div</div> <script> document.querySelector("#div1").innerHTML = "Hello World!"; </script>
document.querySelectorAll()
document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表
<div class="div1">我是一个div</div> <div class="div1">我是一个div</div> <script> console.log(document.querySelectorAll(".div1")); var x = document.querySelectorAll(".div1"); x[0].innerHTML = '我是新的div'; </script>
3.4.添加元素
document.createElement(element)
创建一个新的HTML元素，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。
<script> // 创建元素节点p var p = document.createElement('p'); // 向p标签插入内容 p.innerHTML = '我是一个p标签'; // 将节点插入到body中 document.body.appendChild(p); </script>
3.5.写入
document.write()
向文档写入文本或 HTML 表达式 或 JavaScript 代码。
<script> document.write("<p>Hello world!</p>"); document.write("<span>Hello DOM!</span>"); document.write("Hello Weekend!"); </script>
4.Element类型
Element 对象对应网页的 HTML 元素。每一个 HTML 元素在 DOM 树上都会转化成一个Element节点对象。
4.1.属性
attributes：返回一个与该元素相关的所有属性的集合。
classList：返回该元素包含的 class 属性的集合。
className：获取或设置指定元素的 class 属性的值。
clientHeight：获取元素内部的高度，包含内边距，但不包括水平滚动条、边框和外边距。
clientTop：返回该元素距离它上边界的高度。
clientLeft：返回该元素距离它左边界的宽度。
clientWidth：返回该元素它内部的宽度，包括内边距，但不包括垂直滚动条、边框和外边距。
innerHTML：设置或获取 HTML 语法表示的元素的后代。
tagName：返回当前元素的标签名。
4.2.常用方法
| 方法 | 描述 |
| element.innerHTML = new html content | 改变元素的 innerHTML |
| element.attribute = value | 修改属性的值 |
| element.getAttribute() | 返回元素节点的指定属性值。 |
| element.setAttribute(attribute, value) | 设置或改变 HTML 元素的属性值 |
| element.style.property = new style | 改变 HTML 元素的样式 |
element.innerHTML
属性设置或获取HTML语法表示的元素的后代。
<div id="div1">我是一个div</div> <script> var d1 = document.getElementById('div1'); // 获取 console.log(d1.innerHTML); // 设置 d1.innerHTML = '我是新的内容' </script>
element.attribute = value
修改已经存在的属性的值
<div id="div1">123</div> <script> var d1 = document.getElementById('div1'); // 直接将已经存在的属性进行修改 d1.id = 'div2'; </script>
element.getAttribute()
返回元素节点的指定属性值。
<div id="div1">我是一个div</div> <script> var div = document.getElementById('div1'); console.log(div.getAttribute('id')); // div1 </script>
element.setAttribute(attribute, value)
把指定属性设置或更改为指定值。
<div id="div1">我是一个div</div> <script> var d1 = document.getElementById('div1'); // 设置div1的class为divCla d1.setAttribute('class', 'divCla'); </script>
element.style.property
设置或返回元素的 style 属性。
<div id="div1">我是一个div</div> <script> var d1 = document.getElementById('div1'); // 获取div1的style样式 console.log(d1.style); // 设置div1的style d1.style.backgroundColor = 'red'; </script>
其他详见https://www.w3school.com.cn/jsref/dom_obj_all.asp
https://developer.mozilla.org/zh-CN/docs/Web/API/Element
5.Text类型
Text 节点由 Text 类型表示，包含按字面解释的纯文本，也可能包含转义后的 HTML 字符，但不含 HTML 代码。
5.1.属性及方法
length
文本长度
appendData(text)
追加文本
deleteData(beginIndex,count)
删除文本
insertData(beginIndex,text)
插入文本
replaceData(beginIndex,count,text)
替换文本
splitText(beginIndex)
从beginIndex位置将当前文本节点分成两个文本节点
document.createTextNode(text)
创建文本节点，参数为要插入节点中的文本
substringData(beginIndex,count)
从beginIndex开始提取count个子字符串
综合案例
<div id="container"></div> <script> // 创建文本节点 var textNode = document.createTextNode('Hello World!'); // 获取container var div = document.getElementById('container'); // 将文本节点插入container div.appendChild(textNode); // 替换文本 textNode.replaceData(0,5,'Hi'); // 插入文本 textNode.insertData(0, 'Hello') </script>
