ホームページ > 記事 > ウェブフロントエンド > JavaScript DOM実践教材

JavaScript DOM実践教材

PHP中文网オリジナル: 2016-05-16 19:00:43921ブラウズ

指定されたノードにアクセスします:
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>

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

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>

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

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>

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

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>

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

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>

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

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>

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

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>

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

現在のメソッド:

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

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

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>

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

div はコンテナに相当し、innerText または innerHTML を通じて Web ページのコンテンツが埋め込まれます

上記は JavaScript の実践的な学習教材です DOM_javascript スキル DOM テクノロジー DOM テクノロジーノードの作成ノードの作成削除ノードの削除ノードの置換ノードの置換新しいメッセージが古いメッセージの前に表示されます新しいメッセージが古いメッセージの前に表示されます元のメソッド元のメソッド元のメソッド元のメソッドのコンテンツ、その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注意してください。）！

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：javascript トリム、ltrim、rtrim カスタム関数_javascript スキル次の記事：javascript トリム、ltrim、rtrim カスタム関数_javascript スキル

続きを見る

JavaScript DOM実践教材

関連記事