getElementByID, createElement,appendChild 여러 DHTML 요소_javascript 기술
- PHP中文网원래의
- 2016-05-16 19:03:261215검색
웹 표준에서는 getElementById(), getElementsByName() 및 getElementsByTagName()을 통해
DOCUMENT의 모든 태그에 액세스할 수 있습니다.
1. getElementById( )은 DOCUMENT의 특정 요소에 접근할 수 있다. 이름에서 알 수 있듯이 요소는 ID를 통해 얻어지므로 해당 ID가 설정된 요소에만 접근할 수 있다.
예를 들어 ID가 docid인 p가 있습니다.
99721b9458ba6f79d2fa0a5ec120770994b3e26ee717c64999d7867364b1b4a3
그런 다음 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가 있습니다.
01ada97a3ba40e151b6e1299db92acbe94b3e26ee717c64999d7867364b1b4a3
e6c7621f2a12a3eb66c9582489b4bc6c94b3e26ee717c64999d7867364b1b4a3
그런 다음 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='none';
}
}
}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>