JavaScript DOM基礎(chǔ)
DOM(Document Object Model)即文檔對象模型,針對HTML和XML文檔的API(應(yīng)用程序接口);
DOM描繪了一個(gè)層次化的節(jié)點(diǎn)樹,運(yùn)行開發(fā)人員可以添加/移除和修改頁面的某一部分;
一 DOM介紹
D(文檔):可以理解為整個(gè)Web加載的網(wǎng)頁文檔;
O(對象):可以理解為類似window對象之類的東西,可以調(diào)用屬性和方法,這里說的是document對象;
M(模型):可以理解為網(wǎng)頁文檔的樹形結(jié)構(gòu);
1.節(jié)點(diǎn)
加載HTML頁面時(shí),Web瀏覽器生成一個(gè)樹形結(jié)構(gòu),用來表示頁面內(nèi)部結(jié)構(gòu);
DOM將這種節(jié)點(diǎn)結(jié)構(gòu)理解為由節(jié)點(diǎn)組成;
html元素為根節(jié)點(diǎn);head元素是html的子節(jié)點(diǎn);meta元素和title元素之間是兄弟關(guān)系;
2.節(jié)點(diǎn)種類:元素節(jié)點(diǎn)/文本節(jié)點(diǎn)/屬性節(jié)點(diǎn)
<div title="元素屬性">測試Div</div>
元素節(jié)點(diǎn) => div;
屬性節(jié)點(diǎn) => title="元素屬性"
文本節(jié)點(diǎn) => 測試Div二 查找元素
W3C提供了比較方便簡單的定位節(jié)點(diǎn)的方法和屬性,以便我們快速的對節(jié)點(diǎn)進(jìn)行操作;
DOM(Document Object Model)即文檔對象模型,針對HTML和XML文檔的API(應(yīng)用程序接口);
DOM描繪了一個(gè)層次化的節(jié)點(diǎn)樹,運(yùn)行開發(fā)人員可以添加/移除和修改頁面的某一部分;
元素節(jié)點(diǎn)查找方法
方法 說明
getElementById() 獲取特定ID元素的節(jié)點(diǎn);
getElementsByTagName() 獲取相同元素的節(jié)點(diǎn)列表;
getElementsByName() 獲取相同名稱的節(jié)點(diǎn)列表;
getAttribute() 獲取特定元素節(jié)點(diǎn)屬性的值;
setAttribute() 設(shè)置特定元素節(jié)點(diǎn)屬性的值;
removeAttribute() 移除特定元素節(jié)點(diǎn)屬性;
1.getElementById()
// 方法接收一個(gè)參數(shù):獲取元素的ID;
// 如果找到相應(yīng)的元素則返回該元素的HTMLDivElement對象;如果不存在,則返回null;
document.getElementById('box'); // [object HTMLDivElement];
// 當(dāng)我們通過getElementById()獲取到特定元素節(jié)點(diǎn)時(shí),這個(gè)節(jié)點(diǎn)對象就被我們獲取到了;
// 而通過這個(gè)節(jié)點(diǎn)對象,我們可以訪問它的一系列屬性;
(1).訪問元素節(jié)點(diǎn)的屬性
屬性 說明
tagName 獲取元素節(jié)點(diǎn)的標(biāo)簽名;
innerHTML 獲取元素節(jié)點(diǎn)里的內(nèi)容,非W3C DOM規(guī)范;
document.getElementById('box').tagName; // =>DIV;
document.getElementById('box').innerHTML; // =>測試Div;
(2).訪問HTML通用屬性
屬性 說明
id 元素節(jié)點(diǎn)的id名稱;
title 元素節(jié)點(diǎn)的title屬性值;
style CSS內(nèi)聯(lián)樣式屬性值;
className CSS元素的類;
document.getElementById('box').id; // =>id;
document.getElementById('box').title; // 獲取title;
document.getElementById('box').style; // 獲取CSSStyleDeclaration對象;
document.getElementById('box').style.color; // 獲取style對象中的color的值;也就是設(shè)置在元素行內(nèi)的樣式值;
document.getElementById('box').style.color='red'; // 設(shè)置style對象中的color的值;
document.getElementById('box').className; // 獲取class;
document.getElementById('box').className='pox'; // 設(shè)置class;
document.getElementById('box').bbb; // 獲取自定義屬性的值,非IE不支持;
2.getElementsByTagName()
// 方法返回一個(gè)對象數(shù)組HTMLCollection(NodeList)數(shù)組,這個(gè)數(shù)組保存著所有相同元素名的節(jié)點(diǎn)列表;
document.getElementsByTagName('*'); // 利用通配符獲取所有元素;
// PS:IE在使用通配符時(shí),會(huì)把文檔最開始的html的規(guī)范聲明當(dāng)作第一個(gè)元素節(jié)點(diǎn);
document.getElementsByTagName('li'); // =>[object HTMLCollection];獲取所有l(wèi)i元素;
document.getElementsByTagName('li').[0]; // 獲取第一個(gè)li元素;
3.getElementsByName()
獲取相同名稱(name)設(shè)置的元素,返回一個(gè)對象數(shù)組HTMLCollection(NodeList);
document.getElementsByName('add'); // 獲取具有name='add'的input元素集合;
// PS:對于并不是HTML合法的屬性,那么在JS獲取的兼容性上也會(huì)存在差異;
// IE支持合法的name屬性,但對于自定義的屬性會(huì)出現(xiàn)不兼容問題;
4.getAttribute()
方法將獲取元素中某個(gè)屬性值;
但它和直接使用".attr"獲取屬性值的方法有一定區(qū)別;
document.getElementById('box').getAttribute('mydiv'); // 獲取自定義屬性值;
document.getElementById('box').mydiv; // 獲取自定義屬性值,僅IE支持;
5.setAttribute()
方法將設(shè)置元素中某個(gè)屬性和值;接收兩個(gè)參數(shù):屬性名和值;
如果屬性本身已存在,那么就會(huì)覆蓋;
document.getElementById('box').setAttribute('align','center'); // 設(shè)置屬性和值;
// PS:在IE7及以下,使用setAttribute()方法設(shè)置class和style屬性沒有效果;
6.removeAttribute()
方法可以移除HTML屬性;
document.getElementById('box').removeAttribute('style'); // 移除style樣式屬性;
三 DOM節(jié)點(diǎn)
1.node節(jié)點(diǎn)屬性
// 節(jié)點(diǎn)可以分為:元素節(jié)點(diǎn)/屬性節(jié)點(diǎn)和文本節(jié)點(diǎn);
// 這些節(jié)點(diǎn)都有三個(gè)屬性:nodeName/nodeType和nodeValue;
信息節(jié)點(diǎn)屬性
節(jié)點(diǎn)類型 nodeName nodeType nodeValue
元素 元素名稱 1 null
屬性 屬性名稱 2 屬性值
文本 #text 3 文本內(nèi)容
document.getElementById('box').nodeType; // =>1; 元素節(jié)點(diǎn);
2.層次節(jié)點(diǎn)屬性
// 層次節(jié)點(diǎn)可以劃分為:父節(jié)點(diǎn)與子節(jié)點(diǎn)/兄弟節(jié)點(diǎn);
// 當(dāng)我們獲取其中一個(gè)元素節(jié)點(diǎn)的時(shí)候,就可以使用層次節(jié)點(diǎn)屬性來獲取它相關(guān)層次的節(jié)點(diǎn);
節(jié)點(diǎn)關(guān)系示意圖
層次節(jié)點(diǎn)屬性
屬性 說明
childNodes 讀取當(dāng)前元素節(jié)點(diǎn)的所有子節(jié)點(diǎn);
firstChild 讀取當(dāng)前元素節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn);
lastChild 獲取當(dāng)前元素節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn);
ownerDocument 獲取該節(jié)點(diǎn)的文檔根節(jié)點(diǎn),相當(dāng)于document;
parentNode 獲取當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn);
previousSibling 獲取當(dāng)前節(jié)點(diǎn)的前一個(gè)同級節(jié)點(diǎn);
nextSibling 獲取當(dāng)前節(jié)點(diǎn)的后一個(gè)同級節(jié)點(diǎn);
attributes 獲取當(dāng)前元素節(jié)點(diǎn)的所有屬性節(jié)點(diǎn)集合;
(1).childNodes屬性
屬性獲取某一個(gè)元素節(jié)點(diǎn)的所有子節(jié)點(diǎn),這些子節(jié)點(diǎn)包含元素節(jié)點(diǎn)和文本節(jié)點(diǎn);
PS:使用childNodes[n]返回子節(jié)點(diǎn)對象的時(shí)候,有可能返回的是元素子節(jié)點(diǎn),比如:HTMLElement;
也可能返回的是文本子節(jié)點(diǎn),比如:Text;
元素子節(jié)點(diǎn)可以使用nodeName或者tagName獲取標(biāo)簽名稱;而文本子節(jié)點(diǎn)可以使用nodeValue獲取;
var box = document.getElementById('box');
for(var i=0; i<box.childNodes.length; i++){
判斷是元素節(jié)點(diǎn),輸出元素標(biāo)簽名;
if(box.childNodes[i].nodeType === 1){
console.log('元素節(jié)點(diǎn):'+box.childNodes[i].nodeName);
判斷是文本節(jié)點(diǎn),輸出文本內(nèi)容;
}else if(box.childNodes[i].nodeType ===3){
console.log('文本節(jié)點(diǎn):'+box.childNodes[i].nodeValue);
}
}
PS1:在獲取到文本節(jié)點(diǎn)(重點(diǎn)在于已經(jīng)不是元素節(jié)點(diǎn))的時(shí)候,是無法使用innerHTML這個(gè)屬性輸出文本內(nèi)容的;
這個(gè)非標(biāo)準(zhǔn)的屬性必須在獲取元素節(jié)點(diǎn)的時(shí)候,才能輸出里面包含的文本;
alert(box.innerHTML); innerHTML和nodeValue第一個(gè)區(qū)別;
PS2:innerHTML和nodeValue在賦值的時(shí)候,nodeValue會(huì)把包含在文本里的HTML轉(zhuǎn)義成特殊的字符,從而達(dá)到形成純文本的效果;
而innerHTML會(huì)解析文本里的特殊字符;
box.childNodes[0].nodeValue = '<strong>abc</strong>'; =><strong>abc</strong>;
box.innerHTML = '<strong>abc</strong>'; =>abc(樣式加粗);
(2).firstChild和lastChild屬性
firstChild = childNodes[0];獲取當(dāng)前元素的第一個(gè)子節(jié)點(diǎn);
lastChild = childNodes[box.childNodes.length-1];獲取當(dāng)前元素最后一個(gè)子節(jié)點(diǎn);
(3).ownerDocument屬性
返回該節(jié)點(diǎn)的文檔對象根節(jié)點(diǎn),返回的對象相當(dāng)于document;
alert(box.ownerDocument === document); // =>true;根節(jié)點(diǎn);
(4).parentNode/previousSibling/nextSibling屬性
parentNode:返回該節(jié)點(diǎn)的父節(jié)點(diǎn);
previousSibling:返回該節(jié)點(diǎn)的前一個(gè)同級節(jié)點(diǎn);
nextSibling:返回該節(jié)點(diǎn)的后一個(gè)同級節(jié)點(diǎn);
alert(box.parentNode.nodeName); // 獲取父節(jié)點(diǎn)的標(biāo)簽名;
alert(box.firstChild.nextSibling); // 獲取第二個(gè)節(jié)點(diǎn);
alert(box.lastChild.previousSibling); // 獲取倒數(shù)第二個(gè)節(jié)點(diǎn);
(5).attributes屬性
屬性返回該節(jié)點(diǎn)的屬性節(jié)點(diǎn)集合;
alert(document.getElementById('box').attributes); // =>NamedNodeMap;
(6).忽略空白文本節(jié)點(diǎn)
var body = document.getElementsByTagName('body')[0];// 獲取body元素節(jié)點(diǎn);
alert(body.childNodes.length); // 非IE=7; IE=3;
// PS:在非IE中,標(biāo)準(zhǔn)的DOM具有識(shí)別空白文本節(jié)點(diǎn)的功能,而IE自動(dòng)忽略了;
function filterSpaceNode1(nodes){
// 新數(shù)組;
var ret = [];
for(var i=0; i<nodes.length; i++){
// 如果識(shí)別到空白文本節(jié)點(diǎn),就不添加到數(shù)組;
if(nodes[i].nodeType ===3 && /^\s+$/.test(nodes[i].nodeValue)) continue;
// 把每次的元素節(jié)點(diǎn),添加到數(shù)組里;
ret.push(nodes[i]);
}
return ret;
}
// PS:上面的方法,采用忽略空白文件節(jié)點(diǎn)的方法,把得到的元素節(jié)點(diǎn)累加到數(shù)組里返回;
function filterSpaceNode2(nodes){
for(var i=0; i<nodes.length; i++){
if(nodes[i].nodeType ===3 && /^\s+$/.test(nodes[i].nodeValue)){
// 得到空白節(jié)點(diǎn)之后,一道父節(jié)點(diǎn)上,刪除子節(jié)點(diǎn);
nodes[i].parentNode.removeChild(nodes[i]);
}
}
return nodes;
}
// PS:firstChild等方法在獲取節(jié)點(diǎn)時(shí)遇到空白節(jié)點(diǎn),處理方法;
function removeWhileNode(nodes){
for(var i=0; i<nodes.childNodes.length; i++){
if(nodes.childNodes[i].nodeType ===3 && /^\s+$/.test(nodes.childNodes[i].nodeValue)){
nodes.childNodes[i].parentNode.removeChild(nodes.childNodes[i]);
}
}
return nodes;
}
四 節(jié)點(diǎn)操作
// DOM不單單可以查找節(jié)點(diǎn),也可以創(chuàng)建節(jié)點(diǎn)/復(fù)制節(jié)點(diǎn)/插入節(jié)點(diǎn)/刪除節(jié)點(diǎn)和替換節(jié)點(diǎn)
節(jié)點(diǎn)操作方法
方法 說明
write() 這個(gè)方法可以把任意字符串插入到文檔中;
createElement() 創(chuàng)建一個(gè)元素節(jié)點(diǎn);
appendChild() 將新節(jié)點(diǎn)追加到子節(jié)點(diǎn)列表的末尾;
createTextNode() 創(chuàng)建一個(gè)文件節(jié)點(diǎn);
insertBefore() 將新節(jié)點(diǎn)插入在前面;
replaceChild() 將新節(jié)點(diǎn)替換舊節(jié)點(diǎn);
cloneNode() 復(fù)制節(jié)點(diǎn);
removeChild() 移除節(jié)點(diǎn);
(1).write()方法
// write()方法可以把任意字符串插入到文檔中去;
document.write('<p>這是一個(gè)段落!</p>'); // 解析后文字;
(2).createElement()方法
createElement()方法可以創(chuàng)建一個(gè)元素節(jié)點(diǎn);
document.createElement('p'); // [object HTMLParagraphElement];
(3).appendChild()方法
appendChild()方法將一個(gè)新節(jié)點(diǎn)添加到某個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)列表的末尾上;
var box = document.getElementById('box');
var p = document.createElement('p'); // 創(chuàng)建一個(gè)新元素節(jié)點(diǎn)<p>;
box.appendChild(p); // 把新元素節(jié)點(diǎn)<p>添加子節(jié)點(diǎn)末尾;
(4).createTextNode()方法
該方法創(chuàng)建一個(gè)文本節(jié)點(diǎn);
var text = document.createTextNode('段落');
p.appendChild(text); // 將文本節(jié)點(diǎn)添加到子節(jié)點(diǎn)末尾;
(5).insertBefore()方法
// 該方法可以把節(jié)點(diǎn)添加到指定節(jié)點(diǎn)的前面;
box.parentNode.insertBefore(p,box); // 在<div>之前添加一個(gè)<p>;
box.insertBefore(newNode,null); // 將newNode添加到box自列表的最后節(jié)點(diǎn);
//PS:insertBefore()方法可以給當(dāng)前元素的前面創(chuàng)建一個(gè)節(jié)點(diǎn),但沒有提供給當(dāng)前元素的后面創(chuàng)建一個(gè)節(jié)點(diǎn);
function insertAfter(newElement,targetElement){
// 得到父節(jié)點(diǎn);
var parent = targetElement.parentNode;
// 如果最后一個(gè)子節(jié)點(diǎn)是當(dāng)前元素,那么直接添加即可;
if(parent.lastChild === targetElement){
parent.appendChild(newElement);
}else{
// 否則,在當(dāng)前節(jié)點(diǎn)的下一個(gè)節(jié)點(diǎn)之前添加;達(dá)成在當(dāng)前節(jié)點(diǎn)后面添加節(jié)點(diǎn)的需求;
parentNode.insertBefore(newElement,targetElement.nextSibling);
}
}
(6).replaceChild()方法
該方法可以把節(jié)點(diǎn)替換成指定的節(jié)點(diǎn);
box.parentNode.replaceChild(p,box); // 把<div>換成了<p>;
(7).cloneNode()方法
// 該方法可以把子節(jié)點(diǎn)復(fù)制出來;復(fù)制后返回的節(jié)點(diǎn)副本屬于文檔所有,但并沒有為它指定父節(jié)點(diǎn);
// 參數(shù)為true:執(zhí)行深復(fù)制,就是復(fù)制節(jié)點(diǎn)及其整個(gè)子節(jié)點(diǎn)樹;
// 參數(shù)為false:執(zhí)行淺復(fù)制,只復(fù)制節(jié)點(diǎn)本身;
var box = document.getElementById('box');
var clone = box.firstChild.cloneNode(true); // 獲取第一個(gè)子節(jié)點(diǎn),true表示復(fù)制內(nèi)容;
box.appendChild(clone); // 添加到子節(jié)點(diǎn)列表末尾;
(8).removeChild()方法
該方法刪除指定節(jié)點(diǎn);
box.parentNode.removeChild(box);
小結(jié):在下一章~
相關(guān)文章
Javascript學(xué)習(xí)筆記之?dāng)?shù)組的遍歷和 length 屬性
我們一般用循環(huán)來遍歷數(shù)組，而循環(huán)一直是 JavaScript 性能問題的常見來源，有時(shí)循環(huán)用得不好會(huì)嚴(yán)重降低代碼的運(yùn)行速度。數(shù)組的屬性可以分為三種:length屬性,索引屬性,其他屬性.和普通對象相比,數(shù)組對象特殊的地方就是它的length屬性和索引屬性。2014-11-11
window.open的功能全解析...2006-10-10
這篇文章主要介紹了javascript this詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-09-09
JavaScript中的Math.SQRT1_2屬性使用簡介
這篇文章主要介紹了JavaScript中的Math.SQRT1_2屬性的使用,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06
JavaScript內(nèi)置對象屬性及方法大全，學(xué)習(xí)js的朋友可以收藏下， 方便以后的學(xué)習(xí)。2010-07-07
2016年推出微信小程序，時(shí)至今日，歷經(jīng)幾個(gè)版本的更新，已形成了相對實(shí)用和穩(wěn)定的服務(wù)平臺(tái)。本文簡單的介紹了微信小程序的入門用法，今后會(huì)繼續(xù)關(guān)注和實(shí)踐。需要的朋友可以參考學(xué)習(xí)，下面來一起看看吧。2017-03-03
這篇文章主要介紹了JavaScript的DOM基礎(chǔ)知識(shí),需要的朋友可以參考下2015-04-04
JavaScript 學(xué)習(xí)筆記之操作符（續(xù)）
上篇文章我們講解了javascript的操作符中的一元操作符、位操作符、布爾操作符，今天我們繼續(xù)講解剩下的幾個(gè)操作符，包括乘性操作符、加性操作符、相等操作符、條件操作符、賦值操作符、逗號操作符，小伙伴們仔細(xì)研讀下吧，對提高自己對于javascript的理解很有幫助。2015-01-01
JavaScript字符串對象toLowerCase方法入門實(shí)例（用于把字母轉(zhuǎn)換為小寫）
這篇文章主要介紹了JavaScript字符串對象toLowerCase方法入門實(shí)例,toLowerCase方法用于把字母字符串轉(zhuǎn)換為小寫形式,需要的朋友可以參考下2014-10-10
JavaScript實(shí)現(xiàn)關(guān)鍵字高亮功能
關(guān)鍵詞高亮技術(shù)各大CMS基本上都有，但基本都是后端代碼來實(shí)現(xiàn)的，今天我們探討下如何使用javascript來實(shí)現(xiàn)代碼高亮技術(shù)。2014-11-11