亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

【學習打卡】第12天 子節點,父節點以及兄弟節點

標簽:
JavaScript

课程名称: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人點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消