标签：
1 <div id="box" style="width: 100px; height: 100px; "></div> 2 <input type="button" value="点击切换颜色" onclick="toggle();"/> 3 <script> 4 var box = document.getElementById("box"); 5 function toggle() { 6 box.style.backgroundColor = "#f00"; 7 } 8 </script>
1 <div id="box" style="width: 100px; height: 100px; " id="box"></div> 2 <input type="button" value="点击切换颜色" id="btn"/> 3 <script> 4 var box = document.getElementById("box"); 5 var btn = document.getElementById("btn"); 6 btn.onclick = function () { 7 box.style.backgroundColor = "#f00"; 8 } 9 </script>
1 <input type="button" value="button" id="btn"/> 2 <script> 3 var btn = document.getElementById("btn"); 4 btn.addEventListener("click", function () { 5 alert("我说：哈哈哈"); 6 },false); 7 btn.addEventListener("click", function () { 8 alert("她说：23333"); 9 }, false); 10 //两次事件都会执行，这是区别于on方式的 11 </script>
//事件名称的区别
// addEventLisener中第一个参数type是click、load，不带on
// attachEvent中一个参数type是onclick、onload
//this的区别
// addEventLisener：事件处理程序会在当前对象的作用域运行，因此事件处理程序的this就是当前对象
// attachEvent：事件处理程序是在全局作用域下运行,因此this就是window
1 //获得页面标签之间文本内容的兼容性写法 2 function getInnerText(obj) { 3 if (obj.innerText) { 4 retrun obj.innerText; 5 } else { 6 return obj.textContent; 7 } 8 } 9 //设置页面标签之间的文本内容的兼容性写法 10 function setInnerText(obj, value) { 11 if(obj.innerText) { 12 obj.innerText = value; 13 } else { 14 obj.textContent = value; 15 } 16 }
<input type="button" value="按钮1" id="btn" aa="自己设置的类名"> <script> var btn = document.getElementById("btn"); btn.value = "按钮2"; //设置属性，改变了原来的属性值 btn.bb = "自己设置的属性"; //实际上是添加不上去的 </script>
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <style> 5 div { 6 width: 200px; 7 height: 200px; 8 background-color: rebeccapurple; 9 position: absolute; 10 } 11 </style> 12 </head> 13 <body> 14 <input type="button" id="btn" value="button"> 15 <div id="box"></div> 16 <script> 17 var btn = document.getElementById("btn"); 18 var box = document.getElementById("box"); 19 btn.onclick = function () { 20 box.style.backgroundColor = "blue"; //5.3 21 box.style.width = " 400px"; //5.4 22 box.style.top = "200px"; //5.5 23 box.style.zIndex = "1"; //5.6 24 box.style.opacity = .5; //5.7 25 }; 26 </script> 27 </body>
1 <style> 2 * { 3 margin: 0; 4 padding: 0; 5 } 6 ul { 7 list-style: none; 8 } 9 .box { 10 width: 400px; 11 height: 300px; 12 border: 1px solid #ccc; 13 margin: 100px auto; 14 } 15 .hd { 16 height: 45px; 17 } 18 .hd span { 19 display: inline-block; /*将行内元素转换成行内块元素，宽高才起作用*/ 20 width: 90px; 21 background-color: pink; 22 line-height: 45px; 23 text-align: center; 24 cursor: pointer; 25 } 26 .hd span.current { 27 background-color: purple; /*紫色*/ 28 } 29 .bd li { 30 height: 255px; 31 background-color: purple; 32 display: none; /*设置隐藏*/ 33 } 34 .bd li.current { 35 display: block; 36 } 37 </style> 38 </head> 39 <body> 40 <div class="box" id="box"> 41 <div class="hd"> 42 <span class="current">体育</span> 43 <span>娱乐</span> 44 <span>新闻</span> 45 <span>综合</span> 46 </div> 47 <div class="bd"> 48 <ul> 49 <li class="current">我是体育模块</li> 50 <li>我的娱乐模块</li> 51 <li>我是新闻模块</li> 52 <li>我是综合模块</li> 53 </ul> 54 </div> 55 </div> 56 <script> 57 var box = document.getElementById("box"); 58 var spans = box.getElementsByTagName("span"); 59 var lis = box.getElementsByTagName("li"); 60 for (var i = 0; i < spans.length; i++) { 61 spans[i].setAttribute("index", i);//设置自定义属性index 62 spans[i].onclick = function () { 63 for (var j = 0; j < spans.length; j++) { 64 spans[j].removeAttribute("class"); 65 lis[j].removeAttribute("class"); 66 } 67 this.setAttribute("class", "current"); 68 //var index = this.getAttribute("index");//设置一个变量来获得自定义属性 69 //lis[index].setAttribute("class", "current"); 70 lis[this.getAttribute("index")].setAttribute("class", "current"); 71 }; 72 } 73 </script>
|
a.标签节点
|
b.属性节点
|
c.文本节点
|
|
节点类型nodeType
|
节点名称nodeName
|
节点值nodeValue
|
|
克隆元素（标签）节点
|
cloneNode()
|
参数为True，深度克隆，克隆当前对象的一切子节点；为false，浅克隆，只会克隆标签，不包含文本信息
|
|
移除节点
|
removeChild
|
|
|
追加节点
|
appendChild
|
父节点.appendChild(子节点)
|
|
插入节点
|
insertBefore
|
|
|
获得属性节点
|
getAttributeNode
|
|
|
追加节点
|
appendChild
|
父节点.appendChild(子节点)
|
| 方法一、documenet.write(); |
写在函数里的话，会冲掉之前的元素，所以一般不用
|
|
| 方法二、innerHTML |
innerHTML比较方便，但要注意尽量不要频繁的拼接字符串
字符串具有不可变性，会重复开辟内存空间，一定要注意优化
可以考虑用数组代替
|
|
| 方法三、document.creatElement() |
如：appendChild()
removeChild()
insertBefore()
replaceChild()
|
标签：
原文地址：http://www.cnblogs.com/2010master/p/5815838.html
