js+DOM创建和操作节点

最新推荐文章于 2022-12-21 17:36:19 发布

long316

最新推荐文章于 2022-12-21 17:36:19 发布

阅读量113

点赞数

文章标签： HTML 浏览器

本文链接：https://blog.csdn.net/long316/article/details/83942880

版权

obj.appendChild(newe) 将子节点添加父节点的末尾。

obj：要添加的节点的父元素引用；newe：要添加的新节点。

注意：本人发现，在添加子节点的时候不能对其父节点进行引用，如果引用其父节点，就行造成溢出（好像是用这个词吧）现象，而导致浏览器崩溃。

obj.cloneNode(boolen) 得到当前节点的副本

obj：当前节点的引用； boolen：布尔值，true：包括当前节点的子节点；false：不包括。返回值为对当前节点的引用.

obj.hasChildNodes() 检测当前节点时否有子节点。返回值为布尔值：true表示有，false表示没有。

obj：要进行检测的节点。其实有时也可以用 childNodes.length 属性进行检测，只是此属性返回值为节点数量。

obj.parentNode.insertBefore(newe.obj) 在当前节点之前插入一个新节点。

obj：当前节点的引用；ocument.getElementById("tdiv").childNodes(2) 可提供一个字节点位置变量，就可随意放在任何位置。

parentNode：对当前节点的父节点的引用，因为此方法是在当前节点之前插入一个新节点，就等于在其父节点下插一个字节点，所以要对其父进行引用，我们不需要知道其父节点的信息，只需要用到parentNode属性。

newe：要插入的新节点。

obj.parentNode.removeChild(obj) 删除一个子节点

obj.parentNode：对要删除的子节点的父节点的引用，其原理同”obj.parentNode.insertBefore(newe.obj)“类似。

obj：要删除的子节点。

obj.parentNode.replaceChild(newe,obj) 用新节点替换旧节点

obj.parentNode：对要被替换掉的子节点的父节点的引用，其原理同上。

newe：用于替换旧节点的新节点。

obj：被替换掉的旧节点。

1.创建节点并添加内容:使用的方法:createElement和createTextNode

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>HTML DOM</title>
<script type=text/javascript>
function Message()
{
var op=document.createElement("p");
var oText=document.createTextNode("hello world!");
op.appendChild(oText);
document.body.appendChild(op);
}
</script>
</head>
<body οnlοad="Message();">
</body>
</html>

2,删除节点方法:getElementsByTagName和removeChild

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>HTML DOM</title>
<script type=text/javascript>
function removeMessage()
{
var op=document.body.getElementsByTagName("p")[0];
op.parentNode.removeChild(op);
}
</script>
</head>
<body οnlοad="removeMessage();">
<p>hello world!</p>
</body>
</html>

3.替换节点方法replace(new,old)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>HTML DOM</title>
<script type=text/javascript>
function replaceMessage()
{
var oNewp=document.createElement("p");
var oText=document.createTextNode("World Hello");
oNewp.appendChild(oText);
var oOldp=document.body.getElementsByTagName("p")[0];
oOldp.parentNode.replaceChild(oNewp,oOldp);
}
</script>
</head>
<body οnlοad="replaceMessage();">
<p>hello world!</p>
</body>
</html>

4.插入新消息 insertBefore(new,old)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>HTML DOM</title>
<script type=text/javascript>
function replaceMessage()
{
var oNewp=document.createElement("p");
var oText=document.createTextNode("World Hello");
oNewp.appendChild(oText);
var oOldp=document.body.getElementsByTagName("p")[0];
document.body.insertBefore(oNewp,oOldp);
}
</script>
</head>
<body οnlοad="replaceMessage();">
<p>hello world!</p>
</body>
</html>

5,文档碎片

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>HTML DOM</title>
<script type=text/javascript>
/****************
* 当向document中添加大量的节点时,如果逐个添加将会十分缓慢,这时可以使用文档碎片一次性添加到document中
* 方法:createDocumentFragment()
********************************************/
function replaceMessage()
{
var arrText=["first","second","third","fourth","fifth","sixth","seventh","eighth","ninth","tenth"];
var oFragment=document.createDocumentFragment();//文档碎片
for(var i=0;i<arrText.length;i++)
{
var op=document.createElement("p");
var oText=document.createTextNode(arrText[i]);
op.appendChild(oText);
oFragment.appendChild(op);
}
document.body.appendChild(oFragment);
}
</script>
</head>
<body οnlοad="replaceMessage();">
<p>hello world!</p>
</body>
</html>

6,操作document元素属性

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>HTML DOM</title>
<script type=text/javascript>
function Load_message()
{
var oimg=document.getElementById("a");
alert(oimg.getAttribute("border"));
oimg.setAttribute("alt","DOM Test");
}
</script>
</head>
<body οnlοad="Load_message();">
<img border="0" width="100" height="150" id="a"/>
</body>
</html>

long316

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js+DOM创建和操作节点

obj.appendChild(newe) 将子节点添加父节点的末尾。obj：要添加的节点的父元素引用；newe：要添加的新节点。注意：本人发现，在添加子节点的时候不能对其父节点进行引用，如果引用其父节点，就行造成溢出（好像是用这个词吧）现象，而导致浏览器崩溃。obj.cloneNode(boolen) 得到当前节点的副本obj：当前节点的引用； boolen...
复制链接

扫一扫