document 对象
当浏览器载入 HTML 文档, 它就会成为 Document 对象，即是 HTML 文档的根节点， Document 对象可以从脚本中对 HTML 页面中的所有元素进行访问。
PS：Document 对象是 Window 对象的一部分，可通过 window.document 属性对Document 对象自身进行访问。
element 对象
在 HTML DOM 中, 元素对象代表着一个 HTML 元素。NodeList 对象代表了节点列表，类似于 HTML元素的子节点集合。元素的属性是属性节点。
| 方法 | 描述 |
|---|---|
| document.write() | 向文档写 HTML 表达式 或 JavaScript 代码。 |
| document.writeln() | 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。 |
| document.getElementById() | 返回对拥有指定 id 的第一个对象的引用，如：document.getElementById(“demo”) 没有指定 ID时返回 null，多个指定ID返回 undefined。 |
| document.getElementsByName() | 返回带有指定名称的对象的集合 |
| document.getElementsByTagName() | 返回带有指定标签名的对象集合。 |
| element.getElementsByTagName() | 返回指定标签名的所有子元素集合。 |
| document.getElementsByClassName() | 返回文档中所有指定类名的元素集合，作为 NodeList 对象。 |
| element. getElementsByClassName() | 返回文档中所有指定类名的元素集合，作为 NodeList 对象。 |
| document.createAttribute() | 创建一个属性节点 |
| element.removeAttribute() | 从元素中删除指定的属性 |
| element.removeAttributeNode() | 删除指定属性节点并返回移除后的节点。 |
| document.addEventListener() | 向文档添加句柄 ，可以使用 document.removeEventListener()方法来移除 addEventListener() 方法添加的事件句柄。使用 element.addEventListener() 方法为指定元素添加事件句柄。 |
| element.addEventListener() | 向指定元素添加事件句柄 |
| document.removeEventListener() | 移除文档中的事件句柄(由 addEventListener() 方法添加)；// 在文档中添加事件句柄document.addEventListener(“mousemove”, myFunction);// 移除文档中的事件句柄document.removeEventListener(“mousemove”, myFunction); |
| element.removeEventListener() | 移除由 addEventListener() 方法添加的事件句柄 |
| document.createTextNode() | 创建文本节点。 |
| element.appendChild() | 为元素添加一个新的子元素 |
| element.cloneNode(deep) | 克隆某个元素，返回这个节点的副本（包括属性）。如果deep的值为true，则复制所有包含的节点；否则只复制这个节点 |
| element.focus() | 设置文档或元素获取焦点，为元素设置焦点（如果可以设置）。提示：使用 .blur() 方法来移除元素焦点。 |
| element.hasChildNodes() | 返回一个元素是否具有任何子元素 |
element.insertBefore(newChild,refChild) |
在现有节点refChild之前插入节点newChild |
| element.getAttribute() | 返回指定元素的属性值 |
| element.getAttributeNode() | 返回指定属性节点 |
element.removeChild(oldChild) |
删除一个子元素，将子节点列表中的子节点oldChild删除，并返回oldChild节点 |
element.replaceChild(newChild，oldChild) |
替换一个子元素，将子节点列表中的子节点oldChild换成newChild，并返回oldChild节点 |
| element.setAttribute() | 设置或者改变指定属性值。 |
| element.setAttributeNode() | 设置或者改变指定属性节点。 |
| 属性 | 描述 |
|---|---|
| document.embeds | 返回文档中所有嵌入的内容（embed）集合 ，var x = document.embeds.length;可以计算HTML中嵌入了多少个<embeds> 元素 |
| document.forms | 返回对文档中所有 Form 对象引用。document.write(document.forms.length);可以返回文档中表单数量 |
| document.images | 返回当前文档中所有图片的数组。 |
| element.attributes | 返回一个元素的属性数组 |
| element.childNodes | 返回元素的一个子节点的数组 |
| element.children | 返回元素的子元素的集合 |
| element.classList | 返回元素的类名，作为 DOMTokenList 对象。add()增添类，contains()判断是否包含类，remove() 移除类 |
| element.innerHTML | 设置或者返回元素的内容。 |
| element.className | 设置或返回元素的class属性 |
| element.firstChild | 返回元素的第一个子节点 |
| element.lastChild | 返回的最后一个子元素 |
| element.nextSibling | 返回该元素紧跟的一个节点 |
| element.nextElementSibling | 返回指定元素之后的下一个兄弟元素（相同节点树层中的下一个元素节点）。 |
| element.nodeName | 返回元素的标记名（大写，只读）。元素节点的 nodeName 与标签名相同，属性节点的 nodeName 与属性名相同，文本节点的 nodeName 始终是 #text，文档节点的 nodeName 始终是 #document |
| element.nodeType | 返回元素的节点类型，元素类型NodeType；元素：1，属性：2，文本：3，注释：8，文档：9 |
| element.nodeValue | 返回元素的节点值， 元素节点的 nodeValue 是 undefined 或 null ，文本节点的 nodeValue 是文本本身，属性节点的 nodeValue 是属性值 |
| element.parentNode | 返回元素的父节点 |
| element.previousSibling | 返回某个元素紧接之前元素 |
| element.previousElementSibling | 返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）。 |
| element.textContent | 设置或返回一个节点和它的文本内容，设置节点文本内容:node.textContent=text；返回节点文本内容:node.textContent |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.divClass{ background-color: greenyellow;width: 100px;height: 100px;}
</style>
</head>
<body>
<ul> <li>China</li> <li>English</li> <li>Australia</li> </ul>
</body>
<script>
var body = document.getElementsByTagName('body')[0]
//createDocumentFragment()创建一个虚拟的节点，其本身不会显示在页面
var div_1 = document.createDocumentFragment();
//createDocumentFragment()方法创建的不能使用setAttribute()方法,否则报错
//div_1.setAttribute("style","width: 10px;height: 10px;background:black;")
body.appendChild(div_1)
//createElement()创建一个元素节点，会显示在页面
var div_2 = document.createElement('div')
div_2.setAttribute("style","width: 10px;height: 10px;background:black;")
body.appendChild(div_2)
//createDocumentFragment()作为一个虚拟节点，可以更安全改变文档的结构及节点
var div_3 = document.createDocumentFragment("div")
var li = document.getElementsByTagName('li')[0]
//将获取到的 body 的 li 的元素节点，增添到创建的虚拟节点后，body 中的该节点立即不显示了
div_3.appendChild(li)
//现在的虚拟节点的 节点值nodeValue 成为了 字符串 country
div_3.childNodes[0].childNodes[0].nodeValue = "country"
//addEventListener()添加一个事件句柄
var btn = document.createElement("button")
btn.setAttribute("style","width: 100px;")
btn.setAttribute("type","button")
var btn_text =document.createTextNode("button")
btn.appendChild(btn_text)
body.appendChild(btn)
// 使用 addEventListener() 方法向元素节点中添加点击事件，不要使用 "on" 前缀
btn.addEventListener("click",func_frag)
function func_frag(){
//将从 body 中取到的 li元素节点，赋值到 body 的子节点中
body.appendChild(div_3)
}
</script>
</html>
<script>
function getfocus() {
//.focus()获取焦点
document.getElementById("myAnchor").focus();
}
//.blur()移除焦点
function losefocus() {
document.getElementById("myAnchor").blur();
}
function myFunction(){
var itm=document.getElementById("myList2").lastChild;
//如果cloneNode(deep)的deep参数为假，只有一个空的标签元素将被克隆，在此例中，是克隆了标签元素本身，以及其内部包含的所有节点
var cln=itm.cloneNode(true);
document.getElementById("myList1").appendChild(cln);
}
function myFunction(){
var c=document.getElementsByTagName("BUTTON")[0];
var x=document.getElementById("demo");
//如果设置了 textContent的属性，任何子节点都可以被移除
//或者被 指定的字符串的文本节点 替换
x.innerHTML=c.textContent;
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.divClass{ background-color: greenyellow;width: 100px;height: 100px;}
</style>
</head>
<body>
</body>
<script>
var body = document.getElementsByTagName('body')[0]
//setAttributeNode()设置属性节点
var div_1 = document.createElement("div")
body.appendChild(div_1)
//创建属性节点“class”
var a = document.createAttribute('class')
//对创建的属性节点“class”进行赋值
//a.value = 'divClass' 与a.nodeValue = 'divClass' 的效果相等
a.value = 'divClass'
//设置创建的 div_1 的属性节点
div_1.setAttributeNode(a)
//setAttribute()设置属性值
var div_2 = document.createElement('div')
body.appendChild(div_2)
//设置节点的属性值
div_2.setAttribute("style","background-color: yellow;width: 150px;height: 150px;")
</script>
</html>