removeChild,replaceChild,insertBefore的学习
removeChild,replaceChild,insertBefore,innerText,innerHTML,outerText,outerHTML学习
今天学习一下javascript，对节点操作进行代码练习，我以前看过，就是很简单的看看，没有认真的学习，今天是认真的学习了一下。
removeChild移除节点内容
replaceChild替代节点内容
insertBefore在某个节点前插入一个节点
innerText,innerHTML,outerText,outerHTML这些以前就比较熟悉了！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript">
function deleteHelloWorld(){
var helloworld=(document.body.getElementsByTagName("p"))[0];
document.body.removeChild(helloworld);
}
function deleteFirstLine(){
var firstLine=document.getElementById("myHeader");
document.body.removeChild(firstLine);
}
function replaceMessage(){
var newFirstLine=document.createElement("p");
var newFirstLineText=document.createTextNode("New First Line!");
newFirstLine.appendChild(newFirstLineText);
var oldNode=document.getElementById("myHeader");
oldNode.parentNode.replaceChild(newFirstLine,oldNode);
}
function insertBeforeMessage(){
var insertBefore=document.createElement("p");
var insertBeforeText=document.createTextNode("a text");
insertBefore.appendChild(insertBeforeText);
var oldNode=document.getElementById("myHeader");
oldNode.parentNode.insertBefore(insertBefore,oldNode);
}
function intertextStuff(){
var innerLine1=document.getElementById("innerLine1");
innerLine1.innerText="new text of innerLine1";
var innerLine2=document.getElementById("innerLine2");
innerLine2.innerHTML="<strong>New text of innerLine2</strong>";
//wrong: innerLine2.innerHTML="<h1>New text of innerLine2</h1>";
}
function outertextStuff(){
var outerLine1=document.getElementById("outerLine1");
outerLine1.outerText="new text of outerLine1";
var outerLine2=document.getElementById("outerLine2");
outerLine2.outerHTML="<h1>New text of outerLine2</h1>";
}
</script>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<h1 id="myHeader">First Line</h1>
<a href="javascript:deleteHelloWorld()"><big>delete "Hello World"</big></a>
<br>
<a href="javascript:deleteFirstLine()"><big>delete "First Line"</big></a>
<br>
<a href="javascript:replaceMessage()"><big>Replace "First Line" with "New First line"</big></a>
<br>
<a href="javascript:insertBeforeMessage()"><big>Insert "a text" before "First line"</big></a>
<script type="text/javascript">
var helloWorld=document.createElement("p");
var helloWorldText=document.createTextNode("Hello World");
helloWorld.appendChild(helloWorldText);
document.body.appendChild(helloWorld);
//var docBody=(document.getElementsByTagName("body"))[0]
//docBody.appendChild(helloWorld);
//insert a few nodes at a time
var oFragment=document.createDocumentFragment(); //创建文档片段对象
for(var i=0;i<10;i++){
var oP=document.createElement("p");
var oText=document.createTextNode(i);
oP.appendChild(oText);
oFragment.appendChild(oP);
}
document.body.appendChild(oFragment);
//how many properties are available?
var props=new Array();
for(var property in window.document){
props.push(property);
}
for(i=0;i<props.length;i++){
document.write(props[i]+"/");
if(i>0 && i%6==0){
document.write("<br>");
}
}
</script>
<br>
<p id="innerLine1">InnerLine1</p>
<p id="innerLine2">InnerLine2</p>
<h4 id="outerLine1">outerLine1</h4>
<h4 id="outerLine2">outerLine2</h4>
<a href="javascript:intertextStuff()"><big>InnerLine</big></a>
<a href="javascript:outertextStuff()"><big>OuterLine</big></a>
</BODY>
</HTML>