前端基礎之BOM和DOM操作

来源:https://www.cnblogs.com/setcreed/archive/2019/11/18/11885982.html
-Advertisement-
Play Games

[TOC] BOM和DOM定義 BOM（Browser Object Model）是指瀏覽器對象模型，使JavaScript有能力於瀏覽器進行對話 DOM（Document Object Model）是指文檔對象模型，通過它，可以訪問HTML文檔的所有元素 由於window對象是其它大部分對象的共同 ...


目錄

BOM和DOM定義

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

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

由於window對象是其它大部分對象的共同祖先，在調用window對象的方法和屬性時，可以省略window對象的引用。例如：window.document.write()可以簡寫成：document.write()。

windows對象

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

一些常用的Window方法：

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

windows的子對象

navigator.appName　　// Web瀏覽器全稱
navigator.appVersion　　// Web瀏覽器廠商和版本的詳細字元串
navigator.userAgent　　// 客戶端絕大部分信息
navigator.platform　　　// 瀏覽器運行所在的操作系統

screen對象

screen.availWidth   // 可用的屏幕寬度
screen.availHeight   // 可用的屏幕高度

history對象

瀏覽器歷史對象，包含了用戶對當前頁面的瀏覽歷史

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

location對象

window.loaction對象用於獲得當前頁面的地址（URL），並把瀏覽器重定向到新的頁面

常用的屬性和方法：

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

彈出框

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

警告框

警告框經常用於確保用戶可以得到某些信息。

當警告框出現後，用戶需要點擊確定按鈕才能繼續進行操作。

alert('can you see?')

確認框

用於使用戶

confirm('are you ok?')

提示框

提示框經常用於提示用戶在進入頁面前輸入某個值。

當提示框出現後，用戶需要輸入某個值，然後點擊確認或取消按鈕才能繼續操縱。

如果用戶點擊確認，那麼返回值為輸入的值。如果用戶點擊取消，那麼返回值為 null。

prompt('請輸入你的答案')

計時相關

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

setTimeout()

語法：

var t=setTimeout("JS語句",毫秒)

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function func() {
        alert('hello world!')
    }
    setTimeout(func, 3000)
</script>

</body>
</html>

clearTimeout()

// 在指定時間之後執行一次相應函數
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout設置
clearTimeout(timer);

setInterval()

上面的方法只是設置了一次定時器，setInterval() 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式。它會不停地調用函數

function func() {
        alert('hello world!')
    }

setInterval(func, 3000)  //每隔三秒鐘執行一次

clearInterval()

可取消由setIntertval()設置的timeout

例子

    function func() {
        alert('hello world!')
    }
    function show() {
        var t = setInterval(func, 3000);   // 每隔3秒執行一次
        function inner() {
            clearInterval(t)
        }
        setTimeout(inner, 9000)
    }
    show()

// 每隔3秒彈框一次，3次之後就不在彈框了

HTML DOM樹

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

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

JavaScript 可以通過DOM創建動態的 HTML：

  • JavaScript 能夠改變頁面中的所有 HTML 元素
  • JavaScript 能夠改變頁面中的所有 HTML 屬性
  • JavaScript 能夠改變頁面中的所有 CSS 樣式
  • JavaScript 能夠對頁面中的所有事件做出反應

查找標簽

直接查找

document.getElementById           // 根據ID獲取一個標簽
document.getElementsByClassName   // 根據class屬性獲取
document.getElementsByTagName     // 根據標簽名獲取標簽合集

註意：通過標簽和class查找的結果是數組，通過id獲得的是對象本身

間接查找

parentElement            父節點標簽元素
children                 所有子標簽
firstElementChild        第一個子標簽元素
lastElementChild         最後一個子標簽元素
nextElementSibling       下一個兄弟標簽元素
previousElementSibling   上一個兄弟標簽元素
var pEle = document.getElementById('d1')   // 註意變數的命名
pEle.parentElement


var divEle = document.getElementsByClassName('c1')[0]  // 註意通過class查找結果是數組，要加0取索引

節點操作

創建節點

var divEle = document.createElement("div");

添加節點

somenode.appendChild(newnode)；   // 追加一個子節點（作為最後的子節點）

somenode.insertBefore(newnode,某個節點);   // 把增加的節點放到某個節點的前邊

刪除節點

somenode.removeChild(要刪除的節點)

替換節點

somenode.replaceChild(newnode, 某個節點);

屬性節點

獲取文本節點的值

var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML

設置文本節點的值

var divEle = document.getElementsByClassName('c1')[0]
divEle.innerText = '我很善良'
divEle.innerHTML = '好好學習'
divEle.innerHTML = '<b>好好學習</b>'

attribute操作

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")  // 設置屬性
divEle.getAttribute("age")     // 獲取屬性
divEle.removeAttribute("age")   // 刪除屬性

// 自帶的屬性還可以直接.屬性名來獲取和設置
imgEle.src
imgEle.src="..."

獲取值操作

適用於以下標簽：

  • .input
  • .select
  • .textarea
var iEle = document.getElementById('d1')
iEle.value   // 獲取input內部用戶輸入的內容，通過.value的形式獲取值，支持實時更新

class操作標簽類屬性

var divEle = document.getElementsByTagName('div')[0]

divEle.classList   // 獲取所有樣式類名

divEle.classList.remove(cls)  // 刪除指定類
divEle.classList.add(cls)  // 添加類
divEle.classList.contains(cls)  // 存在返回true，否則返回false
divEle.classList.toggle(cls)  // 存在就刪除，否則添加

css樣式操作

JS操作CSS屬性的規律：

1.對於沒有中橫線的CSS屬性一般直接使用style.屬性名即可。如：

obj.style.margin
obj.style.width
obj.style.left
obj.style.position

2.對含有中橫線的CSS屬性，將中橫線後面的第一個字母換成大寫即可。如：

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

事件

當符合某個條件下，自動觸發的動作/響應

常用事件

onclick        // 當用戶點擊某個對象時調用的事件句柄。
ondblclick     // 當用戶雙擊某個對象時調用的事件句柄。

onfocus        // 元素獲得焦點。               
onblur         // 元素失去焦點。    應用場景：用於表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證.
onchange       // 域的內容被改變。   應用場景：通常用於表單元素,當元素內容被改變時觸發.（select聯動）

onkeydown      // 某個鍵盤按鍵被按下。 應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress     // 某個鍵盤按鍵被按下並鬆開。
onkeyup        // 某個鍵盤按鍵被鬆開。
onload         // 一張頁面或一幅圖像完成載入。
onmousedown    // 滑鼠按鈕被按下。
onmousemove    // 滑鼠被移動。
onmouseout     // 滑鼠從某元素移開。
onmouseover    // 滑鼠移到某元素之上。

onselect      // 在文本框中的文本被選中時發生。
onsubmit      // 確認按鈕被點擊，使用的對象是form。

綁定方式

方式1：

<button onclick="func()">按鈕</button>

<script>
    function func() {
        alert('我被點擊了')
    }
</script>



<div id="d1" onclick="changeColor(this);">點我</div>
<script>
  function changeColor(ths) {
    ths.style.backgroundColor="green";
  }
</script>

this是實參，表示觸發事件的當前元素。

函數定義過程中的ths為形參。

方式2：

<script>
    var i1Ele = document.getElementById('d1');
    i1Ele.onclick = function () {
        // i1Ele標簽被點擊之後 能做的事
        func()
    };

    function func() {
        alert('我被點擊了')
    }
</script>

推薦使用第二種

如何解決js代碼運行報錯的情況

html代碼運行至上而下

  • 方式1
利用onload等待某個對象載入完畢之後再執行
  • 方式2
直接將你的js代碼寫在body最下方

事件實例

點擊變色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            height: 400px;
            width: 400px;
            border-radius: 50%;
        }
        .bg_red {
            background-color: red;
        }
        .bg_green {
            background-color: green;
        }
    </style>
</head>
<body>
<div class="c1 bg_green bg_red"></div>
<button id="d1">變色</button>

<script>
    var btnEle = document.getElementById('d1');
    btnEle.onclick = function () {
        // 找到div標簽
        var divEle = document.getElementsByClassName('c1')[0];
        // 修改類屬性  有則刪除，無則添加
        divEle.classList.toggle('bg_green')
    }
</script>
</body>
</html>

獲取焦點實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" value="python開發" id="d1">
<script>
    var iEle = document.getElementById('d1');
    // input框獲取焦點
    iEle.onfocus = function () {
        // 將input框文本值清楚
        iEle.value = ''
    };
    // input框失去焦點
    iEle.onblur = function () {
        iEle.value = '歡迎下次再來～'
    }
</script>
</body>
</html>

展示當前事件

<!--input框顯示事件1秒1秒走-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="d1">
<button id="b1">開始</button>
<button id="b2">結束</button>
<script>
    // 先定義一個全局變數 用來存儲定時器
    var t = null;

    var b1Ele = document.getElementById('b1');
    var b2Ele = document.getElementById('b2');

    var iEle = document.getElementById('d1');
    function showTime() {
        var currentTime = new Date();
        var ctime = currentTime.toLocaleString();
        iEle.value = ctime
    }
    // 開始按鈕
    b1Ele.onclick = function () {
        t = setInterval(showTime, 1000)
    };
    // 結束按鈕
    b2Ele.onclick = function () {
        clearInterval(t)
    }  // 但是有個問題：當點擊多次開始，點擊結束按鈕不能停止。原因就是點擊多次開始，就生成了多個定時器，而 這裡的t值得是最後一個定時器，前面的定時器還開著呢

</script>

</body>
</html>

省市聯動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select name="" id="d1">省:
<!--    <option value="">&#45;&#45;請選擇&#45;&#45;</option>-->
</select>
<select name="" id="d2">市</select>

<script>
    var s1Ele = document.getElementById('d1');
    var s2Ele = document.getElementById('d2');

    var data = {
        '河北省': ['石家莊', '邢台', '邯鄲'],
        '北京': ['朝陽區', '海澱區', '昌平區'],
        '上海': ['青浦區', '靜安區', '徐匯區']
    };
    // 迴圈自定義對象中的key 動態創建option標簽，添加到第一個選擇框中
    for (let province in data){
        // 創建一個個的option標簽
        var optEle = document.createElement('option');
        // 給創建的option標簽設置文本和屬性
        optEle.innerText = province;
        optEle.value = province;
        // 講創建好的option標簽添加到select框中
        s1Ele.appendChild(optEle)
    }
    s1Ele.onchange = function () {
        //console.log(this.value)  // this指的就是當前操作對象本身，類似於Python中的self
        // 獲取與歐諾個戶選擇的省 根據省取到對應的市
        var currentPro = this.value;
        var cityList = data[currentPro];

        // 先將第二個select框中的所有內容清空
        s2Ele.innerHTML = '';

        // 迴圈市的數組 創建option標簽 操作屬性 添加到第二個select框中
        for (let i=0;i<cityList.length;i++){
            // console.log(cityList[i])
            var optEle = document.createElement('option');
            optEle.innerText = cityList[i];
            optEle.value = cityList[i];
            s2Ele.appendChild(optEle)
        }
    }
</script>
</body>
</html>

補充知識點


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

-Advertisement-
Play Games
更多相關文章
  • mongodb4版本，windows下的安裝與配置（史上步驟最全最詳細+圖解）
    mongodb4.2版本的安裝與配置（windows下），史上最全最基礎最詳細+圖解 ...
  • Flink入門（一）——Apache Flink介紹
    Apache Flink是什麼？ ​ 在當代數據量激增的時代，各種業務場景都有大量的業務數據產生，對於這些不斷產生的數據應該如何進行有效的處理，成為當下大多數公司所面臨的問題。隨著雅虎對hadoop的開源，越來越多的大數據處理技術開始涌入人們的視線，例如目前比較流行的大數據處理引擎Apache Sp ...
  • Bug 28450914 : ORA-600: [KDLRCI_GET_INLINE_DATA] SELECTING FROM CDB_FEATURE_USAGE_STATISTICS
    alert日誌報錯： 2019-11-18T07:15:12.704938+08:00Errors in file /u01/app/oracle/diag/rdbms/sibcyb1/SIBCYB111/trace/SIBCYB111_ora_83111.trc (incident=803537) ...
  • Android Debug 之 Log 最佳實踐
    本文微信公眾號「AndroidTraveler」首發。 背景 在開發過程中，調試是必不可少的一項工作。 當我們要確定項目的邏輯時，當我們要瞭解界面的生命周期時，當我們發現新寫的邏輯與期望效果不一致時，當我們覺得數據有問題時...... 而調試有兩種方式： 第一種就是使用 debug 模式運行 APP ...
  • HTML51-清除浮動overflow、網易註冊界面基本結構搭建
    一、overflow:hidden;作用 （1）可以將超出標簽範圍的內容裁剪掉 （2）清除浮動 .box1{ background-color: red; /*border:1px white solid;*/ overflow: hidden; } .box2{ background-color: ...
  • 如何設置HTML頁面中文本的字體
    字體屬性介紹 中的字體屬性是乾什麼的呢？字體字體肯定和字體有關咯，就是設置 頁面中文本的字體， 中常用的字體屬性有幾種呢，筆者給大家梳理了下，比較常用的一共有 種，今天我們就看看這 種能給文本的字體帶來什麼效果呢。 字體屬性定義文本的字體系列、大小、加粗、風格（如斜體）。 在 中常用的字體屬性有5種 ...
  • JS、JQ相關小技巧積攢
    JS、JQ相關小技巧積攢，以備不時之需。 1.js 獲取時間差：時間戳相減。new Date().getTime() 獲得毫秒數，除以(1000*60*60*24) 獲得天數。 2.重定向操作：頁面重定向：window.location.href="http://..."即可（本頁頁面跳轉）。 3. ...
  • 【前端知識體系】CSS特效實現之Transition和Transform對比
    本文介紹了CSS繪製三角形、CSS高級動畫等知識，並對Transition和Transform的使用進行了對比。 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類