DOM节点操作

DOM的结构   (DOM树（数据类型）)

 

节点

由结构图中我们可以看到，整个文档就是一个文档节点。

而每一个HMTL标签都是一个元素节点。（标签）

标签中的文字则是文字节点。（文本）

标签的属性是属性节点。（属性）

一切都是节点……

查找节点（三种方法）

通过 id 找到 HTML 元素

document.getElementById("demo");

通过标签名找到 HTML 元素(标签本身也能调用这个方法)

document.getElementsByTagName("div")；  （标签也能调用）

通过类名找到 HTML 元素

document.getElementsByClassName("a");

通过类名查找 HTML 元素在 IE 5,6,7,8 中无效

小知识

技术点：document.getElementsByTagName("*");获取所有标签

return  会停止执行函数。

 三个获得节点的返回值问题。

单个节点 = document.getELmentById();                （单个标签）

数组   = document.getElementsByTagName();        （标签数组）

数组   = document.getElementsByClassName();       （标签数组）

 

 封装document.getElementsByClassName()

 

 

节点的访问关系

DOM在设计的时候，把访问关系绑定给了，每一个节点。以什么样的形式绑定的呢？

属性！

父节点  (  parentNode  )

一个节点，只有一个父节点。

案例：1.通过子盒子，更改父盒子背景色。

2.关闭淘宝二维码。

 兄弟节点   （  sibling 兄弟姐妹 --  在此意为兄弟。）

1、nextSibling                   ：IE678  （下一个兄弟节点）

在谷歌火狐中也有这个方法，只不过是得到换行。

2、nextElementSibling            ：火狐谷歌 IE9-11  （下一个兄弟节点）

兼容写法：b.nextElementSibling || b.nextSibling

    3、previousSibling               ：IE678   （上一个兄弟节点）

在谷歌火狐中也有这个方法，只不过是得到换行。

4、previousElementSibling         ：火狐谷歌 IE9-11 （上一个兄弟节点）

兼容写法：b.previousElementSibling || b.previousSibling 

子节点    （  本节点.***  会得到下面的节点。  ）

firstChild                    ：IE678  （第一个子节点）

在谷歌火狐中也有这个方法，只不过是得到第一个换行。

firstElementChild            ：火狐谷歌 IE9-11  （第一个子节点）

兼容写法：b.firstElementChild || b.firstChild

 

lastChild               ：IE678   （最后一个子节点）

在谷歌火狐中也有这个方法，只不过是得到最后一个换行。

lastElementChild            ：火狐谷歌 IE9-11  （最后一个子节点）

兼容写法：b.lastElementChild || b.lastChild

所有子节点    （这个属性应该是一个    数组）

1. childNodes            ：火狐谷歌 IE9-11  （所有子节点）

w3c承认这个方法为标准方法。（可以获取到换行）（亲儿子）

解决办法：

nodeType  每一个标签都一个这个属性（有个三个值）

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

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

      nodeType  ==  3  是文本节点   了解

2、children

  w3c承认这个方法为非标准方法。（可以获取到注释）（干儿子）

     在IE678中注释会被当做节点。（不是IE678可以不管）

  解决方法：

        注释写到父节点外部。

1. 获取兄弟节点中的某一个。

       某个兄弟节点  =  本节点.parentNode.children[index];（index是索引值）

DOM节点操作  （   ！！！非常重要 ！！！    ）

节点的操作，全部都是

函数或者说是方法！

 节点的创建

Document.createElement(“标签名”);    通过这种方式来创建节点（标签）    

新节点 = document.createElement(“标签名”);

节点的添加

1. appendChild();

appendChild() 方法   : 在节点最后添加一个子节点。

想要添加的父节点. appendChild( 创建出来的节点 )；

2. InsertBefore（变量1，变量2）；

insertBefore(a,b) 方法   : 在指定节点前添加一个子节点。

insertBefore(插入的节点，参照节点)

insertBefore() 方法 ，如果不是在末尾插入节点，而是想放在特定的位置上，用这个方法.

该方法接受2个参数，第一个是要插入的节点，第二个是参照节点。如果第二个参数为null（不是不写），则默认插入到后面

想要添加的父节点. InsertBefore(新节点，参照节点)；

节点的删除

removeChild（）

父节点.removeChild（子节点）；

不知道父级的情况下，可以这么写：

自己节点.parentNode.removeChild(自己节点)；

 节点的复制

cloneNode(参数) ；   booblean类型的参数。

var  newNode = oldNode.cloneNode() ;

 

用于复制节点， 接受一个布尔值参数， true 表示深复制（复制节点及其所有子节点）， false 表示浅复制（复制节点本身，不复制子节点）

 节点的属性

获取：getAttribute(名称)    他的返回值是一个字符串。

设置：setAttribute(名称, 值)

删除：removeAttribute(名称)