手记

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

课程名称:JavaScript进阶篇

课程章节: DOM对象,控制HTML元素

主讲老师:慕课官方号

课程内容:

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

课程收获:

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

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

节点的值有元素节点的 nodeValueundefinednull,文本节点的 nodeValue 是文本自身,属性节点的 nodeValue 是属性的值。

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

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

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

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

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

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

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

1人推荐
随时随地看视频
慕课网APP