DOM 介绍

什么时DOM

　　DOM:文档对象模型.DOM为文档提供了结构化表示,并定义了如何通过脚本来范文文档结构.目的起始就是为了能让js操作html元素而指定的一个规范.

　　DOM就是由节点组成的.

解析过程

　　HTML加载完毕,渲染引擎会在内存中吧HTML文档,生成一个DOM树,getElementById时获取DOM中的元素节点,然后操作的时候修改的时该元素的属性.

DOM树(一切都是节点)

DOM的数据结构如下：

　　上图可知,在HTML当中,一切都是节点:(非常重要)

　　　　元素节点:HTML标签.

　　　　文本节点:标签中的文字(比如标签之间的空格.换行)

　　　　属性节点:标签的属性.

　　这个html文档就是一个文档节点,所有的节点都是Object.

DOM可以做什么

　　找对象(元素节点)

　　设置元素的属性

　　设置元素的样式

　　动态创建和删除元素

　　事件的触发相应;事件源,事件,事件的驱动程序

DOM节点的获取

　　DOM节点的获取方式起始就是获取事件源的方式

　　操作元素节点,必须首先找到该节点,有三种方式可以获取DOM节点:

    var div1 = document.getElementById("box1");      //方式一：通过id获取单个标签

    var arr1 = document.getElementsByTagName("div1");     //方式二：通过 标签名 获得 标签数组，所以有s

    var arr2 = document.getElementsByClassName("hehe");  //方式三：通过 类名 获得 标签数组，所以有s

既然方式二、方式三获取的是标签数组，那么习惯性是先遍历之后再使用。

特殊情况：数组中的值只有1个。即便如此，这一个值也是包在数组里的。这个值的获取方式如下：

    document.getElementsByTagName("div1")[0];    //取数组中的第一个元素

    document.getElementsByClassName("hehe")[0];  //取数组中的第一个元素

DOM访问关系的获取

DOM的节点并不是孤立的，因此可以通过DOM节点之间的相对关系对它们进行访问。如下：

节点的访问关系，是以属性的方式存在的。

JS中的父子兄访问关系：

　　这里我们要重点知道parentNode和children这两个属性的用法。下面分别介绍。

获取父节点

　　调用者就是节点,一个节点只有一个父节点,调用方式就是

节点.parenNode

　　(1)nextSibling:

　　　　指定的时下一个节点(包括标签,空文档和换行节点).

- 火狐、谷歌、IE9+版本：都指的是下一个节点（包括标签、空文档和换行节点）。
- IE678版本：指下一个元素节点（标签）。

　　(2) nextElementSibling:

　　　　火狐.谷歌.IE9+版本:都是指下一个元素节点(标签)

　　　　总结:为了获取下一个元素节点我们可以:在IE678中用nextSibling，在火狐谷歌IE9+以后用nextElementSibling，于是，综合这两个属性，可以这样写：

前一个兄弟节点 = 节点.previousElementSibling || 节点.previousSibling

　　(3)补充:获得任意一个兄弟节点

节点自己.parentNode.Children[index]; //随意得到兄弟节点

获取单个的子节点

1、第一个子节点 | 第一个子元素节点：

（1）firstChild：

火狐、谷歌、IE9+版本：都指的是第一个子节点（包括标签、空文档和换行节点）。
IE678版本：指第一个子元素节点（标签）。

（2）firstElementChild：

火狐、谷歌、IE9+版本：都指的是第一个子元素节点（标签）。

总结：为了获取第一个子元素节点，我们可以这样做：在IE678中用firstChild，在火狐谷歌IE9+以后用firstElementChild，于是，综合这两个属性，可以这样写：

 第一个子元素节点 = 节点.firstElementChild || 节点.firstChild

2、最后一个子节点 | 最后一个子元素节点：

（1）lastChild：

火狐、谷歌、IE9+版本：都指的是最后一个子节点（包括标签、空文档和换行节点）。
IE678版本：指最后一个子元素节点（标签）。

（2）lastElementChild：

火狐、谷歌、IE9+版本：都指的是最后一个子元素节点（标签）。

总结：为了获取最后一个子元素节点，我们可以这样做：在IE678中用lastChild，在火狐谷歌IE9+以后用lastElementChild，于是，综合这两个属性，可以这样写：

 最后一个子元素节点 = 节点.lastElementChild || 节点.lastChild

获取所有的子节点

　　(1) childNodes:标准属性.返回的是指元素的子节点的集合,(包括元素节点.所有属性.文本节点).是W3C的亲儿子.

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

用法:

子节点数组 = 父节点.childNode; //获取所有节点

　　(2) children:非标准属性.返回的是只元素的子元素节点的集合

　　　　他只返回HTML节点,甚至不反悔文本节点

　　　　他在IE6/7/8 中包含注释节点(IE678,中,注释节点不要写在前面)

　　虽然不是标准的DOM属性,但它和innerHTML方法一样,得到了几乎所偶浏览器的支持.

　　用法:(用的最多)

子节点数据 = 父节点.children;// 获取所有子节点.用的最多

nodeType

这里讲一下nodeType。

nodeType == 1 表示的是元素节点（标签）。记住：元素就是标签。
nodeType == 2 表示是属性节点了解
nodeType == 3 是文本节点了解

猜你喜欢