JavaScriptBOM與DOM

来源:https://www.cnblogs.com/zxr1002/archive/2022/08/25/16626086.html
-Advertisement-
Play Games

BOM（Browser Object Model）瀏覽器對象模型 目前為止，我們已經學習了javaScript的一些簡單的語法。但是這些簡單的語法，並沒有和瀏覽器有任何交互。也就是我們還不能製作一些我們經常看到的網頁的一些交互，我們需要繼續學習BOM和DOM相關知識。 Javascript 由三部分 ...


目錄

BOM（Browser Object Model）瀏覽器對象模型

目前為止，我們已經學習了javaScript的一些簡單的語法。但是這些簡單的語法，並沒有和瀏覽器有任何交互。也就是我們還不能製作一些我們經常看到的網頁的一些交互，我們需要繼續學習BOM和DOM相關知識。

Javascript 由三部分構成，ECMAScript，DOM和BOM。

BOM（Browser Object Model）是指瀏覽器對象模型，它使 JavaScript 有能力與瀏覽器進行“對話”。

DOM （Document Object Model）是指文檔對象模型，通過它，可以訪問HTML文檔的所有元素

window對象

所有瀏覽器都支持 window 對象。它表示瀏覽器視窗。

常用的Window方法

window.innerHeight - 瀏覽器視窗的內部高度
window.innerWidth - 瀏覽器視窗的內部寬度
window.open() - 打開新視窗
window.close() - 關閉當前視窗

window的子對象

瀏覽器對象，通過這個對象可以判定用戶所使用的瀏覽器，包含了瀏覽器相關信息。

1.瀏覽器全稱
window.navigator.appName

輸出結果:
"Netscape"


2.瀏覽器廠商和版本的詳細字元串
window.navigator.appVersion

輸出結果:
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36'


3.用來標識\效驗當前是否是一個瀏覽器 是否存在(userAgent)參數
window.navigator.userAgent

輸出結果:
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36'

4.查看當前平臺
window.navigator.platform

image
擴展(user-agent)網站仿爬措施

1.最簡單最常用的一個就是校驗當前請求的發起者是否是一個瀏覽器 userAgent

    user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36

如何破解該措施？
        在你的代碼中加上上面的user-agent配置即可

history對象

瀏覽歷史對象，包含了用戶對當前頁面的瀏覽歷史，但我們無法查看具體的地址，可以簡單的用來前進或後退一個頁面。

history.forward()  // 前進一頁
history.back()  // 後退一頁

image

location對象

window.location 對象用於獲得當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面。

location.href  獲取URL
location.href="URL" // 跳轉到指定頁面
location.reload() 重新載入頁面

image
location.href = 'https://www.sogo.com/'
image

彈出框

可以在 JavaScript 中創建三種消息框：警告框、確認框、提示框。

警告框

警告框經常用於確保用戶可以得到某些信息。
當警告框出現後，用戶需要點擊確定按鈕才能繼續進行操作。
alert("警告框");

image

確認框

確認框用於使用戶可以驗證或者接受某些信息。
當確認框出現後，用戶需要點擊確定或者取消按鈕才能繼續進行操作。
如果用戶點擊確認，那麼返回值為 true。如果用戶點擊取消，那麼返回值為 false。
confirm("你確定嗎？")

image

提示框

提示框經常用於提示用戶在進入頁面前輸入某個值。
當提示框出現後，用戶需要輸入某個值，然後點擊確認或取消按鈕才能繼續操縱。
如果用戶點擊確認，那麼返回值為輸入的值。如果用戶點擊取消，那麼返回值為 null。
prompt("請在下方輸入","你的答案")

image

計時相關

通過使用 JavaScript，我們可以在一定時間間隔之後來執行代碼，而不是在函數被調用後立即執行。我們稱之為計時事件。

  • 過一段時間之後觸發
  • 每隔一段時間觸發一次

案例：過一段時間之後觸發（一次）3秒觸發一次，可以取消定時任務，就不會進行執行

<script>
    function func1() {
        alert(123)
    }
    // 毫秒為單位 3秒之後自動執行func1函數
    let t = setTimeout(func1,3000);

// 取消定時任務  如果你想要清除定時任務 需要提前用變數指代定時任務
   clearTimeout(t)
</script>

image
限制每隔3秒觸發執行一次，九秒後觸發 停止執行。

<script>	
	function func2() {
        alert(123)
    }
    function show(){
        let t = setInterval(func2,3000);  // 每隔3秒執行一次
        function inner(){
            clearInterval(t)  // 清除定時器
        }
        setTimeout(inner,9000)  // 9秒中之後觸發/執行
    }
    show()
</script>

DOM （Document Object Model）文檔對象模型

DOM 是一套對文檔的內容進行抽象和概念化的方法。
當網頁被載入時，瀏覽器會創建頁面的文檔對象模型(Document Object Model)。
HTML DOM 模型被構造為對象的數。

image

DOM標準規定HTML文檔中的每個成分都是一個節點(node)

文檔節點(document對象)：代表整個文檔
元素節點(element 對象)：代表一個元素（標簽）
文本節點(text對象)：代表元素（標簽）中的文本
屬性節點(attribute對象)：代表一個屬性，元素（標簽）才有屬性
註釋是註釋節點(comment對象)

所有的標簽都可以稱之為是節點

查找標簽

當我們的js文件中涉及到了查找標簽的時候，確保能找到該標簽，我們要把js文件放入body裡面最下麵，因為代碼是向下走，走到最下麵的時候，說明所有涉及到的標簽都已經存在了，就可以使用了，不會存在找不到的情況

id查找 類查找 標簽查找（直接查找）

document.getElementById()
    	根據id值查找標簽 結果直接是標簽對象本身
document.getElementsByClassName()
    	根據class值查找標簽 結果是數組類型
document.getElementsByTagName()
    	根據標簽名查找標簽 結果是數組類型

代碼練習

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="d2">div
    <div>div>div</div>
    <p class="c1">div>p
        <span>div>p>span</span>
    </p>
    <p>div>p</p>
</div>
<div>div+div</div>
</body>
</html>

1.id查詢

註意三個方法的返回值是不一樣的
document.getElementById('d1')  # id查詢(唯一)

輸出結果:
<div id=​"d1">​…​</div>​  // id不存在的話返回null

image

2.類查詢（多個標簽對象返回數組）

document.getElementsByClassName('c1')  # 返回數組
 
輸出結果:
HTMLCollection(2) [div.c1, p.c1]

註意:
Element與Elements區別
Element：代表查詢單個元素
Elements: 代表查詢多個元素

image

3.標簽查詢（多個標簽對象返回 數組）

document.getElementsByTagName('div')  # 數組

輸出結果:
HTMLCollection(3) [div#d1, div, div, d1: div#d1]

索引取值方法(獲取標簽數組內容)
document.getElementsByTagName('div')[1]

image

變數名 存儲方法

let divEle = document.getElementsByTagName('div')[1]
# 列印變數
divEle
輸出結果:
<div class="c1">div</div>

image
註意:(存儲變數名

當你用變數名指代標簽對象的時候 一般情況下都推薦你書寫成(見名知意)
以下示例:

xxxEle
divEle
aEle
pEle

ps:動態創建 臨時有效 非永久

間接查找（熟悉）

parentElement            父節點標簽元素
children                 所有子標簽
firstElementChild        第一個子標簽元素
lastElementChild         最後一個子標簽元素
nextElementSibling       下一個兄弟標簽元素
previousElementSibling   上一個兄弟標簽元素

1.生成變數名（存儲變數名）

let divEle = document.getElementById('d1')

2.拿父節點（找父標簽）

let divEle = document.getElementById('d1')
divEle.parentElement

image

3.找所有的子標簽

divEle.children
返回結果：
HTMLCollection(3) [p, span, p]

image

4.找第一個孩子

divEle.firstElementChild

image

節點操作

1.需求

1.通過DOM操作動態的創建a標簽
2.並且給標簽加屬性
3.最後將a標簽追加到div標簽尾部文本中

2.創建標簽

臨時操作(刷新丟失)
1.創建標簽
    let XXXEle = document.createElement('標簽名')
2.添加預設屬性值
    XXXEle.id = 'id值'
3.添加內部文本
    XXXEle.innerText = '內部文本'
4.尾部添加
divEle.append(XXXEle)

3.屬性操作

XXXEle.屬性              只能是預設屬性
XXXEle.setAttribute()    預設屬性、自定義屬性(可以只記住這個)

例子：
1.既可以設置自定義的屬性也可以設置預設的書寫
imgEle.setAttribute('username','jason')
undefined
2.列印標簽
imgEle
<img src=​"111.png" username=​"jason">​

4.文本操作

divEle.innerText  # 獲取標簽內部所有的文本

輸出結果:
"div 百度
div>p
div>span"

divEle.innerHTML  # 內部文本和標簽都拿到

輸出結果:
"div
<a href="https://www.baidu.com/">百度</a><p id="d2">div&gt;p</p>
<span>div&gt;span</span>"

 對比innerText與innerHTML區別   

divEle.innerText = 'heiheihei'
"heiheihei"

divEle.innerHTML = 'hahahaha'
"hahahaha"

divEle.innerText = '<h1>heiheihei</h1>'  # 不識別html標簽
"<h1>heiheihei</h1>"

divEle.innerHTML = '<h1>hahahaha</h1>'  # 識別html標簽
"<h1>hahahaha</h1>"

總結它們倆個的區別

innerText: 只能獲取標簽內部的文本 設置文本的時候不識別HTML標簽

innerHTML: 文本和標簽都獲取 設置文本的時候識別HTML標簽

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • js獲取值操作、js類屬性操作、事件
    js獲取值操作 1.獲取用戶數據標簽內部的數據 >HTML代碼 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" ...
  • 記錄--Three.js的簡單使用，Three.js在vue3.x中導入.pcd三維模型文件
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 本文說明 本文主要簡單介紹了，在Vue3.x項目中如何簡單的使用Three.js，導入PCD三維模型文件。 模型顯示 項目實現 第一步 首先創建一個vue3.x，的項目，然後需要先有一個 .pcd三維模型文件，如果有的話，將三維點雲文件放 ...
  • Docsify使用指南，使用Typora+Docsify打造最強、最輕量級的個人&團隊文檔，及免費和開源且低成本文檔工具
    隨著學習知識的積累，我們需要掌握的知識越來越多，這是就有一個問題出現了，如何把我們學習到的知識整理起來，讓我們更方便的去管理和閱讀，同事還想把我們所學習到的知識分析個小伙伴。這是我們就需要一個很方便的味文檔管理工具了，在這裡就給大家介紹一個款線上免費開源的文檔管工具【Docsify-Plus文檔工具 ...
  • 數組中push和concat的區別
    數組中的push和concat push的定義 向數組的末尾添加一個或更多元素，返回值為數組添加元素後的長度。 concat的定義 連接兩個或更多的數組，並返回結果。該方法不會改變現有的數組，而僅僅會返回被連接數組的一個副本。 // push方法 var a = [1,2,3]; console.l ...
  • 有意思的方向裁切 overflow: clip
    本文將介紹一個新特性，從 Chrome 90 開始，overflow 新增的一個新特性 -- overflow: clip，使用它，輕鬆的對溢出方向進行控制。 overflow: clip 為何 首先，簡單介紹下 overflow: clip 的用法。 overflow: clip: 與 overf ...
  • vue+node跨域解決方案
    跨域解決方法 後端解決 後端需要在介面位置前加入以下代碼就行拉 親測有效 這個是允許所有的功能變數名稱訪問 // 設置跨域 router.all("*", function (req, res, next) { res.header("Access-Control-Allow-Origin", "*"); ...
  • Vue刷新頁面VueX中數據清空了，怎麼重新獲取？
    Vue刷新頁面VueX數據清空了，怎麼重新獲取？ 點擊打開視頻講解更詳細 在vue中刷新頁面後，vuex中的數據就沒有了，這時我們要想使用就要重新獲取數據了， 怎麼在刷新後重新獲取數據呢？？？ 這時我們就可以寫個公共的方法，在公共頁面（可以是根頁面）判斷store倉庫中數據是否為空，若為空的話，就可 ...
  • js有了var為什麼還要有let和const？
    為什麼javascript中有那麼多聲明變數的方式，明明是弱類型的語言，確有三個關鍵字？ 最早的是var，這是es6之前的聲明方式，既然有了var為什麼還要有let 和 const呢？ 原因很簡單，這是因為var有一些問題不夠方便。 首先是作用域，在一個函數內只要聲明一個var，內部可以任意調用，比 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類