您的位置：首页 > Web前端 > HTML

DOM对象控制HTML无素——详解2

2016-02-07 19:35 381 查看

节点属性

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

注意：

如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。

<body>
<ul>
<li>javascript</li>
<li>jquery</li>
<li>html5</li>
</ul>
<script>
var childNode = document.getElementsByTagName("ul")[0].childNodes
document.write("ul子节点的长度"+childNode.length+"</br>") //=>7
document.write("ul第一个子节点的类型"+childNode[0].nodeType)//=>3
</script>
</body>

IE:

UL子节点个数:3
节点类型:1

其它浏览器:

UL子节点个数:7
节点类型:3

注意:

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]是同样的效果。

 <body>
<ul>
<li>javascript</li>
<li>jquery</li>
<li>html5</li>
</ul>
<script>
var ul = document.getElementsByTagName("ul")[0]
var firstChild= ul.firstChild.nodeType
varlastChild = ul.lastChild.nodeName
document.write(firstChild+" "+lastChild)  //=>3   ,    #test
</script>
</body>

访问父节点parentNode

获取指定节点的父节点

语法：

elementNode.parentNode

注意:父节点只能有一个。

访问祖节点:

elementNode.parentNode.parentNode

<body>
<ul>
<li>javascript</li>
<li>jquery</li>
<li>html5</li>
</ul>
<script>
var li = document.getElementsByTagName("li")[0]
var parNode = li.parentNode.nodeName
var pparNode = li.parentNode.parentNode.nodeName
document.write(parNode+"</br>") //=>ul
document.write(pparNode)   //=>body
</script>
</body>

访问兄弟节点

1. nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。

语法：

nodeObject.nextSibling

说明：如果无此节点，则该属性返回 null。

2. previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。

语法：

nodeObject.previousSibling

说明：如果无此节点，则该属性返回 null。

注意: 两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而其它浏览器不会忽略。

解决问题方法:

判断节点nodeType是否为1, 如是为元素节点，跳过。

<body>
<ul>
<li>javascript</li>
<li>jquery</li>
<li>html5</li>
</ul>
<script>
var li = document.getElementsByTagName("li")[0]
var next = li.nextSibling
if(next.nodeType != 1){
next = next.nextSibling
}
document.write(next.innerHTML) //=>jquery

</script>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航