DOM基礎操作實戰程式碼
阿新 • • 發佈:2018-11-25
對於已經講解給大家的DOM實戰,我今天給大家幾個實戰程式碼,可以讓大家加深對此的理解!
1.用DOM動態生成這樣一個結構:
1 <div class=”example”> 2 3 <p class=”slogan”>HelloWorld</p> 4 5 </div>
我認為中規中矩的寫法是這個樣子的:
1 var div = document.createElement(‘div’), 2 p = document.createElement(‘p’), 3 text = document.create(‘HelloWorld’);4 div.setAttribute(‘class’, ‘example’); 5 p.setAttribute(‘class’, ‘slogan’); 6 p.appendChild(text); 7 div.appendChild(p); 8 document.body.append(div);
JavaScript; “複製程式碼”); “檢視純文字程式碼”); “返回程式碼高亮”)
• 不過這裡有點小提示,節點的className屬性可以讀寫操作class。
因此這裡我們為標籤賦類名的值的時候可以不用setAttribute,可以直接用className。
JavaScript; “複製程式碼”); “檢視純文字程式碼”); “返回程式碼高亮”)
1 div.className = ‘example’; 2 p.className = ‘slogan’;
不過,還有一個最取巧的辦法,那就是直接用innerHTML。
JavaScript; “複製程式碼”); “檢視純文字程式碼”); “返回程式碼高亮”)
1 div.innerHTML = <p class=“slogan”>HelloWorld</p>
2.封裝函式InsertAfter();功能類似insertBefore,直接在原型鏈上程式設計,可以忽略老版本的瀏覽器。
程式碼:
1 Element.insertAfter = function (targetNode, afterNode) { 2 var nextSib = after.nextElementSibling; 3 if(this.children.length <= 1 || !nextSib) { 4 this.appendChild(targetNode); 5 }else { 6 this.insertBefore(targetNode, nextSibling); 7 } 8 }JavaScript; “複製程式碼”); “檢視純文字程式碼”); “返回程式碼高亮”)
這裡是利用了原生的insertBefore方法,我們檢測當只有一個子元素或者我們要找的元素就是最後一個,那麼直接呼叫appendChild方法就可以,否則就找到要找的元素的下一個,然後把它的下一個元素當做insert的元素呼叫insertBefore方法就可以了。
3.封裝remove()函式,使得child.remove()可以銷燬自身。
看題目的要求就是要在原型鏈上程式設計。
程式碼:
1 Element.prototype.remove = function () { 2 var parent = this.parentNode; 3 parent.removeChild(this); 4 }
JavaScript; “複製程式碼”); “檢視純文字程式碼”); “返回程式碼高亮”)
這個問題的程式碼其實很簡單,只要找到這個元素的父級,然後讓父級刪除掉這個元素就可以了。
4.將目標節點內部的節點順序逆序。
eg: <div><p></p><a></a></div> —>
<div><a></a><p></p></div>
對於這個題目,我的做法是利用我們插入的元素如果是本身就存在的,那麼就會剪下到新的位置上這個特性來做的。
程式碼:
Element.prototype.reverseElement = function(){ var len = this.childNodes.length, child, first = this.firstChild; for (var i = 0; i < len - 1; i++){ child = this.lastChild; this.insertBefore(child, first); } }JavaScript; “複製程式碼”); “檢視純文字程式碼”); “返回程式碼高亮”)