1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <meta charset="utf-8" /> 7 </head> 8 <body> 9 <ul> 10 <li id="html">html</li> 11 <li id="css">css</li><li id="js">js</li> 12 </ul> 13 <script type="text/javascript"> 14 //訪問指定元素 15 var html = document.getElementById("html"); //通過ID獲取對象 16 html.style.fontWeight = "bold";//改變元素的樣式 17 var arr = document.getElementsByTagName("li"); //通過標簽獲取對象的集合 18 alert(arr.length); //共有3個 19 </script> 20 21 <script type="text/javascript"> 22 //訪問相關的元素 23 var elm = document.lastChild; //獲取文檔的最后一個子節點(html)標記 24 document.write(elm.nodeName + "<br/>"); 25 26 var body = elm.lastChild; //獲取(html)的(最后一個子節點)body標記 27 document.write(body.nodeName + "<br/>"); //最后一個子節點 28 29 var head = elm.firstChild;//獲取(html)的(第一個子節點)head標記 30 document.write(head.nodeName + "<br/>"); //第一個子節點 31 32 var ul = body.childNodes[1]; //獲取(body)的子節點數組 ul標記 33 document.write(ul.nodeName+"<br/>");//數組第1個元素的名字 34 35 var li1 = ul.childNodes[1]; //獲取ul下的子節點數組第一個 li標記 36 document.write(li1.nodeName + "<br/>");//數組第1個元素的名字 37 38 var text1 = li1.nextSibling; //獲取li1后一個兄弟節點 39 document.write(text1.nextSibling.nodeName + "<br/>");//數組第個元素的名字 li //li與li之間必須緊挨着 否則未定義 40 //默認把換行當成元素; 兩次獲取兄弟元素 41 </script> 42 43 <div id="div1"></div> 44 <script type="text/javascript"> 45 //追加元素 46 var div1 = document.getElementById("div1");//當前節點 47 var newH1 = document.createElement("h1");//創建元素節點(h1標簽) 48 var newText = document.createTextNode("abcdefghijk");//創建文本節點 49 newH1.appendChild(newText);//將文本節點添加到 (h1中) 50 div1.appendChild(newH1); //將新建元素節點添加到<div>中 (作為最后一個節點) 51 </script> 52 53 <div id="div2"> 54 <p id="p1">段落1</p> 55 <p id="p2">段落2</p> 56 </div> 57 <script type="text/javascript"> 58 //插入元素 59 var newPara = document.createElement("p");//創建元素節點 60 var newText = document.createTextNode("新段落"); 61 newPara.appendChild(newText);//將文本節點添加到 p中 62 var myDiv = document.getElementById("div2"); //獲取父節點 63 var para2 = document.getElementById("p2"); //指定插入位置的節點 64 myDiv.insertBefore(newPara, para2);//插入指定節點值前 (p2前) 65 </script> 66 67 <div id="div3"> 68 <p id="p11">段落11</p> 69 <p id="p12">段落12</p> 70 </div> 71 <script type="text/javascript"> 72 //替換元素 73 var newH1 = document.createElement("h1"); //創建節點h1 74 var newText = document.createTextNode("標題1");//創建文本節點 75 newH1.appendChild(newText);//將文本節點添加到h1節點中 76 var myDiv = document.getElementById("div3");//獲取父節點 77 var para1 = document.getElementById("p11"); //獲取替換的節點 78 myDiv.replaceChild(newH1,para1); //把段落p11替換為標題1 79 </script> 80 81 <div id="div4"> 82 <p id="p21">段落21</p> 83 <p id="p22">段落22</p> 84 </div> 85 <script type="text/javascript"> 86 //刪除子節點 87 var myDiv = document.getElementById("div4");//獲取父節點 88 var para1 = document.getElementById("p21");//指定要刪除的節點 89 myDiv.removeChild(para1);//刪除指定的子節點 90 </script> 91 92 <div id="div5"></div> 93 <script type="text/javascript"> 94 //元素的屬性與內容操作 95 var myDiv = document.getElementById("div5");//獲取元素對象 96 myDiv.innerHTML = "<h1>asdfghjk<h1>";//設置元素里面的html內容 97 myDiv.setAttribute("style","width:380px;height:80px;border:1px solid #000;"); //為元素設置新的屬性 98 </script> 99 100 <div id="div6"></div> 101 <div id="div7"></div> 102 <script type="text/javascript"> 103 //style屬性 104 var myDiv = document.getElementById("div6"); 105 myDiv.style.width = "200px"; 106 myDiv.style.height = "50px"; 107 myDiv.style.border = "1px solid #000";//設置div6的樣式 108 var myDiv1 = document.getElementById("div7"); 109 myDiv1.style = "width:200px;height:50px;border:1px solid #000;background-color:#000"; //設置div7的樣式 110 //javascript不允許在屬性或方法名稱里使用連字符;例如background-Color; 因此需要調整書寫格式backgroundColor;連字符后面用大寫 111 </script> 112 113 <div id="div8"></div> 114 <script type="text/javascript"> 115 //className屬性 116 var myDiv = document.getElementById("div8");//獲取div8對象 117 myDiv.className = "a"; //更改樣式<div id="div8" class ="a"></div> 118 myDiv.className = "b"; //更改樣式<div id="div8" class ="b"></div> 119 </script> 120 </body> 121 </html>
<script> (function () { document.getElementsByTagName("body")[0].style.cssText = "overflow:hidden"; }) (); </script>