JavaScript学习笔记——DOM元素节点的获取

ES5之前的节点获取

var div1 = document.getElementById("box1"); 
//方式一：通过 id 获取 一个 元素节点（为什么是一个呢？因为 id 是唯一的）
​
var arr1 = document.getElementsByTagName("div"); 
//方式二：通过 标签名 获取 元素节点数组，所以有s
​
var arr2 = document.getElementsByClassName("box2"); 
//方式三：通过 类名 获取 元素节点数组，所以有s

注意：

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

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

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

ES6之后的节点获取

var div1 = document.querySelector("#abc .cba");
//可以像写css选择器一样获取节点 
//返回最先匹配到的第一个对象

var div1 = document.querySelectorAll("#abc .cba");
//返回所有匹配到的元素对象

	var a = document.querySelector("#abc .cba");
	var b = document.querySelectorAll("#abc .cba");
	console.log(a);
    console.log(b);

DOM访问关系的获取

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

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

获取父节点

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

    节点.parentNode

获取兄弟节点

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

nextSibling：

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

nextElementSibling：

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

总结：

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

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

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

previousSibling：

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

previousElementSibling：

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

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

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

补充

获得任意一个兄弟节点：

	节点自己.parentNode.children[index];

获取单个的子节点

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

firstChild：

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

firstElementChild：

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

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

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

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

lastChild：

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

lastElementChild：

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

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

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

获取所有的子节点

childNodes

标准属性。返回的是指定元素的子节点的集合（包括元素节点、所有属性、文本节点）

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

子节点数组 = 父节点.childNodes;

children

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

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

子节点数组 = 父节点.children;

例如:父节点.children[n]; //n为索引值