getElementByID, createElement,appendChild 여러 DHTML 요소_javascript 기술-JS 튜토리얼-php.cn

getElementByID, createElement,appendChild 여러 DHTML 요소_javascript 기술

PHP中文网

풀어 주다： 2016-05-16 19:03:26

원래의

1210명이 탐색했습니다.

웹 표준에서는 getElementById(), getElementsByName() 및 getElementsByTagName()을 통해

DOCUMENT의 모든 태그에 액세스할 수 있습니다.

1. getElementById( )은 DOCUMENT의 특정 요소에 접근할 수 있다. 이름에서 알 수 있듯이 요소는 ID를 통해 얻어지므로 해당 ID가 설정된 요소에만 접근할 수 있다.
예를 들어 ID가 docid인 p가 있습니다.

그런 다음 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은 반복될 수 있기 때문입니다. 비유하자면 사람의 주민등록번호는 고유한데(이론적으로는 현실적으로 중복이 있지만) 중복된 이름이 많다

는 것과 같다. 문서에 동일한 이름을 가진 태그가 두 개 이상 있는 경우 getElementsByName()은 이러한 요소를 가져와 배열을 형성할 수 있습니다.

예를 들어 두 개의 p가 있습니다.

그런 다음 getElementsByName("docname")을 사용하여 이 두 p를 가져오고 getElementsByName("docname")[0]을 사용하여 첫 번째 p에 액세스한 다음 getElementsByName

3. getElementsByTagName()
TAGNAME(태그 이름)을 통해 요소를 가져오는 것입니다. 물론 DOCUMENT도 동일한 태그를 가지므로 이 메서드도 배열을 가져옵니다.
다음 예에는 두 개의 p가 있습니다. getElementsByTagName("p")을 사용하여 첫 번째 p에 액세스할 수 있습니다. ")[1]은 두 번째 p에 액세스합니다.

표준 DOM을 요약하려면 표준 getElementById()를 사용하여 특정 요소에 액세스하고 표준 getElementByTagName()을 사용하여 태그에 액세스하려고 시도하지만 IE는 그렇지 않습니다.

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

로그인 후 복사

getElementsByName()을 지원하므로 getElementsByName() 사용을 피하세요. 하지만 getElementsByName()과 비표준 document.all[]은 쓸모가 없습니다.

그들만의 편리함이 있습니다. 이를 사용하는 것은 웹사이트 사용자가 사용하는 브라우저에 따라 다르며 결정은 귀하에게 달려 있습니다.

Javascript의 GetElementById는 매우 일반적으로 사용되지만 표준 페이지에서는 ID가 한 번만 나타날 수 있습니다. 링크 클릭, 숨기기 등 여러 요소를 동시에 제어하려면 어떻게 해야 하나요? 여러 레이어? 클래스를 사용하세요. 물론 동일한 클래스가 페이지에 반복적으로 표시되도록 허용할 수도 있습니다. 그러면 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>

로그인 후 복사