當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript 学习笔记 ——document

發(fā)布時間：2023/12/16 javascript 40 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript 学习笔记 ——document 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1. 瀏覽器環(huán)境

JavaScript 語言最初是為 Web 瀏覽器創(chuàng)建的。此后，它已經(jīng)發(fā)展成為一種具有多種用途和平臺的語言。

下面是 JavaScript 在瀏覽器中運行時的鳥瞰示意圖：

windows 是根對象，它充當 JavaScript 的全局對象以及代表著瀏覽器窗口，提供控制瀏覽器窗口的方法。

1.1 DOM 文檔對象模型

DOM 將所有頁面內(nèi)容表示為可以修改的對象，document 是頁面的入口，可以利用它修改創(chuàng)建 HTML 的內(nèi)容，可以參考 DOM：

document.bodyDOM.style.background = "pink"; let timer = setTimeout(() => {document.body.style.background = "orange"; }, 5000);

1.2 BOM 瀏覽器對象模型

BOM表示由瀏覽器提供的用于處理 document 之外的所有內(nèi)容的其他對象，如 navigator 和 location。利用 location 可以讀取當前 URL 和重定向到新的 URL：

console.log(location.href); if (confirm("go to baidu.com")) {location.href = "https://git-jhy.github.io"; }

此外，常用的 alert、confirm 和 prompt 都是 BOM 的一部分。

2. DOM 樹

2.1 DOM 樹

看一個簡單的 DOM 例子：

<!DOCTYPE HTML> <html> <head><title>document</title> </head> <body>This is text. </body> </html>

html 是根節(jié)點，head 和 body 是它的字節(jié)點；
元素內(nèi)的文本形成 文本節(jié)點，被標記為 #text，如 title 中的 “document”，包括換行、縮進和空格。
若瀏覽器遇到不正確的 HTML，會在形成 DOM 時自動更正。

上面的 HTML 的 DOM 標簽樹形結構如下，可以在這個網(wǎng)站上查看 DOM 樹結構 Clck me：

一共有 12 種節(jié)點類型。實際上，我們通常用到的是其中的 4 種：

doxument —— DOM 入口

元素節(jié)點 —— HTML 標簽

文本標簽 —— 包含文本

注釋 —— 讀取注釋信息

2.2 遍歷 DOM

頂層

html = document.documentElement body = document.body head = document.head

注意：若腳本放在 <head>，則腳本訪問不到 docment.body 元素，因為瀏覽器還未讀到它。

子節(jié)點

使用 childNodes、firstChild 和 lastChild訪問子節(jié)點，如訪問 body 中的所有子元素：

<!DOCTYPE html> <html lang="en"><head><title>Document</title> </head><body><li>a</li><li>b</li> </body><script>for (let i = 0; i < document.body.childNodes.length; i++) {console.log(document.body.childNodes[i]);} </script></html>

結果為：text、li、text、p、text、script、text、script

注意：顯示的節(jié)點只包含 script 之前的所有 body 子節(jié)點。

DOM 集合

DOM 集合是可迭代對象，可以使用 for...of 迭代它，若要使用數(shù)組方法，則需要通過Array.from 將集合轉化為數(shù)組：

console.log(Array.from(document.body.childNodes).filter);

注意

DOM 集合是只讀的

不要用 for…in 遍歷集合

兄弟節(jié)點和父節(jié)點

// <body> 的父節(jié)點是 <html> alert(document.body.parentNode === document.documentElenent); // true// <head> 的下一個兄弟節(jié)點 alert(document.head.nextSibing); // body// <body> 的前一個兄弟節(jié)點 alert(document.body.previousSibling); // HTMLHeadElement

2.3 純元素導航

一般不希望得到文本節(jié)點和注釋節(jié)點，只讀取元素節(jié)點：

children // 子元素 firstElementChild // 第一個子元素 previousElementSibling // 前一個兄弟元素 parentElement // 父元素

document.documentElement的父節(jié)點為 document，但父元素節(jié)點為 null。

若要從任意節(jié)點到達 <html> 元素節(jié)點：

let elem = document.getElementById("a"); while (elem = elem.parentElement) {console.log(elem); }

遍歷元素：

for (let elem of document.body.children) {console.log(elem); }

應用例子

<html> <body><div>Users:</div><ul><li>John</li><li>Pete</li></ul> </body> </html>

從上面的 HTML 中獲取 div；

獲取第二個 li 元素

document.body.firstElementChild; document.body.children[1].lastElementChild

3. 搜索元素

getElementById

通過 document.getElementById('id') 方法可以獲取具有 id 屬性的元素，如：

<div id="elem"><p id="text">text</p> </div><script>let elem = document.getElementById('text');elem.style.color = 'orange'; </script>

補充：實際上直接使用 id 作為變量名也可以實現(xiàn)，但不建議！

querySelectorAll

最常用的方法是：elem.querySelectorALL(css)，css 是一個 css 選擇器：

<body><div><ol><li>a</li><li>b</li></ol><p>b</p></div> </body><script>let element = document.querySelectorAll('ol > li:last-child');element[0].style.color = 'red'; </script>

querySelector

elem.querySelector(css)也很常用，返回第一個與給定的 CSS 選擇器匹配的元素。它等價于 elem.querySelectorAll(css)[0]

matches

使用 elem.matches(css) 可以檢查 elem 是否與給定的 CSS 匹配，返回 true 或 false。

在遍歷是可以利用 matches來進一步篩選元素：

<body><ol><li id="a.cn">a</li><li id="b.com">b</li><li id="c.org">c</li><li id="d.com">d</li></ol> </body><script>let element = document.querySelectorAll('ol > li');for (let elem of element) {// 匹配 id 屬性以 com 結尾的 li 標簽if (elem.matches('li[id$="com"]')) {console.log(elem);}} </script>

getElementsBy*

有以下三種方法：

getElementsByTagName(tag)：查找具有給定標簽的元素；

getElementsByClassName(className)：返回具有給定 CSS類的元素；

getElementsByName(name)：返回具有 name 屬性的元素，不常用。

注意：

不能漏了s

返回值為一個集合

3.1 實時性

看一個小例子：

<div>first</div><script>let divs = document.getElementsByTagName('div');console.log(divs.length); // 1 </script><div>second</div><script>console.log(divs.length); // 2 </script>

從上面的例子可以看到：getElementsByTagName 是動態(tài)實時的；querySelector、querySelectorAll 和 getElementById是靜態(tài)的。

應用例子

// 篩選 name="search" 的表單 document.querySelectorAll('form[name="search"]');// 篩選 id 以 com 結尾的 a 標簽 document.querySelectorAll('a[id$="com"]');

4. 節(jié)點屬性

4.1 DOM 節(jié)點類

Node —— 抽象類，充當 DOM 基礎，提供樹的核心功能：parentNode、nextSibling，childNodes 等；

Element —— DOM 元素的基本類，提供元素級的導航，如 children；

HTMLElement —— 最終是 HTML 元素的基本類，包括 HTMLInputElement，htmlBodyElement 和 HTMLAnchorElement 等；

alert(document.body.constructor.name); // HTMLBodyElement

nodeName、tagName 和 nodeType

nodeName：節(jié)點名，有 undefined， #comment 和標簽名

nodeType：元素節(jié)點為 1, 文本節(jié)點為 3, document對象為 9

tagName：標簽名

console.dir(document.body.nodeType); // 1 console.log(document.body.tagName); // BODY

4.2 innerHTML

innerHTML 屬性可以將元素內(nèi)的 HTML 獲取為字符串的形式（不包含外面的標簽，但包括換行），也可以設置內(nèi)容：

<body><div id="text">Hello<b>World</b></div></body><script>elem = document.getElementById('text');console.log(elem.innerHTML); </script>

注意

下面的語句是對 HTML 的重寫（移除舊的內(nèi)容寫入新的內(nèi)容），兩個語句等價：

elem.innerHTML += "..."; elem.innerHTML = elem.innerHTML + "...";

4.3 outerHTML

outerHTML可以獲取完整的 HTML （包含外面的標簽）：

<body><div id="text">Hello<b>World</b></div></body><script>elem = document.getElementById('text');console.log(elem.outerHTML); </script>

4.4 textContent

textContent 可以獲取純文本：

<div id="news"><h1>Headline!</h1><p>Martians attack people!</p> </div><script>// Headline! Martians attack people!alert(news.textContent); </script>

假設有一個用戶輸入的字符串，我們希望將其顯示出來。

使用 innerHTML，我們將其“作為 HTML”插入，帶有所有 HTML 標簽。
使用 textContent，我們將其“作為文本”插入，所有符號（symbol）均按字面意義處理。

<div id="elem1"></div> <div id="elem2"></div><script>let name = prompt("What's your name?", "<b>Winnie-the-Pooh!</b>");elem1.innerHTML = name;elem2.textContent = name; </script>

在大多數(shù)情況下，我們期望來自用戶的文本，并希望將其視為文本對待。我們不希望在我們的網(wǎng)站中出現(xiàn)意料不到的 HTML。

4.5 hidden

hidden 屬性可以設置元素是否隱藏，下面的代碼使用定時函數(shù)設置了標簽是否可見，實現(xiàn)閃爍的效果：

<body><div id="blink">I'm blinking</div> </body><script>let timer = setInterval(() => {let elem = document.querySelector('#blink');elem.hidden = !elem.hidden;}, 1000); </script>

其他屬性

value —— input，select，textarea 標簽的 value

href —— a 標簽的 href

id —— 所有元素的 id 屬性

<body><input type="text" name="fruit" id="fruit"><input type="submit" name="submit" id="submit" onclick="show()"> </body><script>let show = () => {let elem = document.getElementById('fruit');console.log(elem.value);} </script>

此時點擊提交按鈕可以顯示出框內(nèi)的文字內(nèi)容（value）

5. 修改文檔

DOM 修改是創(chuàng)建“實時”頁面的關鍵。

5.1 創(chuàng)建元素

document.createELement(tag) —— 創(chuàng)建元素節(jié)點；

document.createTextNode(text) —— 創(chuàng)建文本節(jié)點；

let div = document.createElement('div'); let textNOde = document.createTextNode('text');

舉個栗子

創(chuàng)建一個 div 標簽：

let div = document.createElement('div'); div.id = 'alert'; div.innerHTML = '<strong>Hello</strong> guys!';

此時元素不能在瀏覽器中顯示出來，需要插入。

5.2 插入方法

有以下常用方法：

node.append(nodes or strings) ：在 node 的末尾插入（放在內(nèi)部）

node.prepend(nodes or strings) ：在 node 的開頭插入（放在內(nèi)部）

node.before(nodes or strings)：在 node 前面插入

node.after(nodes or strings)：在 node 后面插入

node.replaceWith(nodes or strings)：替換 node 的內(nèi)容

如在 ol 標簽插入：

將上面的 div 標簽插入到 document.body：

document.body.append(div);

5.3 節(jié)點移除

使用 node.remove() 移除節(jié)點：

下面的代碼在 ol 的尾部追加了一個 li 標簽，1s 后再刪除 li 標簽：

<body><ol><li>a</li><li>b</li><li>c</li></ol> </body><script>let li = document.createElement('li');li.innerHTML = 'd';document.getElementsByTagName('ol')[0].append(li);let timer = setTimeout(() => li.remove(), 1000); </script>

5.4 克隆節(jié)點

使用 elem.cloneNode(true) 創(chuàng)建元素的一個 “深” 克隆（復制所有特性和子元素）；

使用 elem.cloneNode(false) 創(chuàng)建元素的一個 “深” 克隆；

let div = document.getElementsByName('div')[0]; let div2 = div.cloneNode(true); // 克隆消息

6. 樣式和類

可以用 javascript 設置 style 屬性：

let circle = document.querySelector('#circle'); let le = 0; let timer = setInterval(() => {le += 1;circle.style.left = le + 'px';if (circle.style.left == '650px') {clearInterval(timer);} }, 5);

上面的 HTML 可以讓綠色的圓勻速滾動，通過設置 elem.stle.xx 設置樣式元素的屬性。

可以查看 style：

console.log(document.body.style);

6.1 classList & className

使用 className 可以查看標簽的所有類名；

使用 classList 可以增加 / 刪除標簽類名；

舉個栗子：

<body><div class="class1 class2"></div> </body><script>let div = document.querySelector('div');// 兩個類： class1 class2console.log(div.className);div.classList.add('class3');// 三個類： class1 class2 class3console.log(div.className); </script>

classList 常用方法：

elem.classList.add/remove(class) —— 添加 / 移除

elem.classList.toggle(class) —— 類不存在就添加，否則移出

elem.classList.contains(class) —— 檢查是否有給定類

6.2 應用例子

創(chuàng)建一個 div ，添加內(nèi)容為 Hello，設置顏色為紅色，背景為粉色：

let div = document.createElement('div'); div.innerHTML = 'Hello'; document.body.append(div); div.style.color = 'red'; div.style.backgroundColor = 'pink';

總結

以上是生活随笔為你收集整理的JavaScript 学习笔记 ——document的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： JavaScript document对
下一篇：【SpringBoot学习】35、Spr