getElementByID, createElement, appendChild several DHTML elements

getElementByID, createElement, appendChild several DHTML elements_javascript skills

PHP中文网

Release： 2016-05-16 19:03:26

Original

1210 people have browsed it

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:

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>

Copy after login

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

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>

Copy after login

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

Copy after login

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

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>

Copy after login

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

Copy after login