DOM节点属性

原文:https://blog.csdn.net/yiren_99/article/details/47843879 建议阅读原文

节点属性

在文档对象模型 (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

例子:获取所有li标签,并输出节点的名称、节点的值、节点的类型

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>节点属性</title>
</head>
<body>
 	 <ul>
     	<li>javascript</li>
     	<li>HTML/CSS</li>
    	<li>jQuery</li>     
	 </ul>
	 <script type="text/javascript">
	     var li=document.getElementsByTagName("li");
	     for(var i=0;i<li.length;i++){
	         document.write("节点名称:"+li[i].nodeName+" 节点属性:"+li[i].nodeValue+"节点类型:"+li[i].nodeType+"<br/>");
	         }
	 </script>
</body>
</html>

访问子结点childNodes

访问选定元素节点下的所有子节点的列表,返回的值可以看作是一个数组,他具有length属性。
语法: elementNode.childNodes
注意:

  1. IE全系列、firefox、chrome、opera、safari兼容问题
  2. 节点之间的空白符,在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]是同样的效果,用lastElementChild的定位更准确

lastObj.lastElementChild.value="确定";//修改最后一子节点的value值

访问父节点parentNode

获取指定节点的父节点
语法: elementNode.parentNode
注意: 父节点只有一个

document.getElementById("Table1").deleteRow(s.parentNode.parentNode.rowIndex);//访问点击节点父节点的父节点的索引值

访问兄弟节点

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值