JavaScript DOM基礎(chǔ)
DOM(Document Object Model)即文檔對(duì)象模型,針對(duì)HTML和XML文檔的API(應(yīng)用程序接口);
DOM描繪了一個(gè)層次化的節(jié)點(diǎn)樹(shù),運(yùn)行開(kāi)發(fā)人員可以添加/移除和修改頁(yè)面的某一部分;
一 DOM介紹
D(文檔):可以理解為整個(gè)Web加載的網(wǎng)頁(yè)文檔;
O(對(duì)象):可以理解為類(lèi)似window對(duì)象之類(lèi)的東西,可以調(diào)用屬性和方法,這里說(shuō)的是document對(duì)象;
M(模型):可以理解為網(wǎng)頁(yè)文檔的樹(shù)形結(jié)構(gòu);
1.節(jié)點(diǎn)
加載HTML頁(yè)面時(shí),Web瀏覽器生成一個(gè)樹(shù)形結(jié)構(gòu),用來(lái)表示頁(yè)面內(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)種類(lèi):元素節(jié)點(diǎn)/文本節(jié)點(diǎn)/屬性節(jié)點(diǎn)
<div title="元素屬性">測(cè)試Div</div>
元素節(jié)點(diǎn) => div;
屬性節(jié)點(diǎn) => title="元素屬性"
文本節(jié)點(diǎn) => 測(cè)試Div二 查找元素
W3C提供了比較方便簡(jiǎn)單的定位節(jié)點(diǎn)的方法和屬性,以便我們快速的對(duì)節(jié)點(diǎn)進(jìn)行操作;
DOM(Document Object Model)即文檔對(duì)象模型,針對(duì)HTML和XML文檔的API(應(yīng)用程序接口);
DOM描繪了一個(gè)層次化的節(jié)點(diǎn)樹(shù),運(yùn)行開(kāi)發(fā)人員可以添加/移除和修改頁(yè)面的某一部分;
元素節(jié)點(diǎn)查找方法
方法 說(shuō)明
getElementById() 獲取特定ID元素的節(jié)點(diǎn);
getElementsByTagName() 獲取相同元素的節(jié)點(diǎn)列表;
getElementsByName() 獲取相同名稱(chēng)的節(jié)點(diǎn)列表;
getAttribute() 獲取特定元素節(jié)點(diǎn)屬性的值;
setAttribute() 設(shè)置特定元素節(jié)點(diǎn)屬性的值;
removeAttribute() 移除特定元素節(jié)點(diǎn)屬性;
1.getElementById()
// 方法接收一個(gè)參數(shù):獲取元素的ID;
// 如果找到相應(yīng)的元素則返回該元素的HTMLDivElement對(duì)象;如果不存在,則返回null;
document.getElementById('box'); // [object HTMLDivElement];
// 當(dāng)我們通過(guò)getElementById()獲取到特定元素節(jié)點(diǎn)時(shí),這個(gè)節(jié)點(diǎn)對(duì)象就被我們獲取到了;
// 而通過(guò)這個(gè)節(jié)點(diǎn)對(duì)象,我們可以訪(fǎng)問(wèn)它的一系列屬性;
(1).訪(fǎng)問(wèn)元素節(jié)點(diǎn)的屬性
屬性 說(shuō)明
tagName 獲取元素節(jié)點(diǎn)的標(biāo)簽名;
innerHTML 獲取元素節(jié)點(diǎn)里的內(nèi)容,非W3C DOM規(guī)范;
document.getElementById('box').tagName; // =>DIV;
document.getElementById('box').innerHTML; // =>測(cè)試Div;
(2).訪(fǎng)問(wèn)HTML通用屬性
屬性 說(shuō)明
id 元素節(jié)點(diǎn)的id名稱(chēng);
title 元素節(jié)點(diǎn)的title屬性值;
style CSS內(nèi)聯(lián)樣式屬性值;
className CSS元素的類(lèi);
document.getElementById('box').id; // =>id;
document.getElementById('box').title; // 獲取title;
document.getElementById('box').style; // 獲取CSSStyleDeclaration對(duì)象;
document.getElementById('box').style.color; // 獲取style對(duì)象中的color的值;也就是設(shè)置在元素行內(nèi)的樣式值;
document.getElementById('box').style.color='red'; // 設(shè)置style對(duì)象中的color的值;
document.getElementById('box').className; // 獲取class;
document.getElementById('box').className='pox'; // 設(shè)置class;
document.getElementById('box').bbb; // 獲取自定義屬性的值,非IE不支持;
2.getElementsByTagName()
// 方法返回一個(gè)對(duì)象數(shù)組HTMLCollection(NodeList)數(shù)組,這個(gè)數(shù)組保存著所有相同元素名的節(jié)點(diǎn)列表;
document.getElementsByTagName('*'); // 利用通配符獲取所有元素;
// PS:IE在使用通配符時(shí),會(huì)把文檔最開(kāi)始的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()
獲取相同名稱(chēng)(name)設(shè)置的元素,返回一個(gè)對(duì)象數(shù)組HTMLCollection(NodeList);
document.getElementsByName('add'); // 獲取具有name='add'的input元素集合;
// PS:對(duì)于并不是HTML合法的屬性,那么在JS獲取的兼容性上也會(huì)存在差異;
// IE支持合法的name屬性,但對(duì)于自定義的屬性會(huì)出現(xiàn)不兼容問(wè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屬性沒(méi)有效果;
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)類(lèi)型 nodeName nodeType nodeValue
元素 元素名稱(chēng) 1 null
屬性 屬性名稱(chēng) 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)屬性來(lái)獲取它相關(guān)層次的節(jié)點(diǎn);
節(jié)點(diǎn)關(guān)系示意圖
層次節(jié)點(diǎn)屬性
屬性 說(shuō)明
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è)同級(jí)節(jié)點(diǎn);
nextSibling 獲取當(dāng)前節(jié)點(diǎn)的后一個(gè)同級(jí)節(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)對(duì)象的時(shí)候,有可能返回的是元素子節(jié)點(diǎn),比如:HTMLElement;
也可能返回的是文本子節(jié)點(diǎn),比如:Text;
元素子節(jié)點(diǎn)可以使用nodeName或者tagName獲取標(biāo)簽名稱(chēng);而文本子節(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í)候,是無(wú)法使用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)的文檔對(duì)象根節(jié)點(diǎn),返回的對(duì)象相當(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è)同級(jí)節(jié)點(diǎn);
nextSibling:返回該節(jié)點(diǎn)的后一個(gè)同級(jí)節(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)操作方法
方法 說(shuō)明
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),但沒(méi)有提供給當(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ù)制出來(lái);復(fù)制后返回的節(jié)點(diǎn)副本屬于文檔所有,但并沒(méi)有為它指定父節(jié)點(diǎn);
// 參數(shù)為true:執(zhí)行深復(fù)制,就是復(fù)制節(jié)點(diǎn)及其整個(gè)子節(jié)點(diǎn)樹(shù);
// 參數(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入門(mén)教程(6) Window窗口對(duì)象
他是JavaScript中最大的對(duì)象，它描述的是一個(gè)瀏覽器窗口。一般要引用它的屬性和方法時(shí)，不需要用“window.xxx”這種形式，而直接使用“xxx”。一個(gè)框架頁(yè)面也是一個(gè)窗口。2009-01-01
有時(shí)變量多寫(xiě)起來(lái)真的很麻煩，很多繁瑣的差不多的重復(fù)工作，es6為我們提供了多種更加便利的聲明變量的形式——變量的解構(gòu)賦值。下面這篇文章主要介紹了ES6中變量解構(gòu)賦值的相關(guān)資料，需要的朋友可以參考下。2017-02-02
JavaScript入門(mén)之事件、cookie、定時(shí)等
本文從上一篇文章結(jié)束的地方開(kāi)始，解釋其他的一些基本的JavaScript語(yǔ)言概念，繼續(xù)為初學(xué)者提供對(duì)語(yǔ)言的基礎(chǔ)理解2011-10-10
詳解JavaScript設(shè)計(jì)模式開(kāi)發(fā)中的橋接模式使用
橋接模式的適用場(chǎng)合非常廣泛，除了在事件回調(diào)函數(shù)與接口之間進(jìn)行橋接外,橋接模式也可以用于連接公開(kāi)的API代碼和私用的實(shí)現(xiàn)代碼,下面我們就來(lái)詳解JavaScript設(shè)計(jì)模式開(kāi)發(fā)中的橋接模式使用2016-05-05
用JavaScript顯示瀏覽器客戶(hù)端信息的超相近教程
這篇文章主要介紹了用JavaScript顯示瀏覽器客戶(hù)端信息的超相近教程,包含了從返回桌面瀏覽器客戶(hù)端內(nèi)核信息到移動(dòng)端瀏覽器以及其使用的系統(tǒng)版本信息等內(nèi)容,傾力推薦!需要的朋友可以參考下2015-06-06
這篇文章主要介紹了JavaScript中pop()方法的使用教程,是JS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06
這篇文章主要為大家介紹了javascript迭代器模式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-01-01
下面小編就為大家?guī)?lái)一篇JavaScript基礎(chǔ)重點(diǎn)(必看)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
JavaScript中String.match()方法的使用詳解
這篇文章主要介紹了JavaScript中String.match()方法的使用詳解,是JS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06
這一篇將主要討論Three.js中的物體是如何組織的：即如何將頂點(diǎn)、表面、材質(zhì)組合成為一個(gè)具體的對(duì)象,需要了解的朋友可以參考下2012-12-12