你的位置:首页 > Java教程

[Java教程]23、Javascript DOM


DOM

Document Object Model(文档对象模型)定义了html和

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.getElementsByTagNamefor(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); //该节点的父节点 bodydocument.write(ok.firstChild.nodeName); //第一个子节点 textdocument.write(ok.lastChild.nodeType); //最后一个子节点 3document.write(ok.nextSibling.nodeName); //下一个兄弟元素 textdocument.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>