JavaScript學習筆記之DOM基礎 2.4

2024-05-06 16:24:28

字體：大中小

來源：轉載

供稿：網友

DOM(Document Object Model)，即“文檔對象模型”。基于語義的邏輯結構，DOM將網頁內的元素與內容呈現為一個清晰、易讀的樹狀模型，下面小編把最近整理有關javascript筆記之DOM基礎分享給大家，有需要的朋友可以參考下

DOM的發展，與WEB標準化的大趨勢相關甚密。只有基于正確的語義邏輯，DOM才能正確地發揮其功用。如今，正確的語義結構、表現與內容分離等要求，都已經成為網頁設計中的基本要求。因此，在網頁前端開發中，DOM的存在，無疑是為表現層、行為層甚至內容層面的連接提供了一個絕佳的API，成為熱門的Ajax應用中不可或缺的組成部分。

一、平穩退化

1、概念

早期，在未使用JavaScript之前，網頁中的內容可以正常顯示出來，用戶可以通過外設(如鼠標)操控瀏覽到相關內容，這種瀏覽體驗對用戶而言可能并不理想。

根據這個需求，內容的提供方就有了合理化目標——那就是在不影響內容展示的前提下，使用JavaScript來改善用戶體驗，提高用戶粘性。

在這個標目中，有個非常明顯的條件，就是不能影響內容的正常展示，換言之，即使用戶的瀏覽器不支持JavaScript，也能保證用戶可以正常瀏覽。

2、方法

①將JavaScript與HTML分離

這是首先應該想到的，讓兩者分離，HTML就像回到早期未使用JavaScript之前的狀態，干爽如初啊。

譬如將element.onClick之類的事件處理函數寫進JavaScript中，與某函數進行綁定。

②對JavaScript中的方法進行檢測

之前提到的一些方法，如getElementById之類，都需要去判定該方法是否支持。

<script>

if(! document.getElementById) return false;

</script>

通過if語句這種方式來檢測是否支持該方法，如果支持，可以繼續，不支持，直接返回false，這樣就沒必要耽誤功夫了，也起到了性能優化的作用。

二、綁定onload事件

1、綁定緣由

一些函數需要在頁面加載完全之后才能有效執行，我們需要將函數綁定到window.onload這個事件上。

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>筱雨生 - 博客園</title>

<script>

function tagAttribute(){

var ali = document.getElementsByTagName('li');

for(var i = 0; i < ali.length; i++){

if(ali[i].firstChild.nodeType == 3){

alert(ali[i].childNodes[0].nodeValue);

}

}

}

window.onload = tagAttribute;

</script>

</head>

<body>

<h1>筱雨生</h1>

<p>時光飛逝，莫讓網絡蹉跎了歲月</p>

<div id="myBlog">

<ul>

<li title="JavaScript">JavaScript</li>

<li title="HTML">HTML</li>

<li title="CSS">CSS</li>

<li title="我的隨筆">我的隨筆</li>

<li></li>

</ul>

</div>

</body>

</html>

在上面這個實例中，如果不綁定window.onload，執行函數tagAttribute將會毫無意義。

還需要注意一點，綁定的是函數，而不是這個函數的值，所以后面不帶圓括號。

2、綁定方法

如果你只需要綁定一個函數，那么上面的方法完全可以輕松實現你的目的。

window.onload = myFunction;

如果是多個，也許你會去一個個的綁定，可是，這樣做的結果是只有最后一個函數才會被有效執行，關于這一點其實很好理解。

我們的目的是，不管頁面中加載完畢時執行多少個函數，這些函數都可以有效執行，也就是說，這些函數都被成功綁定window.onload事件。

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>筱雨生 - 博客園</title>

<script>

function addOnLoadEvent(func){

var oldonload = window.onload; // 把現有的window.onload事件處理函數的值存儲到變量oldonload

if(typeof window.onload != 'function'){ // 如果這個處理函數上還沒有綁定任何函數

window.onload = func; // 將這個函數綁定到window.onload事件

}else{

window.onload = function(){ // 如果這個處理函數已經綁定了函數，就把這個函數追加到指令的末尾

oldonload();

func();

}

}

}

//自定義函數 tagAttribute

//功能：獲取li標簽中的title值

function tagAttribute(){

var ali = document.getElementsByTagName('li');

for(var i = 0; i < ali.length; i++){

if(ali[i].childNodes[0].nodeType == 3){

alert(ali[i].childNodes[0].nodeValue);

}

}

}

addOnLoadEvent(tagAttribute); // 為tagAttribute函數綁定到window.onload事件

</script>

</head>

<body>

<h1>筱雨生</h1>

<p>時光飛逝，莫讓網絡蹉跎了歲月</p>

<div id="myBlog">

<ul>

<li title="JavaScript">JavaScript</li>

<li title="HTML">HTML</li>

<li title="CSS">CSS</li>

<li title="我的隨筆">我的隨筆</li>

<li></li>

</ul>

</div>

</body>

</html>

javascript學習筆記 Dom知識點總結

JavaScript的window對象對應著瀏覽器窗口本身，因此這個對象的屬性和方法統稱為BOM(瀏覽器對象模型)，如window.open(),window.location等。

JavaScript的document對象是指文檔對象模型，主要是處理網頁內容。DOM(Document Object Model)即文檔對象模型，是針對 HTML 和 XML 文檔的 API 。字母D指document(文檔)，字母O指object(對象)，字母指Model(模型)。DOM 描繪了一個層次化的節點樹。節點表示一個連接點，文檔是由節點構成的集合，DOM的節點主要分為三類：元素節點、文本節點(不是文本內容)、屬性節點。

獲取節點的名稱和類型

1.nodeName屬性用來獲取節點的名稱，文本節點返回#text,元素節點返回標簽名稱(此時等價于tagName)。語法：目標節點.nodeName

2.nodeType屬性用來獲取節點的類型，元素節點：1，屬性節點：2，文本節點：3。語法：目標節點.nodeType

3.nodeValue屬性用來獲取和設置節點的值。元素節點返回 null 。語法：目標節點.nodeValue

獲取元素節點的方式

1. document.getElementById

通過ID查找，返回唯一元素節點

2. document.getElementsByName

通過name屬性查找，返回元素節點數組

3. document.getElementsByTagName

通過標簽名稱查找，返回元素節點數組

以下三種方法屬于HTML5 DOM，并非所有瀏覽器支持(如某些低版本IE就不支持)，屬于高級方法

4. document.getElementsByClassName

通過class屬性的類名查找，返回元素節點數組

5. document.querySelector

通過selector條件獲取元素節點，只返回符合條件的第一個元素節點

6. document.querySelectorAll

通過selector條件獲取元素節點，返回所有符合條件的元素節點數組，多條件使用逗號分隔，表示要查找的元素必須符合所有逗號分隔的條件，如果一個元素只符合逗號分隔的條件中的一個，則不會被返回

小結： getElementById和querySelector只返回一個元素節點，而getElementsByName、getElementsByTagName、getElementsByClassName、querySelectorAll返回的是元素節點數組

節點指針

1.childNodes屬性用來獲取元素節點的子節點，返回節點數組。語法：父節點.childNodes;

2.children屬性可以用來獲取忽略了空白節點的有效節點(在某些瀏覽器上，空白符或換行符也是一個文本節點)。語法：父節點.children;

3.firstChild屬性可以用來獲取元素的第一個子節點，等價于 childNodes[0]。語法：父節點.firstChild;

3.lastChild屬性可以用來獲取元素的最后一個子節點，等價于 childNodes[childNodes.length-1]。語法：父節點.lastChild;

4.previousSibling屬性用來獲取目標節點的前一個兄弟節點。語法：目標節點.previousSibling;

5.nextSibling屬性用來獲取目標節點的后一個兄弟節點。語法：目標節點.nextSibling;

6.parentNode屬性用來獲取已知節點的父節點。語法：子節點.parentNode;

7.ownerDocument屬性用來當前節點所在文檔的根節點，等價于document。語法：目標節點.ownerDocument;

節點的操作

1.createElement方法用來創建元素節點。語法：document.createElement('元素標簽名稱');

2.createAttribute方法用來創建屬性節點。語法：document.createAttribute('屬性名稱');

3.createTextNode方法用來創建文本節點。語法：document.createTextNode('文本內容');

4.appendChild方法用來在目標節點的子節點的末尾添加一個子節點(可以是createElement創建的元素節點，也可以是createTextNode創建的文本節點)。語法：parent.appendChild(要插入的節點);

5.insertBefore方法用來在目標元素的前面插入一個新元素節點，此時的指針在目標元素的父級上。語法：parent.insertBefore(newElement,targetElement);

6.DOM中沒有insertAfter這個方法，但是可以通過以下方法來模擬insertAfter;

/*

* newElement : 要插入的新元素

* targetElement : 目標元素

*/

function insertAfter(newElement,targetElement){

var parent = targetElement.parentNode;

if(parent.lastChild == targetElement){

/*

如果目標元素是parent的最后一個子元素，則把新元素追加到parent元素上，

也就是在parent的子元素的末尾位置添加新元素

*/

parent.appendChild(newElement);

}else{

/*

否則，就把新元素添加到目標元素和目標元素的下一個兄弟元素之間

*/

parent.insertBefore(newElement,targetElement.nextSibling);

}

}

7.replaceChild方法用來替換一個元素節點，此時的指針在目標元素的父級上。語法：parent.replaceChild(replaceElement,targetElement);

8.cloneChild方法用來克隆一個元素節點，傳遞一個布爾參數，參數為true時表示復制當前節點及其所有子節點，參數為false時表示支付至當前節點。語法：目標元素.cloneChild(true|false);

9.removeChild方法用來刪除一個指定節點。語法：removeChild(要刪除的節點);

10.getAttribute方法用來獲取一個屬性的值。語法：目標元素.getAttribute(元素屬性名稱);

11.setAttribute方法用來設置一個屬性的值，沒有該屬性則創建。語法：目標元素.setAttribute(元素屬性名稱,屬性值);

12.removeAttribute方法用來刪除一個屬性節點。語法：目標元素.removeAttribute(要刪除的屬性名稱);

DOM操作內容

1.innerHTML屬性用來獲取和設置HTML內容。語法：元素節點.innerHTML 或者元素節點.innerHTML = 'HTML字符串';

2.innerText|textContent屬性用來獲取和設置文本內容。fireFox使用textContent來獲取和設置(注意兼容性)。語法：元素節點.innerText 或者元素節點.innerText = 'HTML字符串';

DOM操作樣式

1.style屬性用來獲取和設置元素的行內樣式。語法：element.style;style屬性只能獲取和設置行內樣式，對于如font-size這種樣式屬性，應該去掉 - 并且將 - 后面的第一個字母大寫，駝峰法來獲取和設置如：element.style.fontSize , element.style.backgroundColor

2.getComputedStyle全局方法用來獲取計算后的樣式，第一個參數是元素節點，第二個參數是類型，如:hover,:active等偽類，默認情況下傳 null ,某些IE版本使用currentStyle屬性來獲取 box.currentStyle。語法：window.getComputedStyle(元素，類型)

3.className屬性用來獲取和設置元素的樣式名稱。語法：element.className

4.自定義的 addClass() | hasClass() | removeClass() 方法

//元素是否含有某樣式

function hasClass(element,className){

return !!element.className.match(new RegExp('(//s|^)'+className+'(//s|$)'));

}

//向元素添加新樣式

function addClass(element,className){

if(hasClass(element,className) == false){

element.className += ' '+className;

}

}

//移除元素的指定樣式

function removeClass(element,className){

var currentClass = element.className;

if(hasClass(element,className)){

currentClass = currentClass.replace(new RegExp('(//s|^)'+className+'(//s|$)'),' ');

//去除空格

currentClass = currentClass.replace(/(^/s*)|(/s*$)/g,'');

element.className = currentClass;

}

}