demo6.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Title</title>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
</script>
</head>
<body>
<div id = "d1">
Hello Html DOM
</div>
<br>
<div id = "d2">
hello world
</div>
<br>
<button onclick = "changeDiv1()">通過內容節點方式改變div的內容</button>
<button onclick = "changeDiv2()">通過innerHTML改變div的內容</button>
<br>
<br>
<input id = "input1" class = "class1 class2" test = "t1" value = "這是一個輸入框">
<br>
<button onclick = "get()">獲取input的屬性</button>
<br>
<br>
<input id = "name">
<input type = "button" value = "驗證" onclick = "check()">
<span id = "noMessage" style = "color:red;display:none;">賬號已經存在</span>
<span id = "yesMessage" style = "color:green;display:none">賬號可以使用</span>
<br>
<br>
<button onclick = "switch1()">通過src屬性切換圖片1</button><br>
<button onclick = "switch2()">通過屬性節點切換圖片2</button><br>
<img id = "img" width = "100" src = "img\a.jpg"/>
<br>
<br>
<div style = "height:100px">
<input type = "text" value = "3.14159265354" id = "in">
<button onclick = "judge()">判斷</button>
<span id = "out"></span>
</div>
<div style = "height:30px"></div>
<br>
</body>
<script>
//節點名稱
var div1 = document.getElementById("d1");
p("document的節點名稱:" + document.nodeName);
p("div元素的節點名稱：" + div1.nodeName);
p("div下屬性節點的節點名稱：" + div1.attributes[0].nodeName);
p("div下內容節點的節點名稱：" + div1.childNodes[0].nodeName);
p(div1.childNodes[0].nodeValue);
</script>
<br>
<script>
//節點值
var div1 = document.getElementById("d2");
p("document是沒有nodeValue的：" + document.nodeValue);
p("元素節點是沒有nodeValue的：" + div1.nodeValue);
p("屬性節點id的nodeValue：" + div1.attributes[0].nodeValue);
p("內容節點的nodeValue：" + div1.childNodes[0].nodeValue);
</script>
<br>
<script>
//節點類型
p("document的nodeType是：" + document.nodeType);
p("元素節點的nodeType是：" + div1.nodeType);
p("屬性節點的nodeType是：" + div1.attributes[0].nodeType);
p("內容節點的nodeType是：" + div1.childNodes[0].nodeType);
</script>
<br>
<script>
// 修改與獲取內容的值可以通過 childNodes[0].nodeValue進行
// 還有個簡便辦法就是通過innerHTML進行。 效果是一樣的。
function changeDiv1(){
document.getElementById("d1").childNodes[0].nodeValue = "通過childNodes[0].nodeValue改變內容";
}
function changeDiv2(){
document.getElementById("d1").innerHTML = "通過innerHTML改變內容";
}
</script>
<br>
<script>
// 元素上的屬性，比如id,value 可以通過 . 直接訪問
// 如果是自定義屬性，那麼可以通過如下兩種方式來獲取
// getAttribute("test")
// attributes["test"].nodeValue
function get(){
var input1 = document.getElementById("input1");
var s = "id = " + input1.id + "<br>";
s += "value = " + input1.value + "<br>";
s += "class = " + input1.className + "<br>";
s += "test = " + input1.getAttribute("test") + "<br>";
s += "test = " + input1.attributes["test"].nodeValue + "<br>";
document.getElementById("d1").innerHTML = s;
}
</script>
<script>
//驗證賬號是否已經存在
//在js使用簡單的驗證規則： 如果賬號是以a或者A開頭的，那麼就提示已經存在了。
function check(){
var name = document.getElementById("name").value;
var noMessage = document.getElementById("noMessage");
var yesMessage = document.getElementById("yesMessage");
noMessage.style.display = "none";
yesMessage.style.display= "none";
if(0 != name.length){
var firstChar = name.charAt(0);
if('a' == firstChar || 'A' == firstChar)
noMessage.style.display = "inline";
else
yesMessage.style.display = "inline";
}
}
</script>
<script>
//切換不同的圖片
function switch1(){
var img = document.getElementById("img");
img.src = "img/a.jpg";
}
function switch2(){
var img = document.getElementById("img");
img.attributes["src"].nodeValue = "img/b.jpg";
}
</script>
<script>
//判斷輸入框裏的值，是否是整數(浮點數也不行)
function judge(){
var num = document.getElementById("in").value;
if(parseInt(num) == num){
document.getElementById("out").innerHTML = "是整數";
}
else{
document.getElementById("out").innerHTML = "不是整數";
}
}
</script>
</html>