DOM 节点含有：元素节点，属性节点，文本节点。
document.getElementById("id") //通过页面元素ID 值 捕获元素对象，得到的值为一个object
1. innerHTML：
//作用有两个：1. 实例化object 值；2. 修改元素内容（给object 对象重新赋值），以下实例详细说明其两点作用：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>innerHTML</title> 6 </head> 7 <body> 8 <h2 id="con">javascript</H2> 9 <p> JavaScript good</p 10 <script type="text/javascript"> 11 var mychar= document.getElementById("con"); //捕获id 对象 12 document.write("原标题:"+mychar+"<br>"); //输出一个非null 的对象，此时没有真实内容 13 documet.write("原标题:" + mychar.innerHTML);输出获取到对象的内容，实例化对象 14 mychar.innerHTML = "替换后的内容是这样的"; 15 document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容 16 </script> 17 </body> 18 </html>
2. 修改对象样式：
1 var mychar= document.getElementById("con"); //捕获id 对象 2 mychar.style.cssText="fontsize:20px;color:red;background:blue"; //修改对象样式
3. 显示和隐藏(display 属性,value = none or block):
1 <script type="text/javascript"> 2 function hidetext(){ 3 document.getElementById("con").style.display = "none"; 4 } 5 function showtext(){ 6 document.getElementById("con").style.display = "block"; 7 } 8 </script> 9 <p id="con">点击按钮实现隐藏和显示功能</p> 10 <form> 11 <input type="butoon" onclick="hidetext()" value="隐藏" /> 12 <input type="butoon" onclick="showtext()" value="显示" /> 13 </form>
4. 控制类名(className 属性):
1 <style> 2 .one { 3 background-color:write; 4 } 5 .two{ 6 background-color: blue; 7 } 8 </style> 9 <script> 10 function addone(){ 11 document.getElementById("p1").className = "one"; 12 } 13 function addtwo(){ 14 document.getElementById("p2").className = "two"; 15 } 16 </script> 17 <p id="p1">the one!</p> 18 <p id="p2">the two!</p> 19 <input type="butoon" value="改变样式" onclick="addone()" /> 20 <input type="butoon" value="改变样式" onclick="addtwo()" />
5. 恢复所有修改内容(removeAttribute("style")):
1 document.getElementById("id").removeAttribute("style");
#综合实例：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8" /> 5 <title>javascript</title> 6 <style type="text/css"> 7 body{font-size:12px;} 8 #txt{ 9 height:400px; 10 600px; 11 border:#333 solid 1px; 12 padding:5px;} 13 p{ 14 line-height:18px; 15 text-indent:2em;} 16 </style> 17 </head> 18 <body> 19 <h2 id="con">JavaScript课程</H2> 20 <div id="txt"> 21 <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5> 22 <p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p> 23 <p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p> 24 <p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p> 25 </div> 26 <form> 27 <!--当点击相应按钮，执行相应操作，为按钮添加相应事件--> 28 <input type="button" value="改变颜色" onclick="changecolor()"/> 29 <input type="button" value="改变宽高" onclick="changewh()" /> 30 <input type="button" value="隐藏内容" onclick="hidecontent()"/> 31 <input type="button" value="显示内容" onclick="showcontent()"/> 32 <input type="button" value="取消设置" onclick="cancle()"/> 33 </form> 34 <script type="text/javascript"> 35 //定义"改变颜色"的函数 36 function changecolor(){ 37 document.getElementById("con").style.cssText="color:blue"; 38 } 39 40 //定义"改变宽高"的函数 41 function changewh(){ 42 document.getElementById("con").style.cssText=" 200px;height:500px"; 43 } 44 45 //定义"隐藏内容"的函数 46 function hidecontent(){ 47 document.getElementById("txt").style.display="none"; 48 } 49 50 51 //定义"显示内容"的函数 52 function showcontent(){ 53 document.getElementById("txt").style.display="block"; 54 } 55 //定义"取消设置"的函数 56 function cancle(){ 57 document.getElementById("con").removeAttribute("style"); 58 document.getElementById("txt").removeAttribute("style"); 59 } 60 </script> 61 </body> 62 </html>