JS HTML DOM

通過 HTML DOM，可訪問 JavaScript HTML 文檔的所有元素。
HTML DOM (文檔對象模型)
JavaScript 能夠改變頁面中的所有 HTML 元素
JavaScript 能夠改變頁面中的所有 HTML 屬性
JavaScript 能夠改變頁面中的所有 CSS 樣式
JavaScript 能夠?qū)撁嬷械乃惺录龀龇磻?yīng)

查找 HTML 元素
通過 JavaScript，操作 HTML 元素。
須首先找到該元素。有三種方法：
通過 id 找到 HTML 元素
通過標(biāo)簽名找到 HTML 元素
通過類名找到 HTML 元素

//通過 id 查找 HTML 元素:
var x=document.getElementById("intro");
/*如果找到該元素，則該方法將以對象（在 x 中）的形式返回該元素。
如果未找到該元素，則 x 將包含 null。
*/

//通過標(biāo)簽名查找 HTML 元素:
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

//通過類名找到 HTML 元素
var x=document.getElementsByClassName("intro");

HTML DOM - 改變 HTML
改變 HTML 輸出流
在 JavaScript 中，document.write() 可用于直接向 HTML 輸出流寫內(nèi)容。

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());//絕對不要在文檔(DOM)加載完成之后使用 document.write()。這會(huì)覆蓋該文檔
</script>

</body>
</html>

改變 HTML 內(nèi)容
修改 HTML 內(nèi)容的最簡單的方法是使用 innerHTML 屬性。

document.getElementById(id).innerHTML="新的 HTML"
//實(shí)例
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
</body>
</html>
//改變了 <h1> 元素的內(nèi)容：
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="新標(biāo)題";
</script>
</body>
</html>

改變 HTML 屬性

document.getElementById(id).attribute="新屬性值"

//改變 <img> 元素的 src 屬性：
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>

HTML DOM - 改變CSS
改變 HTML 樣式

document.getElementById(id).style.property="新樣式"

改變 <p> 元素的樣式：
<body>
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通過腳本修改。</p>
</body>

使用事件
通過觸發(fā)事件來執(zhí)行代碼。
元素被點(diǎn)擊。
頁面加載完成。
輸入框被修改。
……
顯示隱藏案例：

<body>
<p id="p1">這是一個(gè)文本。 這是一個(gè)文本。 這是一個(gè)文本。 這是一個(gè)文本。 這是一個(gè)文本。 這是一個(gè)文本。 這是一個(gè)文本。</p>
<input type="button" value="隱藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="顯示文本" onclick="document.getElementById('p1').style.visibility='visible'" />
</body>

HTML DOM 事件
當(dāng)用戶點(diǎn)擊鼠標(biāo)時(shí)
當(dāng)網(wǎng)頁已加載時(shí)
當(dāng)圖像已加載時(shí)
當(dāng)鼠標(biāo)移動(dòng)到元素上時(shí)
當(dāng)輸入字段被改變時(shí)
當(dāng)提交 HTML 表單時(shí)
當(dāng)用戶觸發(fā)按鍵時(shí)

//點(diǎn)擊時(shí)，會(huì)改變其內(nèi)容
<body>
<h1 onclick="this.innerHTML='Ooops!'">點(diǎn)擊文本!</h1>
</body>
//從事件處理器調(diào)用一個(gè)函數(shù)：changetext(id)
<script>
function changetext(id){
    id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">點(diǎn)擊文本!</h1>
</body>

HTML 事件屬性
向 HTML 元素分配 事件，可以使用事件屬性。

//向 button 元素分配 onclick 事件：
<button onclick="displayDate()">點(diǎn)這里</button>

//使用 HTML DOM 來分配事件
//向 button 元素分配 onclick 事件：
<button id="myBtn">點(diǎn)這里</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

onload 和 onunload 事件
onload 和 onunload 事件會(huì)在用戶進(jìn)入或離開頁面時(shí)被觸發(fā)
onload 事件可用于檢測訪問者的瀏覽器類型和瀏覽器版本，并基于這些信息來加載網(wǎng)頁的正確版本。
onload 和 onunload 事件可用于處理 cookie。

<body onload="checkCookies()">
<script>
function checkCookies(){
    if (navigator.cookieEnabled==true){
        alert("Cookies 可用")
    }
    else{
        alert("Cookies 不可用")
    }
}
</script>

onchange 事件
onchange 事件常結(jié)合對輸入字段的驗(yàn)證來使用。

<script>
function myFunction(){
    var x=document.getElementById("fname");
    x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
輸入你的名字: <input type="text" id="fname" onchange="myFunction()">
/*當(dāng)鼠標(biāo)離開輸入框后，函數(shù)將被觸發(fā)，將小寫字母轉(zhuǎn)為大寫字母。
*/

onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用戶的鼠標(biāo)移至 HTML 元素上方或移出元素時(shí)觸發(fā)函數(shù)。

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
    obj.innerHTML="Thank You"
}
function mOut(obj){
    obj.innerHTML="Mouse Over Me"
}
</script>

onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 構(gòu)成了鼠標(biāo)點(diǎn)擊事件的所有部分。首先當(dāng)點(diǎn)擊鼠標(biāo)按鈕時(shí)，會(huì)觸發(fā) onmousedown 事件，當(dāng)釋放鼠標(biāo)按鈕時(shí)，會(huì)觸發(fā) onmouseup 事件，最后，當(dāng)完成鼠標(biāo)點(diǎn)擊時(shí)，會(huì)觸發(fā) onclick 事件。

HTML DOM EventListener
addEventListener() 方法

//在用戶點(diǎn)擊按鈕時(shí)觸發(fā)監(jiān)聽事件：
document.getElementById("myBtn").addEventListener("click", displayDate);
/*addEventListener() 方法用于向指定元素添加事件句柄。添加的事件句柄不會(huì)覆蓋已存在的事件句柄。
可以向一個(gè)元素添加多個(gè)、多個(gè)同類型的事件句柄。
可以向任何 DOM 對象添加事件監(jiān)聽
addEventListener() 方法可以更簡單的控制事件（冒泡與捕獲）
*/

HTML DOM 元素 (節(jié)點(diǎn))
創(chuàng)建新的 HTML 元素 (節(jié)點(diǎn)) - appendChild()
appendChild() 方法，它用于添加新元素到尾部

<div id="div1">
<p id="p1">這是一個(gè)段落。</p>
<p id="p2">這是另外一個(gè)段落。</p>
</div>
 
<script>
var para = document.createElement("p");//創(chuàng)建 <p> 元素
var node = document.createTextNode("這是一個(gè)新的段落。");//為 <p> 元素添加文本節(jié)點(diǎn)
para.appendChild(node);//將文本節(jié)點(diǎn)添加到 <p> 元素中
 
var element = document.getElementById("div1");//查找已存在的元素
element.appendChild(para);//添加到已存在的元素中
</script>

創(chuàng)建新的 HTML 元素 (節(jié)點(diǎn)) - insertBefore()
insertBefore() 方法，將新元素添加到開始位置

<div id="div1">
<p id="p1">這是一個(gè)段落。</p>
<p id="p2">這是另外一個(gè)段落。</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("這是一個(gè)新的段落。");
para.appendChild(node);
 
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

移除已存在的元素
要移除一個(gè)元素，需要知道該元素的父元素。

<div id="div1">
<p id="p1">這是一個(gè)段落。</p>
<p id="p2">這是另外一個(gè)段落。</p>
</div>
<script>
var parent = document.getElementById("div1");//查找 id="div1" 的元素
var child = document.getElementById("p1");//查找 id="p1" 的 <p> 元素
parent.removeChild(child);//從父元素中移除子節(jié)點(diǎn)
</script>

替換 HTML 元素 - replaceChild()

<div id="div1">
<p id="p1">這是一個(gè)段落。</p>
<p id="p2">這是另外一個(gè)段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("這是一個(gè)新的段落。");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

HTML DOM 集合(Collection)
HTMLCollection 對象
getElementsByTagName() 方法返回 HTMLCollection 對象。

TMLCollection 對象類似包含 HTML 元素的一個(gè)數(shù)組。
獲取文檔所有的 <p> 元素：
var x = document.getElementsByTagName("p");
集合中的元素可以通過索引(以 0 為起始位置)來訪問。

HTMLCollection 對象 length 屬性
HTMLCollection 對象的 length 屬性定義了集合中元素的數(shù)量。

var myCollection = document.getElementsByTagName("p");//獲取 <p> 元素的集合
document.getElementById("demo").innerHTML = myCollection.length;//顯示集合元素個(gè)數(shù)

注意
HTMLCollection 不是一個(gè)數(shù)組！
HTMLCollection 看起來可能是一個(gè)數(shù)組，但其實(shí)不是。
你可以像數(shù)組一樣，使用索引來獲取元素。
HTMLCollection 無法使用數(shù)組的方法： valueOf(), pop(), push(), 或 join() 。

HTML DOM 節(jié)點(diǎn)列表
NodeList 對象是一個(gè)從文檔中獲取的節(jié)點(diǎn)列表 (集合) 。
所有瀏覽器的 childNodes 屬性返回的是 NodeList 對象。
大部分瀏覽器的 querySelectorAll() 返回 NodeList 對象。
節(jié)點(diǎn)列表不是一個(gè)數(shù)組！

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • ??JavaScript 與 HTML 之間的交互是通過事件實(shí)現(xiàn)的。 ??事件，就是文檔或?yàn)g覽器窗口中發(fā)生的一些特...
    霜天曉閱讀 3,701評論 1贊 11
  • JavaScript HTML DOM 通過HTML DOM,可以訪問JavaScript HTML文檔的所有元素...
    edwin_hei閱讀 489評論 0贊 2
  • ??DOM（文檔對象模型）是針對 HTML 和 XML 文檔的一個(gè) API（應(yīng)用程序編程接口）。 ??DOM 描繪...
    霜天曉閱讀 3,866評論 0贊 7
  • 第3章 基本概念 3.1 語法 3.2 關(guān)鍵字和保留字 3.3 變量 3.4 數(shù)據(jù)類型 5種簡單數(shù)據(jù)類型：Unde...
    RickCole閱讀 5,527評論 0贊 21
  • DOM簡介 當(dāng)網(wǎng)頁加載時(shí)，瀏覽器會(huì)創(chuàng)建頁面的文檔對象模型（DOM）。通過DOM，JS可以對HTML實(shí)現(xiàn)以下操作：改...
    figure_ai閱讀 589評論 0贊 1

友情鏈接更多精彩內(nèi)容