JavaScript对HTML DOM文档树的常用操作

ybfh9894 6年前

所有HTML元素都拥有的属性:id,title,lang,dir,className。

DOM集合:

  • document.images 文档中所有图片集合
  • document.images[0] 等价document.images.item(0) 第一个图片
  • document.images.length 元素长度

JavaScript获取元素的三种方法:

  • document.getElementById()
  • document.getElementByTagName()
  • document.getElementByClassName()
<!DOCTYPE html>  <html>  <head>  <style>  .box{      width:500;      height:500;  }  </style>  <script>  function f1(){      var d1 = document.getElementById('d1');      var d2 = document.getElementByTagName('div');      var d3 = document.getElementByClassName('box');  }  </script>  </head>  <body onload = "f1()" >      <div id="d1" class="box">            <p>这只是一个例子</p>      </div>  </body>  </html>

节点属性:

  • nodeName
  • nodeValue
  • nodeType 值为1-12. 1是元素节点;2是属性;3是文本节点
  • parentNode
  • childNode
  • firstNode
  • lastNode
  • previousSibling 前一个兄弟节点
  • nextSibling  后一个兄弟节点
  • attributes 属性集合
<!DOCTYPE html>  <html>  <head>  <script>  function f1(){      var node = document.getElementById('d1');      alert(node.nodeName);  }  </script>  </head>  <body onload = "f1()" >      <div id="d1">            <p>这只是一个例子</p>      </div>  </body>  </html>

关于节点操作的方法:

  • createElement() 创建元素节点
  • createTextNode() 常见文本节点
  • createAttribute()创建属性节点
  • appendChild() 追加子节点
  • insertBefore() 在指定子节点前插入新子节点
  • removeChild() 删除子节点
  • replaceChild() 替换子节点
<!DOCTYPE html>  <html>  <head>  <script>  function f1(){ //给div追加一个段落      var div = document.getElementById('d1');      var newP = document.craeteElement('p');      var textNode = document.createTextNode('This is an demo.');      newP.appendChild(textNode);      div.appendChild(newP);  }  </script>  </head>  <body onload = "f1()" >      <div id="d1">            <p>这只是一个例子</p>      </div>  </body>  </html>

关于属性操作的方法:

  • getAttribute(attrName) 获取属性对应的值
  • setAttribute(attrName,value)
  • removeAttribute(attrName)
  • hasAttribute(attrName)  是否有某属性

来自: http://www.cnblogs.com/feitan/p/5147663.html