Javascript第五天学习总结之Dom节点

DOM结构

文档对像模型（dom）

dom结构的组成就是节点 node

每一个节点都有他的属性和样式，我们可以通过js找到节点来更改样式和属性

1.查找节点

document。getELementById("id");

通过id找到html元素，调用者是document，返回值：节点。

document.getElementsByTagName("div");

通过标签名找到html元素，调用者有两个，所以功能为：如果使用document，那么获取这个文档中所有的标签名为参数值的元素节点。如果使用元素节点，那么获取的是这个节点下的所有标签名为参数值的元素节点，返回值：元素节点的数组

document.getElementsByClassName("div");//不兼容ie678：方法的封装可参考http://blog.youkuaiyun.com/yantutwo/article/details/77102627

通过类名找到html元素，调用者有两个，所以功能为：如果使用document，那么获取这个文档中所有的类名为参数值的元素节点。如果使用元素节点，那么获取的是这个节点下的所有类名为参数值的元素节点。，返回值：元素节点的数组

2.节点的关系（父节点，兄弟节点，子节点）

父节点parentNode 调用者必须是获取节点的子节点，一个节点只有一个父节点。

兄弟节点  调用者必须是获得者的兄弟节点

nextSibing  ie678支持下一个元素节点；谷歌火狐ie9+获取的是下一个节点（包括空格换行）

nextElementSibing  谷歌火狐ie9+获取的是下一个元素节点，ie678中不存在

previousSibing 同上

previousElementSibing 同上

以下是兼容写法：

 var  aaa=  box.nextElementSibling || box.nextSibing;

var a=box.previousElementSibling || box.previousSibing;

子节点   调用者必须是获取节点元素的父节点 

获取第一个子节点

i.firstChild：主要是IE678支持。（获取第一个子元素节点）

但是在火狐谷歌IE9+获取第一个子节点。（文本和换行）

   ii.    firstElementChild：火狐谷歌IE9+支持获取第一个子元                         素节点。在IE678中不存在。

兼容写法：

var  aaa=  box.firstElementChild || box.firstChild;

获取最后一个子节点

i.          lastChild：主要是IE678支持。（获取最后一个子元素节点）              但是在火狐谷歌IE9+获取最后一个子节点。 （包括文本和换行）

Ii.         lastElementChild：火狐谷歌IE9+支持获取最后一个子元                    素节点。在IE678中不存在。

兼容写法：

var a=box.lastElementChild || box.lastChild;

获取所有子节点

childNodes（官方承认方法）返回指定元素的子元素集合，包括html节点，所有属性，文本节点。

火狐谷歌等高本版会把换行也看做是子节点

nodeType==1时才是元素节点

      nodeType==  1  表示的是 元素节点  记住元素就是标签

       nodeType==  2  表示是属性节点   了解

       nodeType==  3  是文本节点   了解

chidren(比较常用的，非标准属性) 返回指定元素的子元素数组

在ie678中会包含注释节点。

3、dom节点的操作

appendChild() 向节点添加最后一个子节点。

insertBefore(插入节点，参照节点) 在参照节点之前插入节点

。 （如果参照节点为null，则默认插入到后面）

removeChild()删除节点。

父节点.removeChild（子节点）。

node.parentNode.removeChild(node)。父节点未知可这样写，自杀

cloneNode()

新节点=旧节点.cloneNode();

如果参数为true则复制旧节点的所有子元素，否则就复制节点本身。

getArttribute(名称)获取节点属性

setAttribute(名称，值)设置节点属性

removeAttribute(名称)

调用者都是元素本身。