DOM

DOM：Document Object Model(文本對象模型)

• D：文檔 – html 文檔 或 xml 文檔
• O：對象 – document 對象的屬性和方法
• M：模型
• DOM 是針對xml(html)的基于樹的API。
• DOM樹:節點（node）的層次。
• DOM 把一個文檔表示為一棵家譜樹（父，子，兄弟）
• DOM定義了Node的接口以及許多種節點類型來表示XML節點的多個方面

節點及其類型

節點（node）：來源于網絡理論，代表網絡中的一個連接點。網絡是由節點構成的集合
<p title="a gentle reminder">Don't forget to buy this suff.</p>

Node接口的特性和方法

查找元素節點

getElementById()

• 尋找一個有著給定 id 屬性值的元素，返回值是一個有著給定 id 屬性值的元素節點。如果不存在這樣的元素，它返回 null。
  var element = document.getElementById(ID);
• 該方法只能用于 document 對象

getElementsByTagName()

• 尋找有著給定標簽名的所有元素，這個方法將返回一個節點集合，這個集合可以當作一個數組來處理。這個集合的 length 屬性等于當前文檔里有著給定標簽名的所有元素的總個數。
  var elements = element.getElementsByTagName(tagName);
• 該方法不必非得用在整個文檔上。它也可以用來在某個特定元素的子節點當中尋找有著給定標簽名的元素。
  var container = document.getElementById(“content”);
  var paras = container.getElementsByTagName(“p”);
  alert(paras.length);

查看是否存在子節點

hasChildNodes()

• 該方法用來檢查一個元素是否有子節點，返回值是 true 或 false.
  var booleanValue = element.hasChildNodes();
• 文本節點和屬性節點不可能再包含任何子節點，所以對這兩類節點使用 hasChildNodes 方法的返回值永遠是 false.
• 如果 hasChildNodes 方法的返回值是 false，則 childNodes,firstChild,lastChild 將是空數組和空字符串。

DOM 屬性 – nodeName

文檔里的每個節點都有以下屬性。
nodeName:一個字符串，其內容是給定節點的名字。
var name = node.nodeName;

• 如果給定節點是一個元素節點或屬性節點，nodeName 屬性將返回這個元素的名字。
• 如果給定節點是一個文本節點，nodeName 屬性將返回內容為 #text 的字符串。
  nodeName 是一個只讀屬性。

DOM 屬性 – nodeType

nodeType：返回一個整數，這個數值代表著給定節點的類型。

• nodeType 屬性返回的整數值對應著 12 種節點類型：
  Node.ELEMENT_NODE (1) – 元素節點
  Node.ATTRIBUTE_NODE (2) – 屬性節點
  Node.TEXT_NODE (3) – 文本節點
  …
• nodeType 是個只讀屬性

DOM 屬性 – nodeValue

nodeValue：返回給定節點的當前值（字符串）

• 如果給定節點是一個屬性節點，返回值是這個屬性的值。
• 如果給定節點是一個文本節點，返回值是這個文本節點的
  內容。
• 如果給定節點是一個元素節點，返回值是 null
• nodeValue 是一個 讀/寫 屬性，但不能對元素節點的
  nodeValue 屬性設置值，但可以為文本節點的 nodeValue
  屬性設置一個值。
  var message = document.getElementById(“fineprint”);
  if(message.firstChild.nodeType == 3)
  message.firstChild.nodeValue = “this might work”;

替換節點

replaceChild()

• 把一個給定父元素里的一個子節點替換為另外一個子節點
  var reference = element.replaceChild(newChild,oldChild);
• 返回值是一個指向已被替換的那個子節點的引用指針。
• 如果被插入的子節點還有子節點，則那些子節點也被插入到目標節點中
  var container = document.getElementById(“content”);
  var message = document.getElementById(“fineprint”);
  var announcement = document.getElementById(“headline”);
  var oldmessage = container.replaceChild(announcement,message);
  container.appendChild(oldmessage);

查找屬性節點

getAttribute()

• 返回一個給定元素的一個給定屬性節點的值
  var attributeValue = element.getAttribute(attributeName);
• 給定屬性的名字必須以字符串的形式傳遞給該方法。
• 給定屬性的值將以字符串的形式返回，如果給定屬性不存在，getAttribute() 將返回一個空字符串.

設置屬性節點

setAttribute()

• 將給定元素節點添加一個新的屬性值或改變它的現有屬性的值。
  element.setAttribute(attributeName,attributeValue);
• 屬性的名字和值必須以字符串的形式傳遞給此方法
• 如果這個屬性已經存在，它的值將被刷新；如果不存在，setAttribute()方法將先創建它再為其賦值。
  var para = document.createElement(“p”);
  para.setAttribute(“id”,”fineprint”);
  var container = document.getElementById(“content”);
  container.appendChild(para);

創建新元素節點

createElement()

• 按照給定的標簽名創建一個新的元素節點。方法只有一個參數：將被創建的元素的名字，是一個字符串.
  var reference = document.createElement(element);
• 方法的返回值：是一個指向新建節點的引用指針。返回值是一個元素節點，所以它的 nodeType 屬性值等于 1。
• 新元素節點不會自動添加到文檔里，新節點沒有 nodeParent 屬性，它只是一個存在于 JavaScript 上下文的對象.
  var oP = document.createElement(“p”);

創建新文本節點

createTextNode()

• 創建一個包含著給定文本的新文本節點。這個方法的返回值是一個指向新建文本節點引用指針。
  var reference = document.createTextNode(text);
• 方法只有一個參數：新建文本節點所包含的文本字符串
• 方法的返回值：是一個指向新建節點的引用指針。它是一個文本節點，所以它的 nodeType 屬性等于 3.
• 新元素節點不會自動添加到文檔里，新節點沒有 nodeParent 屬性
  var oText = document.createTextNode(“Hello World”);

插入節點(1)

appendChild()

• 為給定元素增加一個子節點：var reference = element.appendChild(newChild).
  給定子節點 newChild 將成為給定元素節點 element 的最后一個子節點。
• 方法的返回值是一個指向新增子節點的引用指針。
• 該方法通常與 createElement() createTextNode() 配合使用
  var para = document.createElement(“p”);
  var message = document.createTextNode(“Hello World”);
  para.appendChild(message);
  document.body.appendChild(para);
• 新節點可以被追加給文檔中的任何一個元素

插入節點(2)

insertBefore()

• 把一個給定節點插入到一個給定元素節點的給定子節點的前面
  var reference = element.insertBefore(newNode,targetNode);
  節點 newNode 將被插入到元素節點 element 中并出現在節點 targetNode 的前面.
• 節點 targetNode 必須是 element 元素的一個子節點。
• 該方法通常與 createElement() 和 createTextNode() 配合使用
  var container = document.getElementById(“content”);
  var message = document.getElementById(“fineprint”);
  var para = document.createElement(“p”);
  container.insertBefore(para,message);

插入節點(3)

DOM 沒有提供 insertAfter() 方法

刪除節點

removeChild()

• 從一個給定元素里刪除一個子節點
  var reference = element.removeChild(node);
• 返回值是一個指向已被刪除的子節點的引用指針。
• 某個節點被 removeChild() 方法刪除時，這個節點所
  包含的所有子節點將同時被刪除。
  var container = document.getElementById(“content”);
  var message = document.getElementById(“fineprint”);
  container.removeChild(message);
• 如果想刪除某個節點，但不知道它的父節點是哪一個，parentNode 屬性可以幫忙。
  var message = document.getElementById(“fineprint”);
  var container = message.parentNode;
  container.removeChild(message);

遍歷節點樹

ChildNodes：返回一個數組，這個數組由給定元素節點的子節點構成：
var nodeList = node.childNodes;

• 文本節點和屬性節點都不可能再包含任何子節點，所以它們的 ChildNodes 屬性永遠會返回一個空數組。
• 如果想知道某個元素有沒有子節點，可以用 hasChildNodes 方法。
• 如果想知道某個元素有多少個子節點，可以用 childNodes 數組的 length 屬性。
• childNodes 屬性是一個只讀屬性。

獲取第一個子節點

firstChild：該屬性返回一個給定元素節點的第一個子節點，返回這個節點對象的指針。
var reference = node.firstChild;

• 文本節點和屬性節點都不可能包含任何子節點，所以它們的 firstChild 屬性永遠會返回 null。
• 某個元素的 firstChild 屬性等價于這個元素的 childNodes 節點集合中的第一個節點，即：
  var reference = node.ChildNodes[0];
• firstChild 屬性是一個只讀屬性。

獲取最后一個子節點

• lastChild：對應 firstChild 的一個屬性。
• nextSibling: 返回一個給定節點的下一個子節點。
• parentNode：返回一個給定節點的父節點。
  
  • parentNode 屬性返回的節點永遠是一個元素節點，因為只有元素節點才有可能包含子節點。
  • document 節點的沒有父節點。
• previousSibling：返回一個給定節點的上一個子節點

innerHTML屬性

瀏覽器幾乎都支持該屬性，但不是 DOM 標準的組成部分。
innerHTML 屬性可以用來讀，寫某給定元素里的 HTML 內容。
代碼1：

var testdiv = document.getElementById("testdiv"); alert(testdiv.innerHTML);

代碼2：

var testdiv = document.getElementById("testdiv"); testdiv.innerHTML = "<p>I inserted<em>this</em> content.</p>";

總結

以上是生活随笔為你收集整理的尚硅谷_JS DOM编程_学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

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