1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>读写节点</title> 6 <script> 7 //onload是页面加载事件,在页面加载完成时, 8 //由浏览器自动触发,触发时调用对应的函数. 9 window.onload = function(){ 10 //1.读取节点的名称和类型 11 var p1 = document.getElementById("p1"); 12 console.log(p1.nodeName); 13 console.log(p1.nodeType); 14 //2.读写节点的内容 15 //内容:双标签中间的文本,如<a>内容</a> 16 //innerHTML(包含标签) 17 console.log(p1.innerHTML); 18 p1.innerHTML = "1.DOM操作可以<u>读写</u>节点"; 19 //innerText(不含标签) 20 var p2 = document.getElementById("p2"); 21 console.log(p2.innerText); 22 p2.innerText = "2.DOM操作可以<u>查询</u>节点"; 23 //3.读写节点的值 24 //值:表单控件中的数据(label除外) 25 var b1 = document.getElementById("b1"); 26 console.log(b1.value); 27 b1.value = "BBB"; 28 //4.读写节点的属性 29 //1)调用方法 30 var i1 = document.getElementById("i1"); 31 console.log(i1.getAttribute("src")); 32 i1.setAttribute("src","../images/02.jpg"); 33 i1.removeAttribute("src"); 34 //2)调用属性名 35 //id,style,className 36 var a1 = document.getElementById("a1"); 37 console.log(a1.style); 38 console.log(a1.style.color); 39 a1.style.color = "blue"; 40 } 41 </script> 42 </head> 43 <body> 44 <p id="p1">1.DOM操作可以<b>读写</b>节点</p> 45 <p id="p2">2.DOM操作可以<b>查询</b>节点</p> 46 <p id="p3">3.DOM操作可以<b>增删</b>节点</p> 47 <p> 48 <input type="button" value="AAA" id="b1"/> 49 </p> 50 <p> 51 <img src="../images/01.jpg" id="i1"/> 52 </p> 53 <p> 54 <a href="#" style="color:red;" id="a1">退出</a> 55 </p> 56 </body> 57 </html>