Javascript? DOM ??? ????.
DOM ??? ?? ??? ?? ??? ????. id ??? ?? ??? ???? ?? ??, ?? ??, ?? ??, ?? ??? ?? ?? ????.
? ????? HTML ??? id ??? ?? ??? ???? ??? ?? ??? ?????.
getElementById() ???
HTML ??? id ??? ???? DOM ??? ????? getElementById() ???? ?????. ? ???? ?? ??? ?????.
??:
document.getElementById(id)
??? id? HTML ??? id ?????.
?? ?? id="demo"? ??? ?? ?? ??? ????.
? ?? ?? ?? [ object HTMLDivElement ](?? ?? ??)???.
?? ?? ? ?? ???? ?? ??? ?????.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>HTML DOM樹型結(jié)構(gòu)圖</title>
<div id="demo_div">我是<div>標簽</div>
<p id="demo_p">我是<P>標簽</p>
<h5 id="demo_h5">我是<h5>標簽</h5>
<script type="text/javascript">
function getNode(ele){
alert(
"獲取到的元素節(jié)點："+ele+"\n"+
"id屬性："+ele.getAttribute("id")+"\n"+
"節(jié)點類型："+ele.nodeType+"\n"+
"文本內(nèi)容："+ele.firstChild.nodeValue
);
}
document.getElementById("demo_div").onclick=function(){
getNode(this); // this 指向當前發(fā)生鼠標單擊事件的節(jié)點
}
document.getElementById("demo_p").onclick=function(){
getNode(this); // this 指向當前發(fā)生鼠標單擊事件的節(jié)點
}
document.getElementById("demo_h5").onclick=function(){
getNode(this); // this 指向當前發(fā)生鼠標單擊事件的節(jié)點
}
</script>
</head>
<body>
</body>
</html>?? ??? ?????
getElementsByTagName() ???
HTML ?? ??? ???? DOM ??? ????? ??? ?????. getElementsByTagName() ???. ? ???? ??? ?? ??? ??? ?????.
??:
nodeObject.getElementsByTagName(tagName)
??? nodeObject? ?? ???? tagName? HTML ??? ?????.
??: getElementsByTagName() ???? ?? HTML ??? ?? ??? ??? ? ?? ?? ??? ?? ??? ?? ??? ??? ? ????. ?? ? ?? ??, ? nodeObject? ???? ???.
?? ?? HTML ??? ?? <div> ??? ?????:
document.getElementsByTagName("div");
id="? ?? ??? ?? < ???? ??" ;div> ??:
document.getElementById("demo").getElementsByTagName("div");
?? ?? ?? <div> ??? ?? ?? ?????. ?? ???:
<div id="demo2"> <div>我是第 1 個<div>標簽</div> <div>我是第 2 個<div>標簽</div> <div>我是第 3 個<div>標簽</div> <div>我是第 4 個<div>標簽 <div>我是第 5 個<div>標簽</div> <div>我是第 6 個<div>標簽</div> </div> </div>
<script type="text/javascript">
// 使用 getElementsByTagName() 方法獲得 id="demo2" 的標簽內(nèi)部的所有 <div> 標簽
var nodeArr=document.getElementById("demo2").getElementsByTagName("div");
var len=nodeArr.length;
var nodeStr="";
for(i=0;i<len;i++){
nodeStr+="第 "+(i+1)+" 個節(jié)點的文本是："+nodeArr[i].firstChild.nodeValue+"\n";
}
document.getElementById("demo2").onclick=function(){
alert(
"節(jié)點個數(shù)："+len+"\n\n"+
"節(jié)點文本：\n"+nodeStr
);
}
</script>??:
getElementById( )? ??(?? ??)? ?????? ?? ?? ??? ? ???? ??? ? ????. id ??? HTML ?? ???? ????? ?? ???? ???? ???.
getElementsByTagName()? ?? ?? ??? ???? ??(?? ??)?? ??? ?? ??? ??? ? ????. ??? HTML ?? ??? ???? DOM ??? ???? ??(?? ??)?? ??? ?? ?? ????? ??? ? ????.
