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>