JavaScript【5】DOM模型

1.概述：

DOM (Document Object Model)：當頁面被加載時，瀏覽器會創建頁面的文檔對象模型，即dom對象；

dom對象會被結構化為對象樹，如一個HTML文檔會被分為head，body等部分，而每個部分又被繼續細分，其中每個標簽都是一個對象，即形成一個對象樹，如下如所示：

 ![](https://cdn.nlark.com/yuque/0/2024/png/45532635/1731920399363-3ef54c48-a208-4142-8d08-4bf88e7c9933.png)

2.節點：

1.概述：節點是HTML文檔的基本組成單位；

2.分類：

  •     **文檔節點 ：整個HTML頁面**

  •     **        元素節點 ：HTML中的標簽**

  •     **        屬性節點 ：標簽的屬性**

  •     **        文本節點 ：HTML標簽的文本內容**

3.獲取元素節點：

1.通過標簽id獲取：getElementById（）；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<button id="btn" class="btnA">我是按鈕A</button>
<button  class="btnA">我是按鈕B</button>
<ul class="list"><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li>
</ul>
<script>//通過id獲取console.log( document.getElementById('btn'))</script>
</body>
</html>

2.通過class屬性名獲取：getElementsByClassName（）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<button id="btn" class="btnA">我是按鈕A</button>
<button  class="btnA">我是按鈕B</button>
<ul class="list"><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li>
</ul>
<script>console.log( document.getElementsByClassName('btnA'))</script>
</body>
</html>

3.通過標簽名獲取：getElementsByTagName（）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<button id="btn" class="btnA">我是按鈕A</button>
<button  class="btnA">我是按鈕B</button>
<ul class="list"><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li>
</ul>
<script>//通過標簽名獲取console.log(document.getElementsByTagName('button'))</script>
</body>
</html>

4.通過選擇器獲取：

  •      querySelector:獲取一個

  •      querySelectorAll：獲取多個

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<button id="btn" class="btnA">我是按鈕A</button>
<button  class="btnA">我是按鈕B</button>
<ul class="list"><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li>
</ul>
<script>//通過選擇器精確獲取let list = document.querySelectorAll(".list li");console.log(list);
</script>
</body>
</html>

4.獲取HTML值：

1.獲取/修改文本內容：innerText

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box"><button id="btn">我是按鈕</button><input type="text" id="userCode" value="我是默認值"/>
</div><script>let btn = document.getElementById("btn");//獲取 標簽的文本屬性console.log(btn.innerText)//改變 標簽的文本屬性btn.innerText = '點我試試'let box = document.getElementById("box");//獲取div的文本屬性// console.log(box.innerText)// 獲取div中 帶有HTML的文本屬性// console.log(box.innerHTML)//設置帶有HTML結構的文本屬性 到box中// box.innerHTML += "<b>測試數據</b>";
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box"><button id="btn">我是按鈕</button><input type="text" id="userCode" value="我是默認值"/>
</div><script>let box = document.getElementById("box");//獲取div的文本屬性console.log(box.innerText)//獲取div中 帶有HTML的文本屬性console.log(box.innerHTML)//設置帶有HTML結構的文本屬性 到box中box.innerHTML += "<b>測試數據</b>";
</script>
</body>
</html>

2.獲取/修改元素屬性值：

方式1：對象名.屬性名
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box"><button id="btn">我是按鈕</button><input type="text" id="userCode" value="我是默認值"/>
</div><script>let userCode = document.getElementById("userCode");//獲取元素的屬性 對象名.屬性名// console.log(userCode.value)//改變屬性值// userCode.value = "測試數據"
</script>
</body>
</html>

方式2：getAttribute（‘屬性名’）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box"><button id="btn">我是按鈕</button><input type="text" id="userCode" value="我是默認值"/>
</div><script>//獲取 元素的屬性 值 getAttribute("屬性名")let value = userCode.getAttribute("value")console.log(value)//設置屬性值 到屬性中userCode.setAttribute("value","測試數據");
</script>
</body>
</html>

5.獲取父子節點：

1.獲取父節點：parentNode/parentElement

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="box"><ul id="ul"><li><a href="#">點我試試A</a></li><li id="two"><a href="#">點我試試B</a></li><li><a href="#">點我試試1</a></li><li><a href="#">點我試試2</a></li></ul>
</div><script>let box = document.getElementById("box");let ul = document.getElementById("ul");let two = document.getElementById("two");//獲取父級節點console.log(ul.parentNode)console.log(ul.parentElement)
</script>
</body>
</html>

              ![](https://cdn.nlark.com/yuque/0/2024/png/45532635/1731923954376-33448942-eb1d-4a2b-8962-c063d49bf8a5.png)

2.獲取子節點：childNodes/children

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="box"><ul id="ul"><li><a href="#">點我試試A</a></li><li id="two"><a href="#">點我試試B</a></li><li><a href="#">點我試試1</a></li><li><a href="#">點我試試2</a></li></ul>
</div><script>let box = document.getElementById("box");let ul = document.getElementById("ul");let two = document.getElementById("two");//獲取子級節點// console.log(box.childNodes)//包括 換行// console.log(box.children)//不包括 換行
</script>
</body>
</html>

3.獲取第一個或最后一個子節點：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="box"><ul id="ul"><li><a href="#">點我試試A</a></li><li id="two"><a href="#">點我試試B</a></li><li><a href="#">點我試試1</a></li><li><a href="#">點我試試2</a></li></ul>
</div><script>let box = document.getElementById("box");let ul = document.getElementById("ul");let two = document.getElementById("two");//獲取子級節點// console.log(ul.firstChild) // 包括 換行// console.log(ul.firstElementChild)//不包括 換行// console.log(ul.lastChild) // 包括 換行// console.log(ul.lastElementChild)//不包括 換行
</script>
</body>
</html>

4.獲取前置或后置子節點：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="box"><ul id="ul"><li><a href="#">點我試試A</a></li><li id="two"><a href="#">點我試試B</a></li><li><a href="#">點我試試1</a></li><li><a href="#">點我試試2</a></li></ul>
</div><script>let box = document.getElementById("box");let ul = document.getElementById("ul");let two = document.getElementById("two");//獲取子級節點// console.log(two.previousSibling)// 包括 換行// console.log(two.previousElementSibling)//不包括 換行// console.log(two.nextSibling)// 包括 換行// console.log(two.nextElementSibling)//不包括 換行</script>
</body>
</html>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/81404.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/81404.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/81404.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

STM32燒錄程序正常，但是運行異常

STM32燒錄程序正常，但是運行異常

一、硬件配置問題 BOOT引腳設置錯誤 STM32的啟動模式由BOOT0和BOOT1引腳決定。若設置為從RAM啟動&#xff08;BOOT01&#xff0c;BOOT10&#xff09;&#xff0c;程序在掉電后無法保存&#xff0c;導致復位后無法正常運行。應確保BOOT00&#xff08;從Flash啟動&#xff09;15。…
閱讀更多...
汽車二自由度系統模型以及電動助力轉向系統模型

汽車二自由度系統模型以及電動助力轉向系統模型

汽車二自由度系統模型與電動助力轉向系統&#xff08;EPS&#xff09;的詳細建模方案&#xff0c;包含理論推導、MATLAB/Simulink實現代碼及參數說明&#xff1a; 一、二自由度汽車模型 1. 模型描述 包含以下兩個自由度&#xff1a; 橫向運動&#xff08;側向加速度&#xf…
閱讀更多...
git提交庫常用詞

git提交庫常用詞

新功能 feat修改BUG fix文檔修改 docs格式修改 style重構 refactor性能提升 perf測試 test構建系統 build對CI配置文件修改 ci修改構建流程、或增加依賴庫、工具 chore回滾版本 revert
閱讀更多...
JavaScript 時間轉換：從 HH:mm:ss 到十進制小時及反向轉換

JavaScript 時間轉換：從 HH:mm:ss 到十進制小時及反向轉換

關鍵點 JavaScript 可以輕松實現時間格式&#xff08;HH:mm:ss 或 HH:mm&#xff09;與十進制小時&#xff08;如 17.5&#xff09;的相互轉換。兩個函數分別處理時間字符串到十進制小時&#xff0c;以及十進制小時到時間字符串的轉換&#xff0c;支持靈活的輸入和輸出格式。這…
閱讀更多...
LLM智能體新紀元：深入解析MCP與A2A協議，賦能智能自動化協作

LLM智能體新紀元：深入解析MCP與A2A協議，賦能智能自動化協作

LLM智能體&#xff08;LLM agents&#xff09;是能夠自主行動以實現特定目標的AI系統。在實際應用中&#xff0c;智能體能夠將用戶請求拆解為多個步驟&#xff0c;利用知識庫或API獲取數據&#xff0c;最終整合出答案。這讓智能體相比于傳統獨立聊天機器人擁有更強大的能力——…
閱讀更多...
[PMIC]PMIC重要知識點總結

[PMIC]PMIC重要知識點總結

PMIC重要知識點總結 摘要&#xff1a;PMIC (Power Management Integrated Circuit) 是現代電子設備中至關重要的組件&#xff0c;負責電源管理&#xff0c;包括電壓調節、電源轉換、電池管理和功耗優化等。PMIC 中的數字部分主要涉及控制邏輯、狀態機、寄存器配置、通信接口&am…
閱讀更多...
PYTHON訓練營DAY28

PYTHON訓練營DAY28

類 &#xff08;一&#xff09;題目1&#xff1a;定義圓&#xff08;Circle&#xff09;類 要求&#xff1a; 包含屬性&#xff1a;半徑 radius。包含方法&#xff1a; calculate_area()&#xff1a;計算圓的面積&#xff08;公式&#xff1a;πr&#xff09;。calculate_circ…
閱讀更多...
機器學習-人與機器生數據的區分模型測試 -數據篩選

機器學習-人與機器生數據的區分模型測試 -數據篩選

內容繼續機器學習-人與機器生數據的區分模型測試 使用隨機森林的弱學習樹來篩選相對穩定的特征數據 # 隨機森林篩選特征 X data.drop([city, target], axis1) # 去除修改前的城市名稱列和目標變量列 y data[target] X_train, X_test, y_train, y_test train_test_split(X…
閱讀更多...
Data whale LLM universe

Data whale LLM universe

使用LLM API開發應用 基本概念 Prompt Prompt 最初指的是自然語言處理研究人員為下游任務設計的一種任務專屬的輸入模板。 Temperature 使用Temperature參數控制LLM生成結果的隨機性和創造性&#xff0c;一般取值設置在0~1之間&#xff0c;當取值接近1的時候預測的隨機性較…
閱讀更多...
Azure 應用的托管身份與服務主體

Azure 應用的托管身份與服務主體

Microsoft Entra ID -- 前稱 Azure Active Directory -- 提供強大的身份驗證和授權功能。托管身份和服務主體通過限制憑據暴露的風險來幫助確保對 Azure 資源的訪問安全。 托管身份為Azure原生應用程序自動管理身份&#xff0c;而服務主體則非常適合需要訪問Azure資源的外部應…
閱讀更多...
16 C 語言布爾類型與 sizeof 運算符詳解：布爾類型的三種聲明方式、執行時間、賦值規則

16 C 語言布爾類型與 sizeof 運算符詳解：布爾類型的三種聲明方式、執行時間、賦值規則

1 布爾類型 1.1 布爾類型概述 布爾類型用于表示邏輯上的真&#xff08;true&#xff09;和假&#xff08;false&#xff09;兩種狀態&#xff0c;是編程中條件判斷和邏輯運算的基礎。在 C 語言中&#xff0c;布爾值的表示方式隨著標準的發展而不斷完善。 1.2 布爾類型的三種聲…
閱讀更多...
【C++詳解】string各種接口如何使用保姆級攻略

【C++詳解】string各種接口如何使用保姆級攻略

文章目錄 一、string介紹二、string使用構造函數析構函數賦值運算符重載string的遍歷修改方法1、下標[]2、迭代器3、范圍for 迭代器使用詳解const迭代器反向迭代器&#xff08;reverse) Capacity(容量相關)size/lengthmax_sizecapacityclear/emptyshrink_to_fit(縮容)reserve(擴…
閱讀更多...
回調函數應用示例

回調函數應用示例

回調函數是一種通過函數指針&#xff08;或引用&#xff09;調用的函數&#xff0c;它在特定事件或條件發生時被另一個函數調用。回調函數的核心思想是將函數作為參數傳遞&#xff0c;以便在適當的時候執行自定義邏輯&#xff0c;常用于異步編程、事件驅動架構等場景。 業務場景…
閱讀更多...
linux標準庫頭文件解析

linux標準庫頭文件解析

linuxc標準庫 C 標準庫&#xff08;C Standard Library&#xff09;包含了一組頭文件&#xff0c;這些頭文件提供了許多函數和宏&#xff0c;用于處理輸入輸出、字符串操作、數學計算、內存管理等常見編程任務。。 頭文件功能簡介<stdio.h>標準輸入輸出庫&#xff0c;包含…
閱讀更多...
Unbuntu 命令

Unbuntu 命令

Ubuntu 命令速查表? ?分類??命令??功能描述??示例/常用選項????文件與目錄?ls列出目錄內容ls -a&#xff08;顯示隱藏文件&#xff09;; ls -lh&#xff08;詳細列表易讀大小&#xff09; cd切換目錄cd ~&#xff08;主目錄&#xff09;; cd ..&#xff08;上級…
閱讀更多...
怎么在excel單元格1-5行中在原來內容前面加上固定一個字？

怎么在excel單元格1-5行中在原來內容前面加上固定一個字？

環境&#xff1a; WPS 2024 問題描述&#xff1a; 怎么在excel單元格1-5行中在原來內容前面加上固定一個字&#xff1f; 解決方案&#xff1a; 1.在Excel中&#xff0c;如果您想在單元格的內容前面添加一個固定的字&#xff0c;可以通過以下幾種方法實現&#xff1a; 方法…
閱讀更多...
Linux zip、unzip 壓縮和解壓

Linux zip、unzip 壓縮和解壓

zip 命令用于壓縮文件&#xff0c;壓縮后的文件后綴名為 .zip 。 對應的解壓命令是 unzip 。 測試用的目錄結構如下&#xff0c; userzn:~/test$ tree . ├── folder1 │ ├── folder111 │ │ └── file1.txt │ └── main1.c ├── folder2 │ ├── …
閱讀更多...
【C語言練習】047. 理解遞歸與循環的轉換

【C語言練習】047. 理解遞歸與循環的轉換

047. 理解遞歸與循環的轉換 047. 理解遞歸與循環的轉換1. 遞歸與循環的基本概念遞歸循環2. 遞歸與循環的轉換示例1：計算階乘示例2：漢諾塔問題3. 遞歸與循環的適用場景遞歸：循環：一、遞歸的適用場景與代碼示例1. 分治問題2. 樹形結構遍歷3. 復雜狀態問題二、循環的適用場景與…
閱讀更多...
我的創作紀念日——《驚變256天》

我的創作紀念日——《驚變256天》

我的創作紀念日——《驚變256天》 機緣收獲日常成就憧憬 最近&#xff0c;博主收到了 CSDN 發來的系統消息&#xff0c;這才驚覺&#xff0c;自上次第128天創作紀念日之后&#xff0c;竟又悄然走過了 128 天。站在 256 天這個頗具意義的里程碑前回望&#xff0c;博主在2023 年 …
閱讀更多...
Redis 事務與管道：原理、區別與應用實踐

Redis 事務與管道：原理、區別與應用實踐

在現代分布式系統開發中&#xff0c;Redis 作為高性能的內存數據庫&#xff0c;其事務處理和管道技術是開發者必須掌握的核心知識點。本文將深入探討 Redis 事務和管道的實現原理、使用場景、性能差異以及最佳實踐&#xff0c;幫助開發者根據實際需求選擇合適的技術方案。 一、…
閱讀更多...
最新文章

Copyright @ 2022~2023