第七天
03-對(duì)象模型-第01天{DOM睬涧、常用屬性}
DOM相關(guān)概念
什么是DOM
- DOM: Document Object Model 文檔對(duì)象模型
- 作用: 可以把HTML文檔模型化,當(dāng)作對(duì)象來處理
DOM內(nèi)容概念
- 文檔(document): HTML或XML文件
- 節(jié)點(diǎn)(node):HTML文檔中的所有內(nèi)容都可以稱之為節(jié)點(diǎn)痰洒，常見的節(jié)點(diǎn)有 元素節(jié)點(diǎn) 屬性節(jié)點(diǎn) 文本節(jié)點(diǎn) 注釋節(jié)點(diǎn)
- 元素(element): HTML文檔中的標(biāo)簽可以稱為元素
DOM操作
獲取元素
-
document.getElementById: 通過id尋找一個(gè)元素（找到的是一個(gè)元素對(duì)象） 該方法只能被document對(duì)象調(diào)用（同一個(gè)文檔中id不能重復(fù)）<div id="box"></div> var box = document.getElementById(“box”); -
document.getElementsByTagName: 通過標(biāo)簽名尋找一類元素（找到的是由元素對(duì)象組成的偽數(shù)組,既可以被document調(diào)用，又可以被元素對(duì)象調(diào)用瓦胎，被元素對(duì)象調(diào)時(shí)表示在該元素對(duì)象內(nèi)部執(zhí)行查找<div class="cl" id=“cl”> <div class="cl2"></div> <div class="cl2"></div> </div> <div class="cl"></div> <div class="cl"></div> var divs = document.getElementsByTagName("div");// 獲取頁面上所有的div,divs是一個(gè)偽數(shù)組 var cl = document.getElementById("cl");// 獲取id為cl的元素 var cl2s = cl.getElementsByTagName("div");// 獲取cl元素下面所有的div標(biāo)簽,cl2s是一個(gè)偽數(shù)組 -
document.getElementsByClassName通過類名尋找一類元素<div class="cl" id=“cl”> <p class="cl"></div> <span class="cl"></div> </div> <a class="cl"></a> var cls = document.getElementsByClassName("cl");//獲取到的是一個(gè)偽數(shù)組,里面裝的是div p span a這四個(gè)元素對(duì)象
設(shè)置屬性
-
獲取到的本來就是對(duì)象,所以設(shè)置屬性可以直接以對(duì)象設(shè)置屬性的方式來寫
<div id="box"></div> var box = document.getElementById(“box”); box.屬性名 = “屬性值”; 等價(jià)于 <div id="box" 屬性名="屬性值"></div>
綁定事件
-
事件三要素: 事件源 事件 事件處理程序
事件源.事件 = function(){ // 事件處理程序 } <!--小貓發(fā)威-->  var img = document.getElementById("img"); img.onclick = function(){ img.src = "tiger.jpg"; } // img是事件源 事件是點(diǎn)擊onclick 事件處理程序是函數(shù)體中的內(nèi)容
阻止a標(biāo)簽?zāi)J(rèn)行為
<a onclick="return false">想要阻止我？</a>
<a onclick="return stop()">誰都阻止不了我？</a>
function stop(){
return false;
}
<a onclick="javascript:void(0)">人類已經(jīng)阻止不了我了?</a>
文本屬性
innerText
-
獲取和設(shè)置標(biāo)簽中的內(nèi)容嫉父，設(shè)置的內(nèi)容會(huì)被當(dāng)作普通文本（有兼容性問題论熙，舊版ff不支持）
<div id="box"></div> var box = document.getElementById("box"); box.innerText = "這段文本可以顯示在div中";
innerHtml
-
獲取和設(shè)置標(biāo)簽中的內(nèi)容福青，設(shè)置的內(nèi)容會(huì)當(dāng)作節(jié)點(diǎn)對(duì)象被解析到DOM樹上
<div id="box"></div> var box = document.getElementById("box"); box.innerHtml = "<h1>這段文本會(huì)h1標(biāo)題的形式顯示在div中</h1>"
textContent
-
獲取和設(shè)置標(biāo)簽中的內(nèi)容，設(shè)置的內(nèi)容會(huì)被當(dāng)作普通文本（有兼容性問題脓诡，舊版IE不支持）
<div id="box"></div> var box = document.getElementById("box"); box.textContent = "這段文本可以顯示在div中";
innerText的兼容性處理（封裝）
獲取文本
function getInnerText(element) {
// 能力檢測(cè) 判斷是否有這一屬性
if (typeof element.innerText === "string") {
return element.innerText;
} else {
return element.textContent;
}
}
設(shè)置文本
function setInnerText(element, content) {
// 能力檢測(cè) 判斷是否有這一屬性
if (typeof element.innerText === "string") {
element.innerText = content;
} else {
element.textContent = content;
}
}
