javascript基础从小白到高手系列一百零八：nodeName 与nodeValue

nodeName 与nodeValue 保存着有关节点的信息。这两个属性的值完全取决于节点类型。在使用
这两个属性前，最好先检测节点类型，如下所示：
if (someNode.nodeType == 1){
value = someNode.nodeName; // 会显示元素的标签名
}
在这个例子中，先检查了节点是不是元素。如果是，则将其nodeName 的值赋给一个变量。对元素
而言，nodeName 始终等于元素的标签名，而nodeValue 则始终为null。
节点关系
文档中的所有节点都与其他节点有关系。这些关系可以形容为家族关系，相当于把文档树比作家谱。
在HTML 中，元素是元素的子元素，而元素则是元素的父元素。
元素是元素的同胞元素，因为它们有共同的父元素。
每个节点都有一个childNodes 属性，其中包含一个NodeList 的实例。NodeList 是一个类数组
对象，用于存储可以按位置存取的有序节点。注意，NodeList 并不是Array 的实例，但可以使用中括
号访问它的值，而且它也有length 属性。NodeList 对象独特的地方在于，它其实是一个对DOM结
构的查询，因此DOM 结构的变化会自动地在NodeList 中反映出来。我们通常说NodeList 是实时的
活动对象，而不是第一次访问时所获得内容的快照。
下面的例子展示了如何使用中括号或使用item()方法访问NodeList 中的元素：
let firstChild = someNode.childNodes[0];
let secondChild = someNode.childNodes.item(1);
let count = someNode.childNodes.length;
无论是使用中括号还是item()方法都是可以的，但多数开发者倾向于使用中括号，因为它是一个
类数组对象。注意，length 属性表示那一时刻NodeList 中节点的数量。使用Array.prototype.
slice()可以像前面介绍arguments 时一样把NodeList 对象转换为数组。比如：
let arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0);
当然，使用ES6 的Array.from()静态方法，可以替换这种笨拙的方式：
let arrayOfNodes = Array.from(someNode.childNodes);
每个节点都有一个parentNode 属性，指向其DOM 树中的父元素。childNodes 中的所有节点都
有同一个父元素，因此它们的parentNode 属性都指向同一个节点。此外，childNodes 列表中的每个
节点都是同一列表中其他节点的同胞节点。而使用previousSibling 和nextSibling 可以在这个列
表的节点间导航。这个列表中第一个节点的previousSibling 属性是null，最后一个节点的
nextSibling 属性也是null，如下所示：
if (someNode.nextSibling === null){
alert(“Last node in the parent’s childNodes list.”);
} else if (someNode.previousSibling === null){
alert(“First node in the parent’s childNodes list.”);
}
注意，如果childNodes 中只有一个节点，则它的previousSibling 和nextSibling 属性都是
null。
父节点和它的第一个及最后一个子节点也有专门属性：firstChild 和lastChild 分别指向
childNodes 中的第一个和最后一个子节点。someNode.firstChild 的值始终等于someNode.
childNodes[0]，而someNode.lastChild 的值始终等于someNode.childNodes[someNode.
childNodes.length-1]。如果只有一个子节点，则firstChild 和lastChild 指向同一个节点。如
果没有子节点，则firstChild 和lastChild 都是null。上述这些节点之间的关系为在文档树的节
点之间导航提供了方便。
有了这些关系，childNodes 属性的作用远远不止是必备属性那么简单了。这是因为利用这些关系
指针，几乎可以访问到文档树中的任何节点，而这种便利性是childNodes 的最大亮点。还有一个便利
的方法是hasChildNodes()，这个方法如果返回true 则说明节点有一个或多个子节点。相比查询
childNodes 的length 属性，这个方法无疑更方便。
最后还有一个所有节点都共享的关系。ownerDocument 属性是一个指向代表整个文档的文档节点
的指针。所有节点都被创建它们（或自己所在）的文档所拥有，因为一个节点不可能同时存在于两个或
者多个文档中。这个属性为迅速访问文档节点提供了便利，因为无需在文档结构中逐层上溯了。