文档对象模型（DOM）

DOM
文档对象模型
Document Object Model
将整篇html文档称作一个文档
html: 父元素 父节点
head 子节点
body 子节点
head和body相互为兄弟节点
html中的任意东西都是一个节点
Document类型 文档类型 document
Element类型 元素类型 div span
Text类型 文本类型 body–>hello
Comment类型 注释类型
父构造函数：Node类型
1.nodeType
9-Document 1-Element 3-Text 8-Comment
注意：判断NodeList和Node继承自谁
// 每一个对象中有一个proto指向父构造函数的原型对象
//prototype原型
//constructor 属性返回对创建此对象的数组函数的引用
console.log(NodeList.prototype);

console.log(NodeList.prototype.proto);

console.log(NodeList.prototype.proto.constructor);

console.log(NodeList.prototype.proto)；
console.log(‘EventTarget’,Node.prototype.proto.constructor);
console.log(‘Object’,EventTarget.prototype.proto.constructor);

2.nodeValue
节点值，一般元素节点的值是null
可以用在注释上
3.nodeName
节点名称，一般用在元素节点上，返回的是大写的元素名称
4.childNodes
返回子节点组成的类数组对象NodeList
[0] console.log(childs[1]);
.item(0) console.log(childs.item(0));
类数组转换为数组：
Array.prototype.slice.call(类数组对象,参数列表);
Array.prototype.slice.apply(类数组对象,参数数组);

`
window.onload = function(){
// 获取body元素 Element
console.log(document.body);
// 获取所有的子节点，返回一个类数组对象
// NodeList
console.log(document.body.childNodes);
// 将类数组对象转换为数组对象
var tempArr = Array.prototype.slice.call(document.body.childNodes,0);
console.log(tempArr);
// 筛选文本节点 nodeType值代表的类型 9-Document 1-Element 3-Text 8-Comment
var newArr = tempArr.filter(function(item,index){
return item.nodeType==3;
});
console.log(newArr);
// 筛选元素节点
var newArr = tempArr.filter(function(item,index){
return item.nodeType==1;
});
console.log(newArr);
// 筛选注释节点
var newArr = tempArr.filter(function(item,index){
return item.nodeType==8;
});
console.log(newArr);

5.firstChild
返回NodeList中的第一个，0号位置上的
6.lastChild
返回NodeList中的最后一个，最后位置上的
7.nextSibling
返回NodeList中的下一个兄弟节点
8.previousSibling
返回NodeList中的上一个兄弟节点
9.parentNode
返回父节点
同一个NodeList中的子节点，有同一个父节点
10.hasChildNodes()
返回true/false,是否有孩子节点
1)父元素.appendChild(孩子节点)
追加孩子节点到最后
2)父元素.insertBefore(要插入的点，参考位置的节点)
在参考节点位置之前添加【插入的点】
3)父元素.replaceChild(新节点,旧节点)
以新节点替换旧节点
4)父元素.removeChild(要删除的点)
将要删除的点删除
5)节点.cloneNode(true/false);
复制节点/创建节点的副本
如果参数是true，深复制，复制元素和后代
如果参数是false,浅复制，只复制该元素，不复制后代
该方法不复制事件
6)父元素.normalize()
将相邻的Text合并
HTMLCollection–>父构造函数是谁