當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

JavaScript 操作 HTML DOM (文档对象模型) 相关知识点

發(fā)布時(shí)間：2023/12/10 javascript 21 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript 操作 HTML DOM (文档对象模型) 相关知识点小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

HTML DOM 樹?

通過可編程的對(duì)象模型，JavaScript 獲得了足夠的能力來創(chuàng)建動(dòng)態(tài)的 HTML。

JavaScript 能夠改變頁(yè)面中的所有 HTML 元素
JavaScript 能夠改變頁(yè)面中的所有 HTML 屬性
JavaScript 能夠改變頁(yè)面中的所有 CSS 樣式
JavaScript 能夠?qū)?yè)面中的所有事件做出反應(yīng)

查找 HTML 元素

通常，通過 JavaScript，您需要操作 HTML 元素。

為了做到這件事情，您必須首先找到該元素。常用的有三種方法來做這件事：

通過 id 找到 HTML 元素????????? var x=document.getElementById("intro");
通過標(biāo)簽名找到 HTML 元素??????? var y=x.getElementsByTagName("p");
通過類名找到 HTML 元素??????? var x=document.getElementsByClassName("intro");

可以組合查找，例如

查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素：

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

事件句柄　(Event Handlers)

屬性此事件發(fā)生在何時(shí)...

onabort	圖像的加載被中斷。
onblur	元素失去焦點(diǎn)。
onchange	域的內(nèi)容被改變。
onclick	當(dāng)用戶點(diǎn)擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄。
ondblclick	當(dāng)用戶雙擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄。
onerror	在加載文檔或圖像時(shí)發(fā)生錯(cuò)誤。
onfocus	元素獲得焦點(diǎn)。
onkeydown	某個(gè)鍵盤按鍵被按下。
onkeypress	某個(gè)鍵盤按鍵被按下并松開。
onkeyup	某個(gè)鍵盤按鍵被松開。
onload	一張頁(yè)面或一幅圖像完成加載。
onmousedown	鼠標(biāo)按鈕被按下。
onmousemove	鼠標(biāo)被移動(dòng)。
onmouseout	鼠標(biāo)從某元素移開。
onmouseover	鼠標(biāo)移到某元素之上。
onmouseup	鼠標(biāo)按鍵被松開。
onreset	重置按鈕被點(diǎn)擊。
onresize	窗口或框架被重新調(diào)整大小。
onselect	文本被選中。
onsubmit	確認(rèn)按鈕被點(diǎn)擊。
onunload	用戶退出頁(yè)面。

?

鼠標(biāo) / 鍵盤屬性

屬性描述

altKey	返回當(dāng)事件被觸發(fā)時(shí)，"ALT" 是否被按下。
button	返回當(dāng)事件被觸發(fā)時(shí)，哪個(gè)鼠標(biāo)按鈕被點(diǎn)擊。
clientX	返回當(dāng)事件被觸發(fā)時(shí)，鼠標(biāo)指針的水平坐標(biāo)。
clientY	返回當(dāng)事件被觸發(fā)時(shí)，鼠標(biāo)指針的垂直坐標(biāo)。
ctrlKey	返回當(dāng)事件被觸發(fā)時(shí)，"CTRL" 鍵是否被按下。
metaKey	返回當(dāng)事件被觸發(fā)時(shí)，"meta" 鍵是否被按下。
relatedTarget	返回與事件的目標(biāo)節(jié)點(diǎn)相關(guān)的節(jié)點(diǎn)。
screenX	返回當(dāng)某個(gè)事件被觸發(fā)時(shí)，鼠標(biāo)指針的水平坐標(biāo)。
screenY	返回當(dāng)某個(gè)事件被觸發(fā)時(shí)，鼠標(biāo)指針的垂直坐標(biāo)。
shiftKey	返回當(dāng)事件被觸發(fā)時(shí)，"SHIFT" 鍵是否被按下。

addEventListener() 方法

語(yǔ)法：element.addEventListener(event, function, useCapture);

useCapture默認(rèn)值為 false, 即冒泡傳遞，當(dāng)值為 true 時(shí), 事件使用捕獲傳遞。

第一個(gè)參數(shù)是事件的類型 (如 "click" 或 "mousedown").，

?????????????????????? 注意:不要使用 "on" 前綴。例如，使用 "click" ,而不是使用 "onclick"。

第二個(gè)參數(shù)是事件觸發(fā)后調(diào)用的函數(shù)。

第三個(gè)參數(shù)是個(gè)布爾值用于描述事件是冒泡還是捕獲。該參數(shù)是可選的。

???????????????????? addEventListener() 方法允許向同一個(gè)元素添加多個(gè)事件，且不會(huì)覆蓋已存在的事件

???????????????????? removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄

addEventListener瀏覽器支持

表格中的數(shù)字表示支持該方法的第一個(gè)瀏覽器的版本號(hào)。

注意： IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是，對(duì)于這類瀏覽器版本可以使用 detachEvent() 方法來移除事件句柄:

element.attachEvent(event, function);
element.detachEvent(event, function);

//跨瀏覽器解決辦法 var x = document.getElementById("myBtn"); if (x.addEventListener) { // 所有主流瀏覽器，除了 IE 8 及更早版本x.addEventListener("click", myFunction); } else if (x.attachEvent) { // IE 8 及更早版本x.attachEvent("onclick", myFunction); }

創(chuàng)建新的 HTML 元素 (節(jié)點(diǎn)) - appendChild()

<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"); element.appendChild(para); </script>

?

創(chuàng)建新的 HTML 元素 (節(jié)點(diǎn)) - insertBefore()

移除已存在的元素

<div id="div1"> <p id="p1">這是一個(gè)段落。</p> <p id="p2">這是另外一個(gè)段落。</p> </div><script> var parent = document.getElementById("div1"); var child = document.getElementById("p1"); parent.removeChild(child); </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>

HTMLCollection 對(duì)象

getElementsByTagName() 方法返回 HTMLCollection 對(duì)象。
HTMLCollection 對(duì)象類似包含 HTML 元素的一個(gè)數(shù)組。
HTMLCollection 對(duì)象的 length 屬性定義了集合中元素的數(shù)量。
HTMLCollection 不是一個(gè)數(shù)組！
HTMLCollection 看起來可能是一個(gè)數(shù)組，但其實(shí)不是。
你可以像數(shù)組一樣，使用索引來獲取元素。
HTMLCollection 無法使用數(shù)組的方法： valueOf(), pop(), push(), 或 join() 。

NodeList? JavaScript HTML DOM 節(jié)點(diǎn)列表

NodeList 對(duì)象是一個(gè)從文檔中獲取的節(jié)點(diǎn)列表 (集合) 。
NodeList 對(duì)象類似 HTMLCollection 對(duì)象。
一些舊版本瀏覽器中的方法（如：getElementsByClassName()）返回的是 NodeList 對(duì)象，而不是 HTMLCollection 對(duì)象。
所有瀏覽器的 childNodes 屬性返回的是 NodeList 對(duì)象。
大部分瀏覽器的 querySelectorAll() 返回 NodeList 對(duì)象。
NodeList 對(duì)象 length 屬性定義了節(jié)點(diǎn)列表中元素的數(shù)量。

HTMLCollection 與 NodeList 的區(qū)別

HTMLCollection 是 HTML 元素的集合。
NodeList 是一個(gè)文檔節(jié)點(diǎn)的集合。
NodeList 與 HTMLCollection 有很多類似的地方。
NodeList 與 HTMLCollection 都與數(shù)組對(duì)象有點(diǎn)類似，可以使用索引 (0, 1, 2, 3, 4, ...) 來獲取元素。
NodeList 與 HTMLCollection 都有 length 屬性。
HTMLCollection 元素可以通過 name，id 或索引來獲取。
NodeList 只能通過索引來獲取。
只有 NodeList 對(duì)象有包含屬性節(jié)點(diǎn)和文本節(jié)點(diǎn)。

節(jié)點(diǎn)列表不是一個(gè)數(shù)組！

節(jié)點(diǎn)列表看起來可能是一個(gè)數(shù)組，但其實(shí)不是。

你可以像數(shù)組一樣，使用索引來獲取元素。

節(jié)點(diǎn)列表無法使用數(shù)組的方法： valueOf(), pop(), push(), 或 join() 。

總結(jié)

以上是生活随笔為你收集整理的JavaScript 操作 HTML DOM (文档对象模型) 相关知识点的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： php 复习
下一篇： java 压缩二进制流_在java中压缩