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","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 = "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>