JavaScript文档对象总结

1.     
DOM(文档对象模型)和BOM（浏览器对象模型）都属于宿主对象，

什么是DOM，全名为Document Object Model。在js中可通过dom来进行页面文档操作。

文档 – 指整个html网页文档、对象 – 表示把页面每一个部分转换为对象（均可看成对象）、模型 – 可用来表示对象之间的关系，方便我们获取。

2.     
节点 Node。

(1).网页中的每一个部分都可称为节点，html标签、属性、文本、注释、整个文档都可以看成是节点。以上虽然都为节点，当时类型不同，如html标签称为元素节点，属性称为属性节点等等….

(2).常用四个节点

-文档节点：整个html文档。-元素节点：html文档中的html标签。 -属性节点：元素的属性。

• 文本节点：html标签中的文本内容。

–文档节点（document）-- 可代表整个html文档，页面中的节点都是他的子节点。他作为window属性的存在，可以直接调用。通过该对象可在整个文档查找和访问节点对象，还可创建各中节点对象。

–元素节点（Element）

Html中的标签都是他的节点，浏览器会将标签转换为元素节点，可以通过document来获取所需要的元素节点。

–文本节点（text）

Html文本以外的内容都是文本节点，一般作为元素节点的子节点存在。获取文本节点时，一般先获取元素节点，通过元素节点获取文本节点。

–属性节点（Attr）

属性节点表示的是在标签中的一个属性（不是元素节点的子元素，而是元素节点的一部分，一般不会使用）。

3．怎么获取节点

(1)元素节点获取方式

通过document对象调用

1.getElementById()  通过id属性获取一个元素节点对象

2.getElementsByTagName() 通过标签名获取一组元素节点对象

3.getElementsByName() 通过name属性获取一组元素节点对象

4.getElementsByClassName() 通过标类名获取一组元素节点对象

(2)获取元素节点的子节点

通过具体的元素节点调用

1.getElementsByTagName()方法，返回当前节点的指定标签名后代节点

2.childNodes 属性，表示当前节点的所有子节点

3.firstChild 属性，表示当前节点的第一个子节点

4.lastChild 属性，表示当前节点的最后一个子节点。

（3）获取父节点和兄弟节点

通过具体的节点调用

1. parentNode 属性，表示当前节点的父节点

2.previousSibling 属性，表示当前节点的前一个兄弟节点

3.nextSibling 属性，表示当前节点的后一个兄弟节点

（4元素节点的属性

获取:元素对象.属性名

1.element.value

2.element.id-

3.element.className

设置，元素对象.属性名=新的值

例如：element.value = “world”

element.id = “com”

element.className = “name”

其他属：nodeValue –文本节点可以通过nodeValue属性获取和设置文本节点的内容

innerHTML– 元素节点通过该属性获取和设置标签内部的html代码

4．节点修改

这里的修改我们主要指对元素节点的操作

1.创建节点 – document.createElement(“标签名”)

2.删除节点 – 父节点.removeChild(子节点)

3.替换节点 – 父节点.replaceChild(新节点 , 旧节点)

4.插入节点

要修改：父节点.appendChild(子节点)

修改为：父节点.insertBefore(新节点 , 旧节点)