search

Home >Web Front-end >JS Tutorial >getElementByID, createElement, appendChild several DHTML elements_javascript skills

getElementByID, createElement, appendChild several DHTML elements_javascript skills

PHP中文网
PHP中文网Original
2016-05-16 19:03:261213browse

Under WEB standards, you can access any tag in

DOCUMENT through getElementById(), getElementsByName(), and getElementsByTagName():

1. getElementById()
getElementById( ) can access a specific element in DOCUMENT. As the name suggests, the element is obtained through the ID, so it can only access the element with the ID set.
For example, there is a p with the ID docid:
99721b9458ba6f79d2fa0a5ec120770994b3e26ee717c64999d7867364b1b4a3
Then you can use getElementById("docid") to get this element. 


<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>ById</title> 
<style type="text/css"> 
<!-- 
#docid{ 
height:400px; 
width:400px; 
background-color:#999;} 
--> 
</style> 
</head> 
<body><p id="docid" name="docname" onClick="bgcolor()"></p> 
</body> 
</html> 
<script language="JavaScript" type="text/JavaScript"> 
<!-- 
function bgcolor(){ 
document.getElementById("docid").style.backgroundColor="#000" 
} 
--> 
</script>

, getElementsByName()
This is to get elements through NAME, but I don’t know if you have noticed, this is GET ELEMENTS, and the plural ELEMENTS means that what is obtained is not An element, why?
Because the ID of each element in DOCUMENT is unique, but the NAME can be repeated. To use an analogy, it's like a person's ID number is unique (theoretically, although there are duplicates in reality), but there are many duplicate names

. If there are more than two tags with the same name in a document, then getElementsByName() can obtain these elements to form an array.

For example, there are two p:
01ada97a3ba40e151b6e1299db92acbe94b3e26ee717c64999d7867364b1b4a3
5d7732e0478b222a2aec4f6cc0ca41da94b3e26ee717c64999d7867364b1b4a3
Then you can use getElementsByName("docname") to get these two p, use getElementsByName("docname")[0] to access the first p, and use getElementsByName


3. getElementsByTagName()
This is to obtain elements through TAGNAME (tag name). Of course, a DOCUMENT will have the same tag, so this method also obtains an array.
The following example has two p. You can use getElementsByTagName("p") to access them. Use getElementsByTagName("p")[0] to access the first p. Use

getElementsByTagName("p ")[1] accesses the second p. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>Byname,tag</title> 
<style type="text/css"> 
<!-- 
#docid1,#docid2{ 
margin:10px; 
height:400px; 
width:400px; 
background-color:#999;} 
--> 
</style> 
</head> 
<body> 
<p name="docname" id="docid1" onClick="bgcolor()"></p> 
<p name="docname" id="docid2" onClick="bgcolor()"></p> 
</body> 
</html> 
<script language="JavaScript" type="text/JavaScript"> 
<!-- 
function bgcolor(){ 
var docnObj=document.getElementsByTagName("p"); 
docnObj[0].style.backgroundColor = "black"; 
docnObj[1].style.backgroundColor = "black"; 
} 
--> 
</script>

To summarize the standard DOM, try to use the standard getElementById() to access a specific element, and use the standard getElementByTagName() to access tags, but IE does not support

getElementsByName(), so avoid using getElementsByName(), but getElementsByName() and the non-standard document.all[] are not useless, they

have their own conveniences , whether to use it depends on what browser the website users use, it is up to you to decide.

GetElementById in Javascript is very commonly used, but in a standard page, an id can only appear once. What should I do if I want to control multiple elements at the same time, such as clicking a link and hiding multiple layers? ? Use class. Of course, the same class can be allowed to appear repeatedly in the page. So is there getElementByClass? No, but it can be solved: 

//Create an array  
var allPageTags = new Array();  
function hidepWithClasses(theClass) { 
//Populate the array with all the page tags 
var allPageTags=document.getElementsByTagName("p"); 
//Cycle through the tags using a for loop 
for (i=0; i//Pick out the tags with our class name 
if (allPageTags[i].className==theClass) { 
//Manipulate this in whatever way you want 
allPageTags[i].style.display=&#39;none&#39;; 
} 
} 
}

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝


Usage of appendChild method

<html> 
<head> 
   <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
   <title>无标题文档</title> 
</head> 
<script language="javascript"> 
//生成与输入内容匹配行 
          function setNames() {             
       completeBody = document.getElementById("complete_body"); 
              var row, cell, txtNode; 
      
                 //var nextNode = names[i].firstChild.data; 
                 row = document.createElement("tr"); 
                 cell = document.createElement("td"); 
                 
                 cell.setAttribute("bgcolor", "#FFFAFA"); 
                 cell.setAttribute("border", "0");                         
                 //txtNode = document.createTextNode(nextNode); 
                 alert("sdf"); 
                 var newText = document.createTextNode("This is the second paragraph."); 
                 //txtNode=document.createElement("p"); 
                 alert("sdf1"); 
                 cell.appendChild(newText); 
                 alert("sdf2"); 
                 row.appendChild(cell); 
                 completeBody.appendChild(row); 
         } 
</script> 
<body> 
<input type="submit" name="sdf" onclick="setNames()"> 
   <table id="complete_table" bgcolor="#FFFAFA" border="0" 
    cellspacing="0" cellpadding="0" /> 
    <tbody id="complete_body"></tbody> 
   </table> 
</body> 
</html>

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ============
createElement 

<html>  
<head>  
<title>createElement</title>  
<script language="javascript">  
<!--  
var i=0 ;  
function addInput() {  
var o = document.createElement("input");  
o.type = "button" ;  
o.value = "按钮" + i++ ;  
o.attachEvent("onclick",addInput);  
document.body.appendChild(o);  
o = null;  
}  
//-->  
</script>  
</head>  
<body onload="addInput();">  
</body>  
</html>
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：js method to disable and activate input form_form effectsNext article：js method to disable and activate input form_form effects

Related articles

See more