javascript DOM实用学习资料-js-Tutorial-php.cn

访问指定节点：
getElementsByName():

 
<html> 
<head> 
<title>DOM技术</title> 
</head> 
<body> 
<form method="post" action="document.cgi"> 
<fieldset> 
<legend>选择你喜欢的颜色！</legend> 
<input type="radio" name="color" value="red"/>red
 
<input type="radio" name="color" value="green"/>green
 
<input type="radio" name="color" value="blue"/>blue
 
</fieldset> 
<input type="submit" value="submit"> 
</form> 
<script language="javascript"> 
var oRadios=document.getElementsByName("color"); 
alert(oRadios[0].getAttribute("value")); 
</script> 
</body> 
</html>

Nach dem Login kopieren

 
<html> 
<head> 
<title>DOM技术</title> 
</head> 
<body> 
<form method="post" action="document.cgi"> 
<fieldset> 
<legend>选择你喜欢的颜色！</legend> 
<input type="radio" name="color" value="red"/>red
 
<input type="radio" name="color" value="green"/>green
 
<input type="radio" name="color" value="blue"/>blue
 
</fieldset> 
<input type="submit" value="submit"> 
</form> 
<script language="javascript"> 
var oRadios=document.getElementsByName("color"); 
alert(oRadios[0].getAttribute("value")); 
</script> 
</body> 
</html>

Nach dem Login kopieren

getElementById():

 
<html> 
<head> 
<title> 
</title> 
<script type="text/javascript"> 
function getValue(){ 
var odiv1=document.getElementById("div1"); 
odiv1.innerText="hello!"; 
} 
</script> 
</head> 
<body onload="getValue()"> 
<div id="div1"></div> 
</body> 
</html>

Nach dem Login kopieren

 
<html> 
<head> 
<title> 
</title> 
<script type="text/javascript"> 
function getValue(){ 
    var odiv1=document.getElementById("div1"); 
    odiv1.innerText="hello!"; 
} 
</script> 
</head> 
<body onload="getValue()"> 
<div id="div1"></div> 
</body> 
</html>

Nach dem Login kopieren

createElement():

 
<html> 
<head> 
<title>创建节点</title> 
</head> 
<body onload="createM()"> 
</body> 
</html> 
<script language="javascript"> 
function createM(){ 
var op=document.createElement("p"); 
var otext=document.createTextNode("你好！"); 
op.appendChild(otext); 
document.body.appendChild(op); 
} 
</script>

Nach dem Login kopieren

 
<html> 
<head> 
<title>创建节点</title> 
</head> 
<body onload="createM()"> 
</body> 
</html> 
<script language="javascript"> 
function createM(){ 
var op=document.createElement("p"); 
var otext=document.createTextNode("你好！"); 
op.appendChild(otext); 
document.body.appendChild(op); 
} 
</script>

Nach dem Login kopieren

removeChild():

 
<html> 
<head> 
<title>删除节点</title> 
<script language="javascript"> 
function removeM(){ 
var op=document.body.getElementsByTagName("p")[0]; 
document.body.removeChild(op); 
} 
</script> 
</head> 
<body onload="removeM()"> 
<p>你好！</p> 
<p>hello world！</p> 
</body> 
</html>

Nach dem Login kopieren

 
<html> 
<head> 
<title>删除节点</title> 
<script language="javascript"> 
function removeM(){ 
var op=document.body.getElementsByTagName("p")[0]; 
document.body.removeChild(op); 
} 
</script> 
</head> 
<body onload="removeM()"> 
<p>你好！</p> 
<p>hello world！</p> 
</body> 
</html>

Nach dem Login kopieren

replaceChild():

 
<html> 
<head> 
<title>替换节点</title> 
<script language="javascript"> 
function appendM(){ 
var newP=document.createElement("p"); 
var newText=document.createTextNode("hello sansan!"); 
newP.appendChild(newText); 
document.body.appendChild(newP); 
} 
</script> 
</head> 
<body onload="appendM()"> 
<p>你好！</p> 
<p>hello world！</p> 
</body> 
</html>

Nach dem Login kopieren

 
<html> 
<head> 
<title>替换节点</title> 
<script language="javascript"> 
function appendM(){ 
var newP=document.createElement("p"); 
var newText=document.createTextNode("hello sansan!"); 
newP.appendChild(newText); 
document.body.appendChild(newP); 
} 
</script> 
</head> 
<body onload="appendM()"> 
<p>你好！</p> 
<p>hello world！</p> 
</body> 
</html>

Nach dem Login kopieren

insertBefore():

 
<html> 
<head> 
<title>新消息出现在旧消息之前</title> 
<script language="javascript"> 
function appendM(){ 
var newP=document.createElement("p"); 
var newText=document.createTextNode("hello sansan!"); 
newP.appendChild(newText); 
var oldP=document.getElementsByTagName("p")[0]; 
document.body.insertBefore(newP,oldP); 
} 
</script> 
</head> 
<body onload="appendM()"> 
<p>你好！</p> 
<p>hello world！</p> 
</body> 
</html>

Nach dem Login kopieren

 
<html> 
<head> 
<title>新消息出现在旧消息之前</title> 
<script language="javascript"> 
function appendM(){ 
var newP=document.createElement("p"); 
var newText=document.createTextNode("hello sansan!"); 
newP.appendChild(newText); 
var oldP=document.getElementsByTagName("p")[0]; 
document.body.insertBefore(newP,oldP); 
} 
</script> 
</head> 
<body onload="appendM()"> 
<p>你好！</p> 
<p>hello world！</p> 
</body> 
</html>

Nach dem Login kopieren

createDocumentFragment():

原方法：

 
<html> 
<head> 
<title>原方法</title> 
<script language="javascript"> 
function oldM(){ 
var arrText=["first","second","third","fourth","fifth", 
"sixth","seventh","eighth","ninth","tenth"]; 
for(var i=0;i<arrText.length;i++){ 
var op=document.createElement("p"); 
var otext=document.createTextNode(arrText[i]); 
op.appendChild(otext); 
document.body.appendChild(op); 
} 
} 
</script> 
</head> 
<body onload="oldM()"> 
</body> 
</html>

Nach dem Login kopieren

 
<html> 
<head> 
<title>原方法</title> 
<script language="javascript"> 
function oldM(){ 
var arrText=["first","second","third","fourth","fifth", 
"sixth","seventh","eighth","ninth","tenth"]; 
for(var i=0;i<arrText.length;i++){ 
var op=document.createElement("p"); 
var otext=document.createTextNode(arrText[i]); 
op.appendChild(otext); 
document.body.appendChild(op); 
} 
} 
</script> 
</head> 
<body onload="oldM()"> 
</body> 
</html>

Nach dem Login kopieren

现方法：

 
<html> 
<head> 
<title>原方法</title> 
<script language="javascript"> 
function oldM(){ 
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="oldM()"> 
</body> 
</html>

Nach dem Login kopieren

 
<html> 
<head> 
<title>原方法</title> 
<script language="javascript"> 
function oldM(){ 
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="oldM()"> 
</body> 
</html>

Nach dem Login kopieren

innerText/innerHTML：

 
<html> 
<head> 
<title> 
</title> 
<script type="text/javascript"> 
function getBackgroundColor(){ 
var odiv1=document.getElementById("div1"); 
//odiv1.innerText="<h1>new word </h1>"; 
odiv1.innerHTML="<h1>new word </h1>"; 
} 
</script> 
</head> 
<body> 
<div id="div1"></div> 
<input type="button" value="getValue" onClick="getBackgroundColor()"> 
</body> 
</html>

Nach dem Login kopieren

 
<html> 
<head> 
<title> 
</title> 
<script type="text/javascript"> 
function getBackgroundColor(){ 
var odiv1=document.getElementById("div1"); 
//odiv1.innerText="<h1>new word </h1>"; 
odiv1.innerHTML="<h1>new word </h1>"; 
} 
</script> 
</head> 
<body> 
<div id="div1"></div> 
<input type="button" value="getValue" onClick="getBackgroundColor()"> 
</body> 
</html>

Nach dem Login kopieren

div相当于一个容器，通过innerText或innerHTML向其中嵌入网页内容

以上就是javascript DOM实用学习资料_javascript技巧DOM技术DOM技术创建节点创建节点删除节点删除节点替换节点替换节点新消息出现在旧消息之前新消息出现在旧消息之前原方法原方法原方法原方法的内容，更多相关内容请关注PHP中文网（www.php.cn）！