dom基础4

<!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>
猜你喜欢
