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

js的DOM(节点属性)

2015-08-21 22:20 716 查看

节点属性

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

注意：

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

注意:

1. IE全系列、firefox、chrome、opera、safari兼容问题

2. 节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点，所以IE是3，其它浏览器是7

例子：获取子节点并输出相应属性
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<div>javascript<p>javascript</p><div>jQuery</div><h5>PH</h5></div>
<script type="text/javascript">
var div=document.getElementsByTagName("div");
var child=div[0].childNodes
for(var i=0;i<child.length;i++){
document.write(child[i].nodeName+"、"+child[i].nodeType+"、"+child[i].nodeValue+"<br/>");
}

/*节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点，所以IE是3，其它浏览器是7..把空格去掉*/
</script>
</body>
</html>
输出：
javascript
javascript
jQuery
PH
#text、3、javascript
P、1、null
DIV、1、null
H5、1、null


访问子结点的第一和最后项

一、
firstChild
属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。

语法：

node.firstChild

说明：与elementNode.childNodes[0]是同样的效果。

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

语法：

node.lastChild

说明：与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。

注意: 上一节中，我们知道Internet Explorer 会忽略节点之间生成的空白文本节点，而其它浏览器不会。我们可以通过检测节点类型，过滤子节点。

例子：获取div的第一个节点和最后一个节点

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<div id="con"><p>javascript</p><div>jQuery</div><h5>PHP</h>
</div>
<script type="text/javascript">
var x=document.getElementById("con");
document.write(x.firstChild.nodeName+"<br/>");
document.write(x.lastChild.nodeName+"<br/>");

</script>
</body>
</html>
输出结果：
javascript
jQuery
PHP
P
H5

访问父节点parentNode

获取指定节点的父节点

语法：

elementNode.parentNode

注意:父节点只能有一个

注意: 浏览器兼容问题，chrome、firefox等浏览器标签之间的空白也算是一个文本节点。

例子：通过获取的mylist节点，使用访问父节点parentNode，将"HTML/CSS"课程内容输出。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<ul id="con">
<li id="lesson1">javascript
<ul>
<li id="tcon"> 基础语法</li>
<li>流程控制语句</li>
<li>函数</li>
<li>事件</li>
<li>DOM</li>
</ul>
</li>
<li id="lesson2">das</li>
<li id="lesson3">dadf</li>
<li id="lesson4">HTML/CSS
<ul>
<li>文字</li>
<li>段落</li>
<li>表单</li>
<li>表格</li>
</ul>
</li></ul>
<script  type="text/javascript">
var mylist = document.getElementById("tcon");
document.write(mylist.parentNode.parentNode.parentNode.lastChild.innerHTML)
</script>

</body>
</html>
输出
javascript
基础语法
流程控制语句
函数
事件
DOM
das
dadf
HTML/CSS
文字
段落
表单
表格

HTML/CSS

文字
段落
表单
表格

访问兄弟节点

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

语法：

nodeObject.nextSibling

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

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

语法：

nodeObject.previousSibling

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

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

例子：编写get_previousSibling 函数，获得指定节点的上一个节点。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>previousSibling</title>
</head>
<body>
<ul id="u1">
<li id="a">javascript</li>
<li id="b">jquery</li>
<li id="c">html</li>
</ul>
<ul id="u2">
<li id="d">css3</li>
<li id="e">php</li>
<li id="f">java</li>
</ul>
<script type="text/javascript">
function get_previousSibling(n){
var x=n.previousSibling;
while (x && x.nodeType!=1){
x=x.previousSibling;
}
return x;
}

var x=document.getElementsByTagName("li")[5];
document.write(x.nodeName);
document.write(" = ");
document.write(x.innerHTML);

var y=get_previousSibling(x);

if(y!=null){
document.write("<br />previousSibling: ");
document.write(y.nodeName);
document.write(" = ");
document.write(y.innerHTML);
}else{
document.write("<br>这已经是第一个节点");
}

</script>
</body>
</html>
输出：
javascript
jquery
html

css3
php
java

LI = java
previousSibling: LI = php
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航