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

javascript

JavaScript 学习笔记 ——document

發布時間：2023/12/16 javascript 63 豆豆

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

1. 瀏覽器環境

JavaScript 語言最初是為 Web 瀏覽器創建的。此后，它已經發展成為一種具有多種用途和平臺的語言。

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

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

1.1 DOM 文檔對象模型

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

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

1.2 BOM 瀏覽器對象模型

BOM表示由瀏覽器提供的用于處理 document 之外的所有內容的其他對象，如 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 是根節點，head 和 body 是它的字節點；
元素內的文本形成 文本節點，被標記為 #text，如 title 中的 “document”，包括換行、縮進和空格。
若瀏覽器遇到不正確的 HTML，會在形成 DOM 時自動更正。

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

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

doxument —— DOM 入口

元素節點 —— HTML 標簽

文本標簽 —— 包含文本

注釋 —— 讀取注釋信息

2.2 遍歷 DOM

頂層

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

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

子節點

使用 childNodes、firstChild 和 lastChild訪問子節點，如訪問 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

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

DOM 集合

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

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

注意

DOM 集合是只讀的

不要用 for…in 遍歷集合

兄弟節點和父節點

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

2.3 純元素導航

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

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

document.documentElement的父節點為 document，但父元素節點為 null。

若要從任意節點到達 <html> 元素節點：

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 作為變量名也可以實現，但不建議！

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 是動態實時的；querySelector、querySelectorAll 和 getElementById是靜態的。

應用例子

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

4. 節點屬性

4.1 DOM 節點類

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

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

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

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

nodeName、tagName 和 nodeType

nodeName：節點名，有 undefined， #comment 和標簽名

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

tagName：標簽名

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

4.2 innerHTML

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

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

注意

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

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>

在大多數情況下，我們期望來自用戶的文本，并希望將其視為文本對待。我們不希望在我們的網站中出現意料不到的 HTML。

4.5 hidden

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

<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>

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

5. 修改文檔

DOM 修改是創建“實時”頁面的關鍵。

5.1 創建元素

document.createELement(tag) —— 創建元素節點；

document.createTextNode(text) —— 創建文本節點；

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

舉個栗子

創建一個 div 標簽：

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

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

5.2 插入方法

有以下常用方法：

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

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

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

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

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

如在 ol 標簽插入：

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

document.body.append(div);

5.3 節點移除

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

下面的代碼在 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 克隆節點

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

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

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 應用例子

創建一個 div ，添加內容為 Hello，設置顏色為紅色，背景為粉色：

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

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