23、Javascript DOM
DOM
Document Object Model（文档对象模型）定义了html和xml的文档标准。
DOM 节点树
<html> <head> <title>DOM</title> </head> <body> <h1>程序改变世界！</h1> <a href="#">Hello world!</p> </body> </html>
事件
文档或者浏览器窗口中发生的一些特定交互瞬间。我们可以通过侦听器（或者处理程序）来预定事件，以便事件发生的时候执行相应的代码。
onload事件
页面DOM加载完后触发。
window.onload=function() { alert("加载完毕"); }
onclick事件
单击触发事件。
<script> var foo = function(){ alert("点我？"); }; </script> 按钮 <button onclick="foo();">按钮</button>
<script> var foo = function(){ alert("点我？"); return false; }; </script> A链接 需要指定返回值，否则会跳转 <a href="http://cnblogs.com" onclick="return foo();"> 博客园 </a>
访问DOM元素
document.getElementById() 根据Id获取节点
<input type="button" value="点击" id="btn"/> <script> window.onload=function() { var btn = document.getElementById("btn"); btn.onclick=function(){ //为该元素添加点击事件 alert("点我？"); } } </script>
document.getElementsByName() 获取指定名称相同的元素集合
<input type="radio" name="sex" checked> 男 <input type="radio" name="sex"> 女 <script> var sex = document.getElementsByName("sex"); alert(sex.length); </script>
document.getElementsByTagName() 获取HTML标签名的元素集合
<a href="http://cnblogs.com/">博客园</a> <a href="http://cnblogs.com/baidawei/">海盗屋</a> <script> var htmlA = document.getElementsByTagName("a"); for(var i = 0;i<htmlA.length;i++){ htmlA[i].onclick=function(){ return false; //禁用 } } </script>
分组处理getElementsByTagName
<div id="ok"> <a href="http://cnblogs.com/">博客园</a> <a href="http://cnblogs.com/baidawei/">海盗屋</a> </div> <hr> <!--以下可用--> <a href="http://cnblogs.com/">博客园</a> <a href="http://cnblogs.com/baidawei/">海盗屋</a> <script> var htmlA = ok.getElementsByTagName("a"); //注意元素id.getElementsByTagName for(var i = 0;i<htmlA.length;i++){ htmlA[i].onclick=function(){ return false; //禁用 } } </script>
document.getElementsByClassName() 获取指定类名的元素集合
<div class="c">第一个</div> <div class="c">第二个</div> </body> <script> var node = document.getElementsByClassName("c")[0]; alert(node.innerHTML); </script>
文档结构
<div id="ok"> <a href="http://cnblogs.com/">博客园</a> <a href="http://cnblogs.com/baidawei/">海盗屋</a> </div> <script> var ok = document.getElementById("ok"); document.write(ok.childNodes.length); //该节点下的所有子节点，包含文本节点 5个 document.write(ok.parentNode.nodeName); //该节点的父节点 body document.write(ok.firstChild.nodeName); //第一个子节点 text document.write(ok.lastChild.nodeType); //最后一个子节点 3 document.write(ok.nextSibling.nodeName); //下一个兄弟元素 text document.write(ok.previoursSibling); //上一个兄弟元素 document.write(ok.nodeType); //1 9代表Document节点，1代表Element节点，3代表Text节点，8代表Comment节点，11代表DocumentFragment节点 document.write(ok.nodeValue); //null text节点的文本内容 document.write(ok.nodeName); //div 元素的标签名 </script>
操作节点属性
<div id="ok"> <a href="http://cnblogs.com/">博客园</a> <a href="http://cnblogs.com/baidawei/">海盗屋</a> </div> <script> var htmlA = document.getElementsByTagName("a"); var c = htmlA[0].getAttribute("href"); //获取属性 document.write(c); htmlA[0].setAttribute("href","http://www.baidu.com/"); //设置属性 </script>
操作样式
<p>一段测试文字</p> <script> //设置样式 var p = document.getElementsByTagName("p")[0]; p.style.color = 'red'; p.style.display = 'inline'; p.style.borderTop = "solid"; //所有css样式border-top 去掉-改大写 </script>
创建节点
document.createElement() 创建元素节点
<div id="container"> </div> <script> //创建节点 var container = document.getElementById("container"); //创建元素节点 var span = document.createElement("span"); //设置文本带html innerText不带html span.innerHTML = "<h1>追加的span</h1>"; //添加属性 span.setAttribute("href","http://cnblogs.com/"); //追加到尾部 container.appendChild(span); </script>
document.createTextNode() 创建文本节点
<div id="container"> </div> <script> var container = document.getElementById("container"); //创建文本节点 无任何标签 var textNode = document.createTextNode("文本"); container.appendChild(textNode); </script>
插入节点
<ul> <li>啦啦阿拉</li> <li>啦啦阿拉</li> <li>啦啦阿拉</li> </ul> <script> //插入节点 var newItem = document.createElement("li"); newItem.innerHTML = "新插入的"; var list = document.getElementsByTagName("ul")[0]; list.insertBefore(newItem,list.childNodes[0]); //第二个参数插入的位置 </script>
删除节点
<body id="body"> <p>1111111111</p> <p id="p">22222222</p> </body> <script> var body = document.getElement("body"); var p = document.getElementById("p"); body.removeChild(p); p.style.display="none"; //一般创建后不会删除 更多的是隐藏 </script>
