DOM获取元素节点 (查)

DOM document对象 link

通过document对象获取元素节点

在网页中浏览器已经为我们提供了document对象
它代表的是整个网页，它是window对象的属性，可直接使用，通过它可以获取网页里任意对象

DOM节点的获取方式其实就是获取事件源的方式。关于事件，上一篇文章中已经讲到了。

想要操作元素节点，必须首先要找到该节点。有几种方式可以获取DOM节点：

//注意：以下方法不止document可以用，通过document获取的节点也可以用的


//方式一：通过 id 获取 一个 元素节点对象（为什么是一个呢？因为 id 是唯一的）
var div1 = document.getElementById("box1"); 

//方式二：通过 标签名 获取 一组 元素节点对象，所以有s
//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到数组对象中
var arr1 = document.getElementsByTagName("div"); 

//方式三：通过 类名 获取 一组 元素节点对象，所以有s（ie8及以下不支持）
//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到数组对象中
var arr2 = document.getElementsByClassName("hehe"); 

//方式四：通过 name属性 获取 一组 元素节点对象，所以有s
//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到数组对象中
var arr3 = document.getElementsByName("gender"); 

//方法五：根据CSS选择器去页面中查询一个元素（很强大）
//如果匹配到的元素有多个，则它会返回查询到的第一个元素
document.querySelector();

//方法六：根据CSS选择器去页面中查询 一组 元素（很强大）
//会将匹配到所有元素封装到一个数组中返回，即使只匹配到一个,也会返回数组
document.querySelectorAll()

// 获取页面中的body元素
document.body;
// 获取页面中html根元素
document.documentElement;

既然方式2，3，4，6获取的是标签数组，那么习惯性是先遍历之后再使用

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

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

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

DOM 元素对象 link

获取元素节点的子节点

前面我们介绍了通过document对象获取元素节点，这里是通过获取到的元素节点查询该元素的后代节点

DOM访问关系的获取

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

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

JS中的父子兄访问关系：

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

获取父节点

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

	节点.parentNode

获取兄弟节点

1、下一个节点 | 下一个元素节点：

（1）nextSibling：

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

• IE678版本：指下一个元素节点（标签）。

（2）nextElementSibling：

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

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

	下一个兄弟节点 = 节点.nextElementSibling || 节点.nextSibling

2、前一个节点 | 前一个元素节点：

（1）previousSibling：

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

• IE678版本：指前一个元素节点（标签）。

（2）previousElementSibling：

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

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

	前一个兄弟节点 = 节点.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的亲儿子

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

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

（2）children：非标准属性。返回的是指定元素的子元素节点的集合。【重要】

• 它只返回HTML节点，甚至不返回文本节点。
• 在IE6/7/8中包含注释节点（在IE678中，注释节点不要写在里面）。

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

用法：（用的最多）

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