JavaScript學習筆記之DOM基礎(chǔ) 2.4
DOM的發(fā)展，與WEB標準化的大趨勢相關(guān)甚密。只有基于正確的語義邏輯，DOM才能正確地發(fā)揮其功用。如今，正確的語義結(jié)構(gòu)、表現(xiàn)與內(nèi)容分離等要求，都已經(jīng)成為網(wǎng)頁設計中的基本要求。因此，在網(wǎng)頁前端開發(fā)中，DOM的存在，無疑是為表現(xiàn)層、行為層甚至內(nèi)容層面的連接提供了一個絕佳的API，成為熱門的Ajax應用中不可或缺的組成部分。
一、平穩(wěn)退化
1、概念
早期，在未使用JavaScript之前，網(wǎng)頁中的內(nèi)容可以正常顯示出來，用戶可以通過外設（如鼠標）操控瀏覽到相關(guān)內(nèi)容，這種瀏覽體驗對用戶而言可能并不理想。
根據(jù)這個需求，內(nèi)容的提供方就有了合理化目標——那就是在不影響內(nèi)容展示的前提下，使用JavaScript來改善用戶體驗，提高用戶粘性。
在這個標目中，有個非常明顯的條件，就是不能影響內(nèi)容的正常展示，換言之，即使用戶的瀏覽器不支持JavaScript，也能保證用戶可以正常瀏覽。
2、方法
①將JavaScript與HTML分離
這是首先應該想到的，讓兩者分離，HTML就像回到早期未使用JavaScript之前的狀態(tài)，干爽如初啊。
譬如將element.onClick之類的事件處理函數(shù)寫進JavaScript中，與某函數(shù)進行綁定。
②對JavaScript中的方法進行檢測
之前提到的一些方法，如getElementById之類，都需要去判定該方法是否支持。
<script> if(! document.getElementById) return false; </script>
通過if語句這種方式來檢測是否支持該方法，如果支持，可以繼續(xù)，不支持，直接返回false，這樣就沒必要耽誤功夫了，也起到了性能優(yōu)化的作用。
二、綁定onload事件
1、綁定緣由
一些函數(shù)需要在頁面加載完全之后才能有效執(zhí)行，我們需要將函數(shù)綁定到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>時光飛逝，莫讓網(wǎng)絡蹉跎了歲月</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，執(zhí)行函數(shù)tagAttribute將會毫無意義。
還需要注意一點，綁定的是函數(shù)，而不是這個函數(shù)的值，所以后面不帶圓括號。
2、綁定方法
如果你只需要綁定一個函數(shù)，那么上面的方法完全可以輕松實現(xiàn)你的目的。
window.onload = myFunction;
如果是多個，也許你會去一個個的綁定，可是，這樣做的結(jié)果是只有最后一個函數(shù)才會被有效執(zhí)行，關(guān)于這一點其實很好理解。
我們的目的是，不管頁面中加載完畢時執(zhí)行多少個函數(shù)，這些函數(shù)都可以有效執(zhí)行，也就是說，這些函數(shù)都被成功綁定window.onload事件。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>筱雨生 - 博客園</title>
<script>
function addOnLoadEvent(func){
var oldonload = window.onload; // 把現(xiàn)有的window.onload事件處理函數(shù)的值存儲到變量oldonload
if(typeof window.onload != 'function'){ // 如果這個處理函數(shù)上還沒有綁定任何函數(shù)
window.onload = func; // 將這個函數(shù)綁定到window.onload事件
}else{
window.onload = function(){ // 如果這個處理函數(shù)已經(jīng)綁定了函數(shù)，就把這個函數(shù)追加到指令的末尾
oldonload();
func();
}
}
}
//自定義函數(shù) 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函數(shù)綁定到window.onload事件
</script>
</head>
<body>
<h1>筱雨生</h1>
<p>時光飛逝，莫讓網(wǎng)絡蹉跎了歲月</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知識點總結(jié)
JavaScript的window對象對應著瀏覽器窗口本身，因此這個對象的屬性和方法統(tǒng)稱為BOM（瀏覽器對象模型），如window.open(),window.location等。
JavaScript的document對象是指文檔對象模型，主要是處理網(wǎng)頁內(nèi)容。DOM（Document Object Model）即文檔對象模型，是針對 HTML 和 XML 文檔的 API 。字母D指document（文檔），字母O指object（對象），字母指Model（模型）。DOM 描繪了一個層次化的節(jié)點樹。節(jié)點表示一個連接點，文檔是由節(jié)點構(gòu)成的集合，DOM的節(jié)點主要分為三類：元素節(jié)點、文本節(jié)點（不是文本內(nèi)容）、屬性節(jié)點。
獲取節(jié)點的名稱和類型
1.nodeName屬性用來獲取節(jié)點的名稱，文本節(jié)點返回#text,元素節(jié)點返回標簽名稱（此時等價于tagName）。語法：目標節(jié)點.nodeName
2.nodeType屬性用來獲取節(jié)點的類型，元素節(jié)點：1，屬性節(jié)點：2，文本節(jié)點：3。語法：目標節(jié)點.nodeType
3.nodeValue屬性用來獲取和設置節(jié)點的值。元素節(jié)點返回 null 。語法：目標節(jié)點.nodeValue
獲取元素節(jié)點的方式
1. document.getElementById
通過ID查找，返回唯一元素節(jié)點
2. document.getElementsByName
通過name屬性查找，返回元素節(jié)點數(shù)組
3. document.getElementsByTagName
通過標簽名稱查找，返回元素節(jié)點數(shù)組
以下三種方法屬于HTML5 DOM，并非所有瀏覽器支持（如某些低版本IE就不支持），屬于高級方法
4. document.getElementsByClassName
通過class屬性的類名查找，返回元素節(jié)點數(shù)組
5. document.querySelector
通過selector條件獲取元素節(jié)點，只返回符合條件的第一個元素節(jié)點
6. document.querySelectorAll
通過selector條件獲取元素節(jié)點，返回所有符合條件的元素節(jié)點數(shù)組，多條件使用逗號分隔，表示要查找的元素必須符合所有逗號分隔的條件，如果一個元素只符合逗號分隔的條件中的一個，則不會被返回
小結(jié)： getElementById和querySelector只返回一個元素節(jié)點，而getElementsByName、getElementsByTagName、getElementsByClassName、querySelectorAll返回的是元素節(jié)點數(shù)組
節(jié)點指針
1.childNodes屬性用來獲取元素節(jié)點的子節(jié)點，返回節(jié)點數(shù)組。語法：父節(jié)點.childNodes;
2.children屬性可以用來獲取忽略了空白節(jié)點的有效節(jié)點（在某些瀏覽器上，空白符或換行符也是一個文本節(jié)點）。語法：父節(jié)點.children;
3.firstChild屬性可以用來獲取元素的第一個子節(jié)點，等價于 childNodes[0]。語法：父節(jié)點.firstChild;
3.lastChild屬性可以用來獲取元素的最后一個子節(jié)點，等價于 childNodes[childNodes.length-1]。語法：父節(jié)點.lastChild;
4.previousSibling屬性用來獲取目標節(jié)點的前一個兄弟節(jié)點。語法：目標節(jié)點.previousSibling;
5.nextSibling屬性用來獲取目標節(jié)點的后一個兄弟節(jié)點。語法：目標節(jié)點.nextSibling;
6.parentNode屬性用來獲取已知節(jié)點的父節(jié)點。語法：子節(jié)點.parentNode;
7.ownerDocument屬性用來當前節(jié)點所在文檔的根節(jié)點，等價于document。語法：目標節(jié)點.ownerDocument;
節(jié)點的操作
1.createElement方法用來創(chuàng)建元素節(jié)點。語法：document.createElement('元素標簽名稱');
2.createAttribute方法用來創(chuàng)建屬性節(jié)點。語法：document.createAttribute('屬性名稱');
3.createTextNode方法用來創(chuàng)建文本節(jié)點。語法：document.createTextNode('文本內(nèi)容');
4.appendChild方法用來在目標節(jié)點的子節(jié)點的末尾添加一個子節(jié)點（可以是createElement創(chuàng)建的元素節(jié)點，也可以是createTextNode創(chuàng)建的文本節(jié)點）。語法：parent.appendChild(要插入的節(jié)點);
5.insertBefore方法用來在目標元素的前面插入一個新元素節(jié)點，此時的指針在目標元素的父級上。語法：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方法用來替換一個元素節(jié)點，此時的指針在目標元素的父級上。語法：parent.replaceChild(replaceElement,targetElement);
8.cloneChild方法用來克隆一個元素節(jié)點，傳遞一個布爾參數(shù)，參數(shù)為true時表示復制當前節(jié)點及其所有子節(jié)點，參數(shù)為false時表示支付至當前節(jié)點。語法：目標元素.cloneChild(true|false);
9.removeChild方法用來刪除一個指定節(jié)點。語法：removeChild(要刪除的節(jié)點);
10.getAttribute方法用來獲取一個屬性的值。語法：目標元素.getAttribute(元素屬性名稱);
11.setAttribute方法用來設置一個屬性的值，沒有該屬性則創(chuàng)建。語法：目標元素.setAttribute(元素屬性名稱,屬性值);
12.removeAttribute方法用來刪除一個屬性節(jié)點。語法：目標元素.removeAttribute(要刪除的屬性名稱);
DOM操作內(nèi)容
1.innerHTML屬性用來獲取和設置HTML內(nèi)容。語法：元素節(jié)點.innerHTML 或者 元素節(jié)點.innerHTML = 'HTML字符串';
2.innerText|textContent屬性用來獲取和設置文本內(nèi)容。fireFox使用textContent來獲取和設置（注意兼容性）。語法：元素節(jié)點.innerText 或者 元素節(jié)點.innerText = 'HTML字符串';
DOM操作樣式
1.style屬性用來獲取和設置元素的行內(nèi)樣式。語法：element.style;style屬性只能獲取和設置行內(nèi)樣式，對于如font-size這種樣式屬性，應該去掉 - 并且將 - 后面的第一個字母大寫，駝峰法來獲取和設置 如：element.style.fontSize , element.style.backgroundColor
2.getComputedStyle全局方法用來獲取計算后的樣式，第一個參數(shù)是元素節(jié)點，第二個參數(shù)是類型，如: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;
}
}
DOM操作位置和大小
1.clientWidth屬性用來獲取元素的實際寬度，該值受滾動條和內(nèi)邊距影響，外邊距和border不會影響。語法：
element.clientWidth;
2.clientHeight屬性用來獲取元素的實際高度，該值受滾動條和內(nèi)邊距影響，外邊距和border不會影響。語法：
element.clientHeight;
3.offsetWidth屬性用來獲取元素的實際寬度，該值受邊框和內(nèi)邊距影響，外邊距和滾動條不會影響。語法：
element.offsetWidth;
4.offsetHeight屬性用來獲取元素的實際高度，該值受邊框和內(nèi)邊距影響，外邊距和滾動條不會影響。語法：
element.offsetHeight;
5.offsetTop和offsetLeft屬性用來獲取元素相對于父級的位置。該值受外邊距影響。語法：element.offsetTop ||
element.offsetLeft;
6.scrollTop和scrollLeft屬性用來獲取滾動條被隱藏的區(qū)域大小，也可設置定位到該區(qū)域（比如返回頂部）。語法：
element.scrollTop || element.scrollLeft || element.scrollTop = 0;
常用到的簡潔快速的document屬性和方法
document.title 用來獲取文檔標題
document.domain 用來獲取當前域名
document.URL 用來獲取當前url路徑
document.forms 獲取表單集合
document.images 獲取圖片集合
document.body 獲取body元素節(jié)點
document.compatMode 識別文檔模式
- 詳解JavaScript操作HTML DOM的基本方式
- 高性能JavaScript DOM編程（1）
- javascript將DOM節(jié)點添加到文檔的方法實例分析
- 淺談javascript中的DOM方法
- 詳解JavaScript對W3C DOM模版的支持情況
- javascript實現(xiàn)dom動態(tài)創(chuàng)建省市縱向列表菜單的方法
- javascript基于DOM實現(xiàn)權(quán)限選擇實例分析
- javascript中DOM復選框選擇用法實例
- JavaScript獲取DOM元素的11種方法總結(jié)
- JavaScript DOM元素尺寸和位置
- JavaScript簡單遍歷DOM對象所有屬性的實現(xiàn)方法
相關(guān)文章
基于javascript實現(xiàn)彩票隨機數(shù)生成（簡單版）
這篇文章主要介紹了基于javascript實現(xiàn)彩票隨機數(shù)生成的相關(guān)資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-01-01
下面小編就為大家?guī)硪黄猨s 發(fā)布訂閱模式的實例講解。小編覺得挺不錯的，現(xiàn)在就想給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
this對于一些有經(jīng)驗的JavaScript開發(fā)者來說是一種非常復雜的機制。并且很多開發(fā)者對于this的理解并不是很清晰，導致在面試的時候經(jīng)常受挫。今天我們就來看一看這個this真的有那么難嗎2023-02-02
html+css+js實現(xiàn)簡易版ChatGPT聊天機器人
OpenAI的一款聊天機器人模型ChatGPT爆火，本篇文章用一百行html+css+js代碼給大家制作一款簡易的聊天機器人。2023-02-02
數(shù)組是一段線性分配的內(nèi)存，它通過整數(shù)去計算偏移并訪問其中的元素。數(shù)組是很快的數(shù)據(jù)結(jié)構(gòu)，但不幸的是，Javascript并沒有像這種數(shù)組一樣的數(shù)據(jù)結(jié)構(gòu)。2009-12-12
for-in遍歷方式的循環(huán)計數(shù)器是字符串類型，遍歷對象時為對象屬性/方法名，遍歷數(shù)組時為數(shù)組元素下標索引，與普通的for循環(huán)不同,需要的朋友可以參考下2014-02-02
本文主要介紹了Pixi.js實現(xiàn)可視化圖形編輯器的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-03-03
getComputedStyle與currentStyle獲取樣式(style/class)
通過document.getElementById(element).style.xxx可以獲取元素的樣式信息但是對于通過class屬性引用的外部樣式表就獲取不到了，感興趣的朋友可以了解下2013-03-03
ES6提供了更接近面向?qū)ο?注意:javascript本質(zhì)上是基于對象的語言)語言的寫法,引入了Class(類)這個概念,作為對象的模板,下面這篇文章主要給大家介紹了關(guān)于JavaScript ES6中class定義類的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細介紹了js實現(xiàn)盒子滾動動畫效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08