JavaScript文档对象模型（dom）

宿主对象：DOM对象 BOM对象
什么是DOM对象：
1、全称Document ObjectModel文档对象模型
2、JS中通过DOM来对HTML文档进行操作理解了DOM就可以随心所欲的操作WEB页面
什么是文档：
1、文档表示的就是整个的HTML页面文档
2、对象表示将网页中的每一个部分都转化为一个对象
3、使用模型来表示对象之间的关系，这样方便我们获得对象
节点的类型：
1、文档节点（document）;
文档节点document，代表的是整个HTML文档，网页中的所有节点都是它的子节点
Document对象作为window对象的属性存在，我们不用获取可以直接使用
通过该对象我们可以在整个文档访问内查找节点对象，并可以通过该对象创建各种节点对象
例：console.log(window.document);获取html文档
console.log(document);同上—文档节点
document.getElementById(“demo”);元素节点的获取
document.createElement(“p”);通过document创建一个节点
2、元素节点（Element）
HTML中的各种标签都是元素节点，这也是我们最常用的一个节点
浏览器会将页面中所有的标签都转换为一个元素节点，我们可以通过document的方法来获取元素节点
比如：docunment.getElementByID();根据ID属性值获取一个元素节点对象
例：var h1=document.getElementById(“demo”);元素节点
Console.log(h1);
3、文本节点（text）
文本节点表示的是HTML标签以外的文本内容，任意非HTML的文本都是文本节点
它包括可以字面解释的纯文本内容
文本节点一般是作为元素的子节点存在的
获取文本节点时，一般先要获取元素节点。通过元素节点获取文本节点
例：元素节点：firstChild;获取原宿节点的第一个子节点，一般为文本节点
例：var txt=h1.firstChild;文本节点
Console.log(txt);
4、属性节点（Attr）
属性节点表示的是标签中的一个属性，这里要注意的是属性节点并非是元素节点的子节点，而是元素节 点中的一部分
可以通过元素节点来获取指定的属性节点
例如：元素节点：getAttributeNode(“属性名”)；
注意：我们一般不使用属性节点
例：var attr=h1.getAttributeNode(“id”);属性节点
Console.log(attr);
5、nodeName属性：节点的名称，是只读的
1、元素节点的nodeName与标签名相同
2、属性节点的nodeName是属性名的名称
3、文本节点的nodeName永远是#text
4、文档节点的nodeName永远是#document
6、nodeValue属性：节点的值
1、元素节点的nodeValue是undefined或null
2、文本节点的nodeValue是文本自身
3、属性节点的nodeValue是属性的值
7、nodeType属性：节点的类型，是只读的。以下常用的几种节点类型：
元素类型：元素 属性 文本 注释 文档
8、如何获取元素节点（方法）：
1、通过ID属性获取一个元素节点对象—getElementById()
2、通过标签名获取一组元素节点对象—getElementByTangName()
3、通过name属性获取一组元素节点对象—getElementByName()
4、通过标类名称获取一组元素节点对象，该方法不支持IE8以下版本
例：var box=document.getElementById(“id名称”);console.log(“box”);
获取元素节点的子节点
通过具体的元素节点调用 getElementsByTagName()
方法，返回当前节点的指定标签名后代节点
childNodes属性，表示当前节点的所有子节点
firstChild属性，表示当前节点的第一个子节点
lastChild属性，表示当前节点的最后一个子节点