DOM之 节点基础

长平狐 发布于 2012/11/12 11:45
阅读 80
收藏 0

一、节点基础

1。获取文本根节点

可通过document.documentElement;获得

 例子1-1:

window.onload = function(){
vargen = document.documentElement;
alert(gen.tagName);
}
 

2、获取body head

1)通过 tagName

例子2-1:

window.onload = function(){
var h =document.getElementsByTagName('head');
var b =document.getElementsByTagName('body');
alert(h[0].tagName);//返回HEAD
alert(b[0].tagName);//BODY
 
}

2)获取body可直接获得(注意head不行)

上面等价于 var

例子2-2:

window.onload = function(){
vargen = document.head;
alert(gen.tagName);
}
 

3、常用的节点类型

1)文本节点(之前说过文本也是一个节点)

2)元素节点

 

节点的常用属性

1firstChild 元素节点的第一个子节点

lastChild 元素节点的最后一个节点

例子3-1

<body>
<script>
window.onload= function (){
var p =document.getElementsByTagName('p')[0];
alert(p.firstChild);//指向的就是 I am rainkin 这个文本节点
alert(p.lastChild);//指向的是strong这个元素节点
}
</script>
<p>iam rainkin<strong>!!!</strong></p>
</body>

 

2nodeType 节点的类型,元素节点的值为文本节点值为3

nodeValue  节点的内容 元素节点 为空   文本节点就是文本内容 ,即使内容包含元素

 

例子3-2

<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
</head>
 
<body>
<script>
window.onload= function (){
var p =document.getElementsByTagName('p')[0];
alert(p.firstChild.nodeType);//3
alert(p.lastChild.nodeType);//1
alert(p.firstChild.nodeValue);//返回iam rainkin
alert(p.lastChild.nodeValue);//返回null
p.firstChild.nodeValue= 'i change here';
}
</script>
<p>iam rainkin<strong>!!!</strong></p>
</body>
</html>

 

注意:也可以通过innerHTML来改变内容(只能作用于元素节点)

<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
</head>
 
<body>
<script>
window.onload= function (){
var p =document.getElementsByTagName('p')[0];
p.firstChild.nodeValue= 'i change here<strong>!!!<strong>';
p.innerHTML = 'i changehere<strong>!!!<strong>';//如果作用于文本节点会出错  注意这里是元素节点
}
</script>
<p>iam rainkin<strong>!!!</strong></p>
</body>
</html>


 

nodeValue的结果


innerHTNL的结果

 

3nextSibling 下一个兄弟节点

   previousSibling 上一个兄弟节点

例子3-3:

<script>
window.onload= function (){
var p =document.documentElement.firstChild;//HTML节点
alert(p.nextSibling);//html节点的下一个兄弟节点 就是 head节点
}
</script>


 

4childNodes 返回子节点列表  数组的形式

  nodeName        节点的名称  元素节点返回标签名 文本节点返回 #text

例子3-4:

<script>
window.onload= function (){
varp = document.childNodes;
alert(p[1].tagName);//返回HTML
 
}
</script>


 

4、注意空格可会被当成一个文本节点

例子4-1:

<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload =function (){
varp = document.getElementsByTagName('body')[0];
alert(p.childNodes.length)
}
</script>
 
</head>
 
<body>
<p>i am rainkin<strong>!!!</strong></p>//因为p元素的前后都有一个空格
</body>
</html>


 

可通过一个函数解决这个问题

 例子4-2:

<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload =function (){
functiona(nodes)
{
vartmp = [];
for(vari = 0;i < nodes.length;i++)
{
if(nodes[i].nodeType === 3 && /^\s+$/.test(nodes[i].nodeValue))//检测是不是空格节点
continue;
elsetmp.push(nodes[i]);
}
returntmp;
}
varp = document.getElementsByTagName('body')[0].childNodes;
p= a(p);
alert(p.length)
}
</script>
 
</head>
 
<body>
<p>i amrainkin<strong>!!!</strong></p>
</body>
</html>



原文链接:http://blog.csdn.net/rainkin1993/article/details/7868567
加载中
返回顶部
顶部