重讀 JavaScript DOM 編程藝術（一）--DOM 的增刪改查
在好久以前讀過JavaScript Dom 編程藝術，如今重讀又有新的體會，遂記錄下。javascript
什麼是DOM
對於這種英文縮寫，首先看它的英文全拼--Document Object Model，即文檔對象模型。DOM把一份文檔表示爲一棵樹，這是理解DOM模型的關鍵。是由節點（node）構成的一棵節點樹。html
關於節點
DOM中有許多不一樣類型的節點。其中最重要的有三種：元素節點（element node），文本節點（text node）和屬性節點（attribute node）。java
元素節點
元素節點是DOM的原子，好比<body>，<p>和<ul>等。node
元素能夠包含其餘元素。惟一沒有被其餘元素包含的元素是<html>元素，它是DOM的根元素。編程
文本節點
好比<p>it is a test</p>，「it is a test」就是一個文本節點。數組
文本節點老是包含在元素節點內部。瀏覽器
「it is a test」是<p>節點內的第一個子節點，因此p.nodeVAlue將是一個null值，應該寫成p.childNode[0].nodeValue,才能獲得「it is a test」。函數
屬性節點
好比<p title="hehe">it is a test</p>，title="hehe"就是屬性節點，用來對元素作出更具體的描述。code
屬性老是被放在開始標籤裏，因此屬性節點老是被包含在元素節點中。htm
DOM操做
DOM操做無非是增刪改查，咱們先看查和改。
getElementById
這個方法返回一個與那個有着給定 id 屬性值的節點對應的對象。
這是DOM 查 的一個方法。
getElementsByTagName
這個方法返回一個對象數組，每一個對象對應着這個標籤的一個元素。
能夠使用數組的length方法，document.getElementsByTagName("li").length。
這是DOM 查 的一個方法。
getElementsByClassName
這是HTML5 DOM中新增的一個方法。接受類名參數返回一個具備相同類名的元素的數組，一樣能夠使用數組方法length。
只有較新的瀏覽器支持這個方法，書裏給出了代碼能夠本身爲爲老瀏覽器實現這個方法：
function getElementsByClassName(node, classname){
if(node.getElementsByClassName){
//使用現有方法
return node.getElementsByClassName(classname);
}else{
var results = new Array();
var elems = node.getElementsByTagName("*");
for(var i=0; i<elems.length; i++){
if(elems[i].className.indexOf(classname) != -1){
results[results.length] = elems[i];
}
}
return results;
}
}
這個函數接收兩個參數。第一個node表示DOM樹中的搜索起點，第二個classname就是要搜索的類名了。
這是DOM 查 的一個方法。
getAttribute
這個方法只有一個參數--打算查詢的屬性的名字。
這是DOM 查 的一個方法。並且是查詢屬性節點的方法。
setAttribute
這個方法接收兩個參數，第一個是要修改的屬性名字，第二個是作出的修改的值。
object.setAttribute(attribute, value)
這是DOM 改 的一個方法。而且是修改屬性節點的方法。
childNodes屬性
childNodes 屬性能夠用來獲取任何一個元素的全部子元素，它是一個包含這個元素所有子元素的數組，一樣，它支持length方法：
element.childNodes
nodeType屬性
每個節點都有 nodeType 屬性。這個屬性可讓咱們知道本身正在與哪種節點打交道。
node.nodeType
差勁的是 nodeType 的值並非文字，而是數字。
nodeType 屬性總共有12種可取值，但其中僅有3種具備使用價值：
元素節點 的 nodeType 屬性值是1。
屬性節點 的 nodeType 屬性值是2。
文本節點 的 nodeType 屬性值是3。
nodeValue 屬性
若是想改變一個文本節點的值，那就是用 DOM 提供的 nodeValue 屬性，它用來獲得（和設置）一個節點的值：
node.nodeValue
firstChild 和 lastChild 屬性
node.firstChild
這種寫法徹底等價於：
node.childNodes[0]
而相對應的
node.lastChild
等價於：
node.childNodes[node.childNodes.length - 1]
最後
上面記錄了基本的 DOM 的查和改的方法，以及一些 DOM 節點的屬性，下一篇文章會記錄 DOM 的 增 和 刪。
- 1. JavaScript DOM編程藝術（讀後感一）
- 2. 《JavaScript DOM 編程藝術》 閱讀摘要
- 3. 《javascript DOM編程藝術》讀後
- 4. DOM的增刪改查
- 5. javascript（十三） DOM的增刪查改
- 6. JavaScript -- JavaScript DOM 編程藝術(第2版)
- 7. 必讀之《JavaScript DOM編程藝術》重點記憶筆記-1
- 8. 《JavaScript DOM編程藝術(第2版)》【PDF】
- 9. 《JavaScript DOM 編程藝術》 學習筆記
- 10. 《JavaScript DOM編程藝術》學習整理
- 更多相關文章...
- • Hibernate實現增刪改查 - Hibernate教程
- • JavaScript 指南 - 網站建設指南
- • Docker容器實戰(一) - 封神Server端技術
- • JDK13 GA發佈：5大特性解讀
-
每一个你不满意的现在，都有一个你没有努力的曾经。