首页 > 文章 > web前端 > javascript DOM实用学习资料

javascript DOM实用学习资料

PHP中文网原创: 2016-05-16 19:00:43922浏览

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

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

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：javascript的trim,ltrim,rtrim自定义函数_javascript技巧下一篇：javascript各种复制代码收集_javascript技巧

查看更多

javascript DOM实用学习资料

相关文章