js笔记·····DOM(document object model)

   DOM

一 什么是DOM?

DOM(document object model)文档对象模型。HTML页面在浏览器上的实现。

二 DOM的作用？

DOM是浏览器提供给编程语言的一个操作页面文档的接口。通过这个接口，我们就可以对页面中内容（元素、属性、脚本）进行任意操作（如改变样式、控制它的位置、添加相应动画等等）。DOM建立了页面文档和编程语言的桥梁。

三 DOM的规范

DOM0  DOM1   DOM2   DOM3

四 DOM的组成

 DOM是由节点Node组成的。相当于js中的对象Object。也就是说，页面中的内容是由各种类型的node节点组成的。如元素节点、属性节点、文本节点、文档节点、注释节点、脚本节点，一共有12种类型的节点，但我们只需要掌握4种就可以了，因为我们通过编程语言对页面进行的操作主要是对这四种类型的节点进行操作。

DOM是有各种类型的节点组成的。

五 节点分类

我们要学四种类型的节点

1元素节点  元素节点就是页面中的 HTML标签

2 属性节点  就是页面中标签上的属性

3 文本类型  标签中的文本或换行符等

4 文档节点  就是 document

我们从三个方面比较以上四种类型的节点

           节点类型        节点名称         节点值

元素节点    1              大写的标签名       null

属性节点    2              小写的属性名       属性值

文本节点    3              #text               包含的文本

文档节点    9           #document          null

 

六 什么是节点关系？

页面中任意内容都是一个节点。

节点关系就是节点和节点之间的关系。

找到节点数中的任意一个节点，就一定能找到当前文档中的其他节点。

以下节点关系属性可以帮我我们寻找节点

七 节点关系属性

1 找儿子的节点属性

  childNodes   找当前节点的所有的子节点（元素类型的文本类型的。。。。）

2 找元素类型的子节点

  children  

3 找第一个孩子

  firstChild

4 找第一个元素类型的孩子

  firstElementChild

5 找最后一个孩子

  lastChild

6 找最后一个元素类型的孩子

  lastElementChild

7 查看孩子的个数

  childNodes.length

8 查看元素类型孩子的个数

  childElementCount

9 找父节点

 tm.parentNode

10 找元素类型的节点

 tm.parentElement

11 找下面的兄弟节点

 tm.nextSibling

12 找下面的元素类型的兄弟节点

tm.nextElementSibling)

13 找上面的兄弟节点

 tm.previousSibling

14 找上面的元素类型的兄弟节点

 tm.previousElementSibling

 

 

八 节点相关方法

1 跟元素类型的节点相关的方法

1）  创建元素节点

     document.createElement(‘要创建的节点名称’)

2）跟元素类型的节点相关的关系方法

   ①在父元素的最后一个子元素后添加子元素

   父元素.appendChild(要添加的子元素)

   ②在父元素指定位置的子元素前添加子元素

   父元素.insertBefore(要添加的子元素,要添加的位置)

   ③替换掉父元素指定位置的子元素

   父元素.replaceChild(替换成的元素,被替换掉的元素)

   ④clone一个元素

   var 得到克隆元素的副本 =被克隆的元素.cloneNode()

   如果克隆时没有加true,那只能clone被clone元素最外层的节点；如果添加true,不光克隆当前节点还克隆所有的子节点。

   var 得到克隆元素的副本 =被克隆的元素.cloneNode(true);

2  属性类型的节点

  1） 创建属性类型的节点

   var 属性节点 = document.createAttribute(‘节点名’)

   设置节点的值

   属性节点.value = ‘要设置的节点值’

  2）元素属性的添加和修改

    将属性节点添加给元素，给元素添加属性

方法一  元素节点.attributes.setNamedItem(刚创建的属性节点);

方法二  元素节点.setAttribute(属性名,属性值)； 万能给元素加属性的方法

方法三  如果添加的是class属性，可以通过

        元素节点.className = ‘类名’;

  3）元素的属性的获取

     获取元素节点的某个属性的属性值

     获取属性  这是获取后的结果 href=”http://www.baidu.com”

 var 要找的属性节点 = 元素节点.attributes.getNamedItem(要获取的属性名)；

 获取属性节点的值

 var 要找的属性节点值 = 元素节点.attributes.getNamedItem(要获取的属性名).value；

 更好的方法

 方法二  元素节点.getAttribute(属性名);

 方法三  获取class属性  元素节点.className

   4）元素节点属性的删除

      方法一元素节点.attributes.removeNamedItem(要删除的属性名)

      方法二元素节点.removeAttrie(属性名)；

      方法三删除class属性   元素节点.className =‘’;

 总结 属性节点的增删改查最好用的方法

     增改  元素节点.setAttribute(属性名,属性值);

     查    元素节点.getAttribute(属性名)

     删    元素节点.removeAttribute(属性名)

 

 

 3 文本节点

   1）创建文本节点

     var 文本节点 = document.createTextNode(‘节点内容’);

   2）给元素添加本文节点

     方法1元素节点.appendChild(文本节点)

     方法2元素节点.innerHTML =‘要添加的内容’;

     方法3元素节点.innerText =‘要添加的内容’;

      通过innerHTML和innerText的方式添加文本有什么区别？

      如果是获取文本，两者是一样的。但如果是设置文本，innerHTML的方式设置的文本，如果文本中含html标签，浏览器会将这些标签解析；而innerText这种设置方式，会将内容作为纯文本对待，其中的html标签不会解析。