demo5.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- DOM Document Object Model( 文檔對象模型 )-->
</head>
<body>
<div id = "d1">
hello HTML DOM
</div>
<div>
hello world
</div>
<div>
hello JavaScript
</div>
<div>
hello DOM
</div>
<h1 class = "d">Hello World</h1>
<h2 class = "d">Hello JavaScript</h2>
<div class = "d">Hello DOM</div>
用戶名 <input name = "userName"><br>
密碼 <input name = "userPassword"><br>
<div id = "d3" align = "center" class = "abc">Hello Html Dom</div>
</body>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var div1 = document.getElementById("d1");
p("文檔節點" + document);
p("元素節點" + div1);
p("屬性節點" + div1.attributes[0]);
p("內容節點" + div1.childNodes[0]);
</script>
<br>
<script>
//通過id獲取元素節點
var div1 = document.getElementById("d1");
document.write(div1);
document.write("<br>");
</script>
<br>
<script>
//通過標籤名獲取元素節點
var divs = document.getElementsByTagName("div");
for(i = 0;i < divs.length;i++){
document.write(divs[i]);
document.write("<br>");
}
</script>
<br>
<script>
//通過類名獲取元素節點
var elements = document.getElementsByClassName("d");
for(i = 0;i < elements.length;i++){
document.write(elements[i]);
document.write("<br>");
}
</script>
<br>
<script>
//通過表單元素的name獲取元素節點
var elements = document.getElementsByName("userName");
for(i = 0;i < elements.length;i++){
document.write(elements[i]);
document.write("<br>");
}
</script>
<br>
<script>
//和通過id獲取元素節點同樣的代碼 document.getElementById卻無法獲取元素節點。
//這是因爲javascript是解釋語言，是順序執行的。在執行到 document.getElementById的時候，div標籤還沒有加載，所以無法獲取。
var div2 = document.getElementById("d2");
document.write(div2);
document.write("<br>");
</script>
<div id = "d2">people</div>
<br>
<!--首先通過getElementById獲取元素節點，然後通過元素節點的attributes獲取其下所有的屬性節點。-->
<!--因爲屬性節點是多個，所以是以數組的形式返回出來的，接着通過for循環遍歷，查看每個節點的nodeName和nodeValue-->
<!--nodeName和nodeValue表示一個節點的名稱和值-->
<!--如果要獲取一個指定屬性的值，可以採用如下風格，as表示所有的屬性，as["id"]取出名稱是id的屬性-->
<!--as["id"].nodeValue-->
<script>
//獲取屬性節點
var div1 = document.getElementById("d3");
var as = div1.attributes;
document.write("div共有" + as.length + "個屬性");
document.write("分別是：");
for(i = 0;i < as.length;i++){
document.write("<br>");
document.write(as[i].nodeName);
document.write(":");
document.write(as[i].nodeValue);
}
document.write("<br>");
document.write("div的align屬性是：" + as["align"].nodeValue);
document.write("<br>");
</script>
<br>
<!--首先通過document.getElementById獲取元素節點，然後通過childNodes獲取其所有的子節點。 其中第一個子節點，就是其內容節點。-->
<!--然後藉助nodeName和nodeValue把內容節點的名稱和值打印出來。-->
<script>
//獲取內容節點
var div1 = document.getElementById("d3");
var content = div1.childNodes[0];
document.write("div的內容節點名是：" + content.nodeName);
document.write("<br>");
document.write("div的內容節點值是：" + content.nodeValue);
document.write("<br>");
</script>
</html>