dom基础4

约定不等于承诺〃 2022-01-20 14:47 200阅读 0赞

<!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>