一、节点基础
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)元素节点
节点的常用属性
(1)firstChild 元素节点的第一个子节点
lastChild 元素节点的最后一个节点
例子3-1
<body>
<script>
window.οnlοad= 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>
(2)nodeType 节点的类型,元素节点的值为1 文本节点值为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.οnlοad= 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.οnlοad= 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的结果
(3)nextSibling 下一个兄弟节点
previousSibling 上一个兄弟节点
例子3-3:
<script>
window.οnlοad= function (){
var p =document.documentElement.firstChild;//HTML节点
alert(p.nextSibling);//html节点的下一个兄弟节点 就是 head节点
}
</script>
(4)childNodes 返回子节点列表 数组的形式
nodeName 节点的名称 元素节点返回标签名 文本节点返回 #text
例子3-4:
<script>
window.οnlοad= 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>