DOM的认知

DOM节点的认知

一、Node

1.Node的实例对象
var zt = document.getElementById(“main”);
控制台打印结果为：
zt是HTMLDivElement的实例对象
zt是HTMLElement的实例对象
zt是Element的实例对象
zt是Node的实例对象
zt是Object的实例对象
2.Node的实例属性
（1）节点特性的属性
Node.ELEMENT_NODE 元素节点 1
Node.TEXT_NODE 文本节点 3
Node.COMMENT_NODE 注释节点 8
Node.DOCUMENT_NODE 文档节点 9
(2)层次关系属性
main.childNodes,表示main的孩子节点，回车也算一个子节点，其元素为所有子节点
main的第二个孩子节点是text,是文本节点。他的nodeType是3
3.Node的实例方法
Node.prototype.appendChild(document.creatElement(“标签名”))
查看器结果:
Node.prototype.cloneNode(deep);
Node.prototype.replaceChild(newCode,relCode);
Node.prototype.insertBefore(newCode,relCode);
Node.prototype.removeChild(node);

二、Element

1.Element的实例属性
main.clientTop:边框的高度
main.clientLeft:边框的宽度
main.clientHeight:元素的高度
main.clientWidth:元素的宽度

2.Element的实例方法
main.children[1] //获取的是content节点
main.children[1].children[0] //获取content下面的ul
查看器输出结果:

三、Document

1.Document的实例属性

2.Document的实例方法