继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

节点属性(名称、值、类型)

123_木头人
关注TA
已关注
手记 11
粉丝 3
获赞 167

在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性 :

  1. nodeName : 节点的名称

  2. nodeValue :节点的值

  3. nodeType :节点的类型

一、nodeName 属性: 节点的名称,是只读的。

  1. 元素节点的 nodeName 与标签名相同
  2. 属性节点的 nodeName 是属性的名称
  3. 文本节点的 nodeName 永远是 #text
  4. 文档节点的 nodeName 永远是 #document

二、nodeValue 属性:节点的值

  1. 元素节点的 nodeValue 是 undefined 或 null
  2. 属性节点的 nodeValue 是属性的值
  3. 文本节点的 nodeValue 是文本自身

三、nodeType 属性: 节点的类型,是只读的。以下常用的几种结点类型:

元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9

访问子节点:childNodes,访问选定元素节点下的所有子节点的列表,返回的值可以看作是一个数组,他具有length属性。
语法:elementNode.childNodes
访问子结点的第一和最后项:一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。
语法:node.firstChild
说明:与elementNode.childNodes[0]是同样的效果。

二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。
语法:node.lastChild

访问父节点parentNode:获取指定节点的父节点
语法:elementNode.parentNode
访问祖节点:elementNode.parentNode.parentNode

访问兄弟节点:1. nextSibling 属性可返回某个节点之后紧跟的节点(处于同一树层级中)。
语法:nodeObject.nextSibling
说明:如果无此节点,则该属性返回 null。

  1. previousSibling 属性可返回某个节点之前紧跟的节点(处于同一树层级中)。
    语法:nodeObject.previousSibling

插入节点appendChild():在指定节点的最后一个子节点列表之后添加一个新的子节点。
语法:appendChild(newnode)

插入节点insertBefore():insertBefore() 方法可在已有的子节点前插入一个新的子节点。
语法:insertBefore(newnode,node);

删除节点removeChild():removeChild() 方法从子节点列表中删除某个节点。如删除成功,此方法可返回被删除的节点,如失败,则返回 NULL。
语法:nodeObject.removeChild(node)

替换元素节点replaceChild():replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。
语法:node.replaceChild (newnode,oldnew )

创建元素节点createElement:createElement()方法可创建元素节点。此方法可返回一个 Element 对象。
语法:document.createElement(tagName)

创建文本节点createTextNode:createTextNode() 方法创建新的文本节点,返回新创建的 Text 节点。
语法:document.createTextNode(data)

打开App,阅读手记
2人推荐
发表评论
随时随地看视频慕课网APP