JavaScript学习-DOM访问关系的获取

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

JS中的父子兄访问关系：

获取父节点：

节点.parentNode
节点.parentElement

获取兄弟节点:

下一个节点 | 下一个元素节点：
1）nextSibling：

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

获取单个的子节点

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

1. lastChild：

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

1)childNodes：标准属性。返回的是指定元素的子节点的集合（包括元素节点、所有属性、文本节点）
2）children：非标准属性。返回的是指定元素的子元素节点的集合。(用的多)
它只返回HTML节点，甚至不返回文本节点。

子节点数组 = 父节点.children;   //获取所有节点。用的最多。
某个子节点=父节点.children[index](从0开始）

综合例子：

           var d1=document.querySelector('.d1');
			console.log([d1]);
			//获取元素的父元素parentNode/parentElement
			console.log(d1.parentNode);
			//获取子元素children(子元素)/childNodes(子节点包含子元素中的子节点)
			console.log(d1.children);
			console.log(d1.childNodes);
			//获取兄弟元素
			var child2=document.querySelector('.d1 h3:nth-child(2)');
			console.log([child2]);
			//获取下一个元素，nextElementSibling
			//获取上一个元素，previousElementSibling
			console.log(child2.previousElementSibling);
			console.log(child2.nextElementSibling);
			
			
			//获取第一个子元素
			var first=d1.firstElementChild;
			console.log(first);
			//获取最后一个子元素
		    var last=d1.lastElementChild;
			console.log(last);
			//获取指定子元素
			console.log(d1.children[2])

结果：