本文爲叩丁狼高級講師原創文章,轉載請註明出處。
在之前的文章中,學習過了DOM的訪問方式,其中也把DOM相關的概念進行了學習,其實DOM的內容還有很多,所以本文將會繼續學習DOM操作相關的內容,DOM操作涉及到的操作有:增、刪、改、查,而查這方面的內容其實就是上一次所寫的“訪問方式”。
##DOM的增加
DOM操作中增指的是增加節點,分爲兩部分:創建節點和插入節點。
###創建節點
創建節點中常用的API方法主要有:
document.createElement()
:創建指定的HTML元素document.createTextNode()
:創建文本節點document.createDocumentFrame()
:創建文檔片段document.createAttribute()
:創建節點屬性node.cloneNode()
:克隆節點
###插入節點###
插入節點常用的API方法主要有:
node.appendChild()
:末尾追加一個新節點node.insertBefore()
:插入一個新節點
<div id="div1">
<p id="p1">這是一個段落</p>
<p id="p2">這是另一個段落</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("這是新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
例子解釋:
這段代碼創建新的 <p>
元素:
var para=document.createElement("p");
如需向 <p>
元素添加文本,您必須首先創建文本節點。這段代碼創建了一個文本節點:
var node=document.createTextNode("這是新段落。");
然後您必須向 <p>
元素追加這個文本節點:
para.appendChild(node);
最後您必須向一個已有的元素追加這個新元素。
這段代碼找到一個已有的元素:
var element=document.getElementById("div1");
這段代碼向這個已有的元素追加新元素:
element.appendChild(para);
####關於document.createAttribute()
document.createAttribute()
方法創建並返回一個新的屬性節點。但是這個方法不是很常用,如果涉及到創建屬性,一般使用node.setAttribute()
。
<div id="div1">
<p id="p1">這是一個段落</p>
<p id="p2">這是另一個段落</p>
</div>
var node = document.getElementById('div1');
var newAttr = document.createAttribute('title'); //創建一個新的title屬性;
newAttr .nodeValue = 'Hello world!'; //title屬性的值是:Hello world!
node.setAttributeNode(attr); //運用到對應的元素節點上
####關於node.cloneNode()
node.cloneNode(deep)
方法返回該節點的一個副本,deep
可選,表明是否採用深度克隆,如果爲true
,則該節點的所有後代節點也都會被克隆,否則,只克隆該節點本身。
<div id="div1">
<p id="p1">這是一個段落</p>
<p id="p2">這是另一個段落</p>
</div>
var node = document.getElementById('div1');
var cloneNode = node.cloneNode(true); //克隆div1整個節點;
cloneNode.id = "div2"; //修改克隆的節點id名稱爲div2;
document.body.appendChild(cloneNode); //在網頁中追加克隆的節點;
##DOM的刪除
DOM節點的刪除主要API是node.removeChild()
;可以使用parentNode.removeChild(child)
刪除指定父節點parentNode
的一個子節點child
,並返回被刪除的節點。
注意事項:這個方法是要在被刪除的節點的父節點上調用的,而不是在被刪除節點上調用的,如果參數節點不是當前節點的子節點,removeChild
方法將報錯。
<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
例子解釋:
這個 HTML 文檔含有擁有兩個子節點(兩個<p>
元素)的 <div>
元素:
<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>
找到 id="div1"
的元素:
var parent=document.getElementById("div1");
找到id="p1" 的
元素:
var child=document.getElementById("p1");
從父元素中刪除子元素:
parent.removeChild(child);
##DOM的修改
修改節點常用的API方法主要有:
appendChild()
:末尾追加一個新節點insertBefore()
:插入一個新節點replaceChild()
:替換節點
注意事項:以上幾個方法都是操作的某個節點的子節點,也就是說,要使用這幾個方法必須先取得父節點。另外並不是所有節點都有子節點,如果在不支持子節點的節點上,調用了這些方法,將會導致錯誤。
##DOM的查找
DOM節點中的查主要包括:查找元素和節點查找。
###查找元素
getElementById()
— 通過ID訪問;getElementsByClassName()
— 通過類名訪問;getElementsByTagName()
— 通過標籤名稱訪問;querySelector()
— 通過CSS選擇器訪問(單個);querySelectorAll()
— 通過CSS選擇器訪問 (所有);
關於這一節的內容,可以訪問上一篇文章:JavaScript-DOM訪問方式
###節點查找
所有的節點都有這些屬性,都是可以用於訪問相關的node節點:
Node.childNodes
: 訪問一個單元素下所有的直接子節點元素,可以是一個可循環的類數組對象。該節點集合可以保護不同的類型的子節點(比如text節點或其他元素節點)。Node.firstChild
: 與childNodes數組的第一個項(Element.childNodes[0]
)是同樣的效果,僅僅是快捷方式。Node.lastChild
: 與childNodes數組的最後一個項(Element.childNodes[Element.childNodes.length-1]
)是同樣的效果,僅僅是快捷方式。Node.parentNode
: 訪問當前節點的父節點,父節點只能有一個,祖節點可以用Node.parentNode.parentNode
的形式來訪問。Node.nextSibling
: 訪問DOM樹上與當前節點同級別的下一個節點。Node.previousSibling
: 訪問DOM樹上與當前節點同級別的上一個節點。
##總結
DOM操作在JavaScript還是很重要的,簡單點說,所有的交互操作都是基於DOM來操作的。而DOM中的操作,最爲熟悉的就是對DOM的增、刪、改、查。今天的內容也就圍繞着這幾個方面展開學習。
參考資料:http://www.w3school.com.cn/htmldom/dom_intro.asp