你的位置:首页 > Java教程

[Java教程]javascript DOM小结


一:定义

dom:文档对象模型。

dom是针对HTML和

1:childNodes(返回当前节点的子节点列表)

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>dom1</title>  <style>    li{      height: 30px;      border: 1px solid #000;    }  </style></head><body>  <ul id="uls">    <li></li>    <li></li>  </ul></body><script>    var uls = document.getElementsByTagName("ul")[0];  //chrome:5 ,ie>=9 :5; ie<=8 :2   alert(uls.childNodes.length);</script></html>

chrome弹出5(),为什么是5?如图:

3个文本节点(红,蓝,黑),2个元素节点(方框圈起来的)。ie5-8弹出2,说明其中节点并不包含文本节点。

如果如下写法会报错(文本节点不能设置background):

  for(var i = 0; i <= uls.childNodes.length; i++){    uls.childNodes[i].style.background = "red";  }   

兼容写法:当节点为元素节点的时候设置其背景色

  for(var i = 0 ; i <= uls.childNodes.length ; i++){    //nodeType -->1元素节点    if(uls.childNodes[i].nodeType == 1){      uls.childNodes[i].style.background = "red";    }  }

2:children(该属性返回节点的子元素--不包含文本节点)

 

     alert(uls.children.length);                     //chrome和ie 都为2     for(var i = 0 ; i <= uls.children.length ; i++){    uls.children[i].style.background = "red";  }

 

注意:不论是children、childNodes,子节点只算第一层的,子节点中的元素不算在其中(那个是孙子节点)。

3:parentNode(返回指定节点的父节点)

 

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>dom1</title>  <style>    li{      height: 30px;      border: 1px solid #000;    }  </style></head><body>  <ul id="uls">    <li></li>    <li></li>  </ul></body><script>  var uls = document.getElementById("uls");  alert(uls.parentNode);</script></html>

4:offsetParent(返回最近的祖先定位元素)

定位元素指的是元素的 CSS position 属性被设置为 relative、absolute 或 fixed 的元素。

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>dom1</title>  <style>    #wrapper{      position: relative;      width: 200px;      height: 200px;    }    #inner{      position: absolute;    }  </style></head><body>  <div id="wrapper">    <div id="noPosition">      <div id="inner"></div>    </div>  </div></body><script>  var sonNode = document.getElementById("inner");  alert(sonNode.offsetParent.id);</script></html>

如果容器元素未设置css定位,则返回body或html

5:firstChild  (firstElementChild)

兼容问题:

  ie6~8:                firstChild

  其他浏览器:  firstElementChild

兼容写法:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>dom1</title></head><body>  <ul id="uls">    <li></li>    <li></li>    <li></li>  </ul></body><script>  var uls = document.getElementById("uls");  if(uls.firstElementChild){    uls.firstElementChild.style.background = "red";  }else{    uls.firstChild.style.background = "red";  }</script></html>

6:lastChild   (lastElementChild)

兼容问题:

  ie6~8:               lastChild

  其他浏览器:         lastElementChild

用法同firstChild。

7:nextSibling(nextElementSibling)

兼容问题:

  ie6~8:               nextSibling

  其他浏览器:         nextElementSibling

用法同上

8:previousSibling(previousElementSibling)

兼容问题:

  ie6~8:               previousSibling

  其他浏览器:         previousElementSibling

用法同上

9:getAttribute,setAttribute,removeAttribute

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>dom</title></head><body>  <input type="text" id="btn1" />  <input type="button" value="按钮" id="btn2" name="2" /></body><script>  // 用dom的方式操纵元素属性  var btn1 = document.getElementById("btn1");  var btn2 = document.getElementById("btn2");  btn2.onclick = function(){  // btn1.value = "1234";    // btn1["value"] = "1234"    var btn2Value = btn2.getAttribute('value');    alert(btn2Value);    btn1.setAttribute("value",btn2Value);    btn2.removeAttribute("value");  }  // 获取:getAttribute(属性名称)    // 设置:setAttribute(属性名称,值)    // 删除:removeAttribute(属性名称)</script></html>

10:createElement(创建元素节点)

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title></head><body>  <ul id="uls">      </ul>  <input type="button" value="创建li" /></body><script>  var uls = document.getElementsByTagName("ul")[0];  var btns = document.getElementsByTagName("input")[0];  btns.onclick = function(){    var lis = document.createElement("li");    uls.appendChild(lis);  // 父级.appendChild(创建的元素);  }</script></html>

11:createTextNode(创建文本节点)

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title></head><body>  <div id="main"></div></body><script>  var main = document.getElementById("main");  var textNode = document.createTextNode("<h1>wefwedf</h1>");  main.appendChild(textNode);</script></html>

结果:

12:appendChild(指定元素节点的最后一个子节点之后添加节点)

父级.appendChild(子节点)。

用法见上

13:insertBefore(在已有的子节点前插入一个新的子节点)

父级.insertBefore(子节点,在谁之前)。

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title></head><body>  <input type="text" />  <input type="button" value="插入元素" />  <ul>      </ul></body><script>  var txt = document.getElementsByTagName("input")[0];  var btn = document.getElementsByTagName("input")[1];  var uls = document.getElementsByTagName("ul")[0];  // btn.onclick = function(){  //   var lis = document.createElement("li");  //   lis.innerHTML = txt.value;  //   uls.appendChild(lis);  // }    // 父级.appendChild(子节点);  // 父级.insertBefore(子节点,在谁之前);  btn.onclick = function(){    var lic = document.createElement("li");    var lis = document.getElementsByTagName("li");    lic.innerHTML = txt.value;    uls.insertBefore(lic,lis[0]);// ie下会报错,因为初始时没有li。  }</script></html>

解决上面的栗子初始化时ie8及以下报错,兼容写法:

  btn.onclick = function(){    var lic = document.createElement("li");    var lis = document.getElementsByTagName("li");    lic.innerHTML = txt.value;    if(lis.length == 0){      uls.appendChild(lic);    }else{      uls.insertBefore(lic,lis[0]);    }  }

14:removeChild(删除父元素中的子节点)

父级.removeChild(子节点)

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>dom9</title>  <style>    span{      color: red;    }  </style></head><body>  <ul id="uls">    <li>jdjdjdjd<span>删除</span></li>    <li>jdsdcsd<span>删除</span></li>    <li>jdcsdsddjd<span>删除</span></li>    <li>12123<span>删除</span></li>    <li>343434jdjd<span>删除</span></li>  </ul></body><script>  var uls = document.getElementById("uls");  var spans = document.getElementsByTagName("span");  for(var i = 0; i<= spans.length; i++){    spans[i].onclick = function(){      uls.removeChild(this.parentNode);    }  }  // removeChild 删除父元素中的子节点。</script></html>

15:cloneNode(复制当前节点或复制当前节点及其子节点)

复制的节点.cloneNode(false) -->复制当前节点
复制的节点.cloneNode(true) -->复制当前节点及其子节点

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title>  <style>      #box{        width: 100px;        height: 100px;        background: red;          }      #div1{        width: 200px;        height: 200px;        border: 5px solid #000;          }    </style></head><body>  <div id="box">    这个是box  </div>  <div id="div1">    这个是div1  </div>  <input type="button" value="复制" id="btn" /></body><script>    var btn = document.getElementById("btn");  var box = document.getElementById("box");  var div1 = document.getElementById("div1");  btn.onclick = function(){    var clonbox = box.cloneNode(false);    div1.appendChild(clonbox);    // var clonbox1 = box.cloneNode(true);        // div1.appendChild(clonbox1);  }

16:replaceChild(替换当前父节点中的指定子节点)

父节点.replaceChild(新插入的节点,要替换的节点)

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>替换节点</title></head><body>  <div id="main">    <div></div>    <div></div>    <div></div>  </div></body><script>  var main = document.getElementById("main");  var spans = document.createElement("span");  // replaceChild()方法替换节点  // 参数一:新插入的节点;  // 参数二:要替换的节点;  // 父节点.replaceChild(新插入的节点,要替换的节点)  main.replaceChild(spans,main.children[1])</script></html>

先总结到这,后边再补充。。。