DOM之节点基础

最新推荐文章于 2024-01-04 20:20:53 发布

rainkin1993

最新推荐文章于 2024-01-04 20:20:53 发布

阅读量991

点赞数

分类专栏： javascript初学之路文章标签： function 文档 html

本文链接：https://blog.csdn.net/rainkin1993/article/details/7868567

版权

javascript初学之路专栏收录该内容

9 篇文章 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）元素节点

节点的常用属性

（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>

rainkin1993

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM之节点基础

一、节点基础1。获取文本根节点可通过document.documentElement;获得例子1-1：window.onload = function(){vargen = document.documentElement;alert(gen.tagName);} 2、获取body和 head（1）通过 tagName例
复制链接

扫一扫

专栏目录

DOM之 节点基础

DOM之节点基础