【学习打卡】第12天 子节点，父节点以及兄弟节点

课程名称：JavaScript进阶篇

课程章节： DOM对象，控制HTML元素

主讲老师：慕课官方号

课程内容：

今天学习的内容包括： 节点的名称(nodeName)、节点的值(nodeValue )、节点的类型(nodeType)，其中子节点使用childNodes，父节点使用parentNode，最后是nextSibling和previousSibling的使用。

课程收获：

在文档对象模型中，每个节点都是一个对象。DOM 节点有三个重要的属性，分别是节点的名称(nodeName)、节点的值(nodeValue )、节点的类型(nodeType)。

节点的名称是只读的。元素节点的 nodeName 与标签名相同，属性节点的 nodeName 是属性的名称，文本节点的 nodeName 永远是#text，文档节点的 nodeName 永远是 #document。

节点的值有元素节点的 nodeValue 是 undefined 或 null，文本节点的 nodeValue 是文本自身，属性节点的 nodeValue 是属性的值。

节点的类型也是之都的。常用的有元素用1表示，属性用2表示，文本用3表示，注释用8表示，文档用9表示。

childNodes表示访问子节点，访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。使用方法elementNode.childNodes，我们需要注意的是如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。这个属性具有兼容性问题，节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点，所以IE是3，其它浏览器是7。

firstChild属性返回childNodes数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。 使用方法node.firstChild与elementNode.childNodes[0]是同样的效果。

lastChild属性返回childNodes数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。使用方法node.lastChild与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。

parentNode用来获取指定节点的父节点，我们需要注意的是父节点只能有一个。

nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中），如果无此节点，则该属性返回 null。previousSibling属性可返回某个节点之前紧跟的节点也是处于同一树层级中。这个也是无节点返回null。我们可以根据nodeType是否为1，判断节点。

今天学习的DOM对象，控制HTML元素的9-7到9-11五个小结，花费了45分钟，学到了节点名称、值以及类型的使用，其中节点类型的值不同，表示的含义也是不同的。childNodes中无论是获取第一个值还是最后一个值，当选定的节点没有子节点都会返回null，parentNode只能有一个父节点。