suchen

Heim >Web-Frontend >js-Tutorial >getElementByID、createElement、appendChild几个DHTML元素_javascript技巧

getElementByID、createElement、appendChild几个DHTML元素_javascript技巧

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

WEB标准下可以通过getElementById(), getElementsByName(), and getElementsByTagName()访问

DOCUMENT中的任一个标签： 

1、getElementById()
getElementById()可以访问DOCUMENT中的某一特定元素，顾名思义，就是通过ID来取得元素，所以只能访问设置了ID的元素。
比如说有一个p的ID为docid：
4e0ad0d46af0a5d2a55715398e6235c394b3e26ee717c64999d7867364b1b4a3
那么就可以用getElementById("docid")来获得这个元素。 


<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()
这个是通过NAME来获得元素，但不知大家注意没有，这个是GET　ELEMENTS，复数ELEMENTS代表获得的不是一个元素，为什么呢？
因为DOCUMENT中每一个元素的ID是唯一的，但NAME却可以重复。打个比喻就像人的身份证号是唯一的（理论上，虽然现实中有重复），但名字

重复的却很多。如果一个文档中有两个以上的标签NAME相同，那么getElementsByName()就可以取得这些元素组成一个数组。

比如有两个p：
13c19f11a0ce2ea9367943be11a5cd8094b3e26ee717c64999d7867364b1b4a3
c6fc91dd0cbd1965a4a76875468a62e894b3e26ee717c64999d7867364b1b4a3
那么可以用getElementsByName("docname")获得这两个p，用getElementsByName("docname")[0]访问第一个p，用getElementsByName


3、getElementsByTagName()
这个呢就是通过TAGNAME（标签名称）来获得元素，一个DOCUMENT中当然会有相同的标签，所以这个方法也是取得一个数组。
下面这个例子有两个p，可以用getElementsByTagName("p")来访问它们，用getElementsByTagName("p")[0]访问第一个p，用

getElementsByTagName("p")[1]访问第二个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>

总结一下标准DOM，访问某一特定元素尽量用标准的getElementById()，访问标签用标准的getElementByTagName(),但IE不支持

getElementsByName()，所以就要避免使用getElementsByName()，但getElementsByName()和不符合标准的document.all[]也不是全无是处，它

们有自己的方便之处，用不用那就看网站的用户使用什么浏览器，由你自己决定了。

　　Javascript中的getElementById十分常用，但在标准的页面中，一个id只能出现一次，如果我想同时控制多个元素，例如点一个链接， 让多个层隐藏，该怎么做？用class，当然，同一个class是可以允许在页面中重复出现的，那么有没有getElementByClass呢？没有， 但是可以解决：  

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

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


appendChild方法的使用 

<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>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：js禁用和激活input表单的方法_表单特效Nächster Artikel：js查找父节点的简单方法_javascript技巧

In Verbindung stehende Artikel

Mehr sehen