1.DOM-->Document Object Model

2.DOM定義了表示和修改文檔所需的方法。DOM對象即為宿主對象，有瀏覽器廠商定義，用來操作html和xml功能的一類對象的集合，也有人稱DOM是對HTML以及XML的標準編程接口。

DOM操作

• 對節點的增刪改查

  • 查

    • 查看元素節點

      • document代表整個文檔
      • document.getElementById() //元素id 在Ie8以下的瀏覽器，不區分id大小寫，而且也返回匹配name屬性的元素。
      • getElementsByTagName() // 標簽名
      • getElementByName(); //，需注意，只有部分標簽name可生效（表單，表單元素，img，iframe）
      • getElementsByClassName() // 類名 -> ie8和ie8以下的ie版本中沒有，可以多個class一起
      • querySelector() // css選擇器 在ie7和ie7以下的版本中沒有
      • querySelectorAll() // css選擇器 在ie7和ie7以下的版本中沒有

• 遍歷節點樹(包括不僅僅元素節點，還有文本節點等所有的節點)

  • parentNode -->父節點（最頂端的parentNode為#document）
  • childNodes -->子節點們
  • firstChild -->第一個子節點
  • lastChild -->最后一個子節點
  • nextSibling-->后一個兄弟節點
  • previousSibling -->前一個兄弟節點

• 基于元素節點樹的遍歷

  • parentElement -->返回當前元素的父元素節點（IE不兼容）
  • children -->只返回當前元素的元素子節點
  • node.childElementCount === node.children.length當前元素節點的子元素節點個數（IE不兼容）
  • firstElementChild -->返回的是第一個元素節點（IE不兼容）
  • lastElementChild -->返回的是最后一個元素節點（IE不兼容）
  • nextElementSibling/previousElementSibling -->返回后一個/前一個兄弟元素節點（IE不兼容）

• 節點的四個屬性

  • nodeName

    • 元素的標簽名，以大寫形式表示，只讀

  • nodeValue

    • Text節點或Comment注釋節點的文本內容，可讀寫

  • nodeType

    • 該節點的類型，只讀

  • attributes

    • Element節點的屬性集合

• 節點的類型

  • 元素節點 -- 1
  • 屬性節點 -- 2
  • 文本節點 -- 3
  • 注釋節點 -- 8
  • document -- 9
  • DocumentFragment -- 11

• 該節點一個方法Node.hasChildNodes() //返回true或者false

DOM樹結構

• getElementById方法定義在Document.prototype上，即Element節點上不能使用。
• getElementsByName方法定義在HTMLDocument.prototype上，即非html中的document以外不能使用(xml document,Element)
• getElementsByTagName方法定義在Document.prototype 和 Element.prototype上
• HTMLDocument.prototype定義了一些常用的屬性，body,head,分別指代HTML文檔中的標簽。
• Document.prototype上定義了documentElement屬性，指代文檔的根元素，在HTML文檔中，他總是指代元素
• getElementsByClassName、querySelectorAll、querySelector在Document,Element類中均有定義

//封裝函數，返回元素e的第n層祖先元素節點 <div><strong><span><i></i></span></strong> </div> <script>function retParent(elem,n){while(elem && n){elem=elem.parentElement;n--;}return elem;}var i=document.getElementsByTagName('i')[0]; <script> 復制代碼//編輯函數，封裝myChildren功能，解決以前部分瀏覽器的兼容性問題 Element.prototype.myChildren=function(){var child=this.childNodes;var len=child.length;var arr=[];for(var i=0;i<len;i++){if(child[i].nodeType==1){arr.push(child[i]);}}return arr; } var div=document.getElementsByTagName('div')[0]; 復制代碼

DOM節點創建

• 增
  • document.createElement();
  • document.createTextNode();
  • document.createComment();
  • document.createDocumentFragment();
• 插
  • PARENTNODE.appendChild();
  • PARENTNODE.insertBefore(a, b):
• 刪
  • parent.removeChild();
  • 銷毀自身child.remove（）；
• 替換
  • parent.replaceChild(new, origin);

Element節點的一些屬性

* innerHTML * innerText(火狐不兼容) / textContent(老版本IE不好使) 復制代碼

Element節點的一些方法

* ele.setAttribute() * ele.getAttribute(); 復制代碼 //封裝函數insertAfter();功能類似insertBefore(); Element.prototype.insertAfter=function(targetNode,afterNode){var beforeNode=afterNode.nextElmentSibling;if(beforeNode==null){this.appendChild(TargetNode);}else{this.insertBefore(targetNode,beforeNode);} } 復制代碼 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的js DOM的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。