<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<div id="d1" align="center" class="abv">Hello DOM</div><br>
<script type="text/javascript">
function p(s){
document.write(s);
document.write("<br>");
}
var div1 = document.getElementById("d1");
//节点名称
p("document的节点名称:"+document.nodeName);//#document
p("div元素节点的节点名称:"+div1.nodeName);//DIV
p("div下属性节点的节点名称:"+div1.attributes[0].nodeName);//id
p("div下内容节点的节点名称:"+div1.childNodes[0].nodeName);//#text
p("<br>");
//节点值
p("document是没有节点值:"+document.nodeValue);//无null
p("元素节点div是没有节点值:"+div1.nodeValue);//无null
p("属性节点id的nodeValue:"+div1.attributes[0].nodeValue);//d1
p("内容节点的nodeValue:"+div1.childNodes[0].nodeValue);//Hello DOM
p("<br>");
//节点类型
p("document的nodeType是:"+document.nodeType);//9
p("元素节点的nodeType是:"+div1.nodeType);//1
p("属性节点的nodeType是:"+div1.attributes[0].nodeType);//2
p("内容节点的nodeType是:"+div1.childNodes[0].nodeType);//3
</script>
<input type="text" name="input1" id="input1" value="输入框" class="c1" test="t1">
<br>
<button onclick="get()">获取input属性</button>
<div id="d2">hello</div>
<script type="text/javascript">
function get(){
var input1 = document.getElementById('input1');
var s = "id = "+input1.id+"<br>";
s += "value = "+input1.value+"<br>";
s += "name = "+input1.name+"<br>";
s += "class = "+input1.className+"<br>";
s += "test = "+input1.getAttribute("test")+"<br>";//自定义属性获取
s += "test = "+input1.attributes["test"].nodeValue+"<br>";//自定义属性获取
document.getElementById("d2").innerHTML = s;
}
</script>
</body>
</html>
09-17
09-17
09-17