JavaScript對HTML DOM文檔樹的常用操作

ybfh9894 9年前發布 | 10K 次閱讀 HTML JavaScript開發 JavaScript

所有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

 本文由用戶 ybfh9894 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！