js DOM 节点树 设置 style 样式属性 

  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>

 

posted @ 2017-10-11 15:08  enych  阅读(7203)  评论(0)    收藏  举报