javascriptDOM实用学习资料

来源：动视网责编：小采时间：2020-11-27 20:40:02

javascriptDOM实用学习资料

javascriptDOM实用学习资料:访问指定节点： getElementsByName(): <html> <head> <title>DOM技术</title> </head> <body> <form method="post" action="document.cgi&

推荐度：

点击下载本文 文档为doc格式

导读javascriptDOM实用学习资料:访问指定节点： getElementsByName(): <html> <head> <title>DOM技术</title> </head> <body> <form method="post" action="document.cgi&

访问指定节点：
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向其中嵌入网页内容

javascriptDOM实用学习资料

javascriptDOM实用学习资料:访问指定节点： getElementsByName(): <html> <head> <title>DOM技术</title> </head> <body> <form method="post" action="document.cgi&

推荐度：

点击下载本文 文档为doc格式

标签：内容学习资料

热门焦点

javascriptDOM实用学习资料

javascriptDOM实用学习资料

javascriptDOM实用学习资料

最新推荐

猜你喜欢

热门推荐