Home >Web Front-end >JS Tutorial >javascript DOM practical learning materials

javascript DOM practical learning materials

PHP中文网Original: 2016-05-16 19:00:43953browse

Access the specified node:
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():

Original method:

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

Current method:

 
<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 is equivalent to a container, in which webpage content is embedded through innerText or innerHTML

The above are practical learning materials for javascript DOM_javascript skills DOM technology DOM technology Create node Create node Delete node Delete node Replace node Replace node New message appears before the old message New message appears before the old message Original method Original method Original method Original method content, for more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：javascript trim, ltrim, rtrim custom functions_javascript skillsNext article：javascript trim, ltrim, rtrim custom functions_javascript skills

See more

javascript DOM practical learning materials

Related articles