DOM

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

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

節(jié)點及其類型

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

Node接口的特性和方法

查找元素節(jié)點

getElementById()

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

getElementsByTagName()

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

查看是否存在子節(jié)點

hasChildNodes()

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

DOM 屬性 – nodeName

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

• 如果給定節(jié)點是一個元素節(jié)點或?qū)傩怨?jié)點，nodeName 屬性將返回這個元素的名字。
• 如果給定節(jié)點是一個文本節(jié)點，nodeName 屬性將返回內(nèi)容為 #text 的字符串。
  nodeName 是一個只讀屬性。

DOM 屬性 – nodeType

nodeType：返回一個整數(shù)，這個數(shù)值代表著給定節(jié)點的類型。

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

DOM 屬性 – nodeValue

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

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

替換節(jié)點

replaceChild()

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

查找屬性節(jié)點

getAttribute()

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

設(shè)置屬性節(jié)點

setAttribute()

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

創(chuàng)建新元素節(jié)點

createElement()

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

創(chuàng)建新文本節(jié)點

createTextNode()

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

插入節(jié)點(1)

appendChild()

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

插入節(jié)點(2)

insertBefore()

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

插入節(jié)點(3)

DOM 沒有提供 insertAfter() 方法

刪除節(jié)點

removeChild()

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

遍歷節(jié)點樹

ChildNodes：返回一個數(shù)組，這個數(shù)組由給定元素節(jié)點的子節(jié)點構(gòu)成：
var nodeList = node.childNodes;

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

獲取第一個子節(jié)點

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

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

獲取最后一個子節(jié)點

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

innerHTML屬性

瀏覽器幾乎都支持該屬性，但不是 DOM 標準的組成部分。
innerHTML 屬性可以用來讀，寫某給定元素里的 HTML 內(nèi)容。
代碼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>";

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。