js操作节点
js操作节点（添加、删除、更改属性）
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
onload="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
onload="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
onload="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
onload="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
onload="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
onload="Load_message();">
<img border="0" width="100"
height="150" id="a"/>
</body>
</html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
