DOM和BOM相關

阿新 • • 發佈：2022-06-06

DOM，對頁面上的HTML標籤進行操作。

　　DOM：文件物件模型，js程式碼去操作HTML標籤

document.getElementById("content")

　　BOM：瀏覽器物件模型，瀏覽器內建功能

alert("點選了");
confirm("是否刪除")；
//    setInterval(function (){
//        console.log(123);
//    }, 1000);  //定時呼叫函式

注意：用這兩個模組可以實現頁面的所有效果。但是比較費勁，所以jQuery誕生，這是一個別人封裝好了的模組（類庫），程式碼量更少的實現我們想要的功能。

var tag' = document.getElementById("content")；
使用jQuery後可以寫成如下
${"#content"}

案例：選單切換

切換

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .group{
            width: 300px;
            border: 1px solid #ddd;
        }
        .group .header{
            background-color: gold;
            padding: 8px 5px;
        }
        .group .menu a{
            display: block;
        }
         
/*隱藏樣式*/
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div class="group">
        <div class="item">
            <div class="header" onclick="clickMenu(this);">頭部</div>
            <div class="menu">
                <a href="https://www.cnblogs.com/liunaixu/">選單1</a>
                <a href="https://www.cnblogs.com/liunaixu/">選單2</a>
            </div>
        </div>
        <div class="item">
            <div class="header" onclick="clickMenu(this);">頭部</div>
            <div class="menu">
                <a href="https://www.cnblogs.com/liunaixu/">選單1</a>
                <a href="https://www.cnblogs.com/liunaixu/">選單2</a>
            </div>
        </div>
        <div class="item">
            <div class="header" onclick="clickMenu(this);">頭部</div>
            <div class="menu">
                <a href="https://www.cnblogs.com/liunaixu/">選單1</a>
                <a href="https://www.cnblogs.com/liunaixu/">選單2</a>
            </div>
        </div>
    </div>
    <script>
        function 
 clickMenu(ths) {
            //ths,代指當前點選的標籤

            //1、找到自己下面的一個兄弟標籤

            //2、給他加上一個樣式hide
            var tag = ths.nextElementSibling;
            if(tag.className == "menu"){
                tag.classList.add("hide");
            }else{
                tag.classList.remove("hide");
            }
        }
    </script>
</body>
</html>

由上面可以看出使用DOM比較繁瑣，所以引出jQuery模組

DOM和BOM相關

DOM，對頁面上的HTML標籤進行操作。　　DOM：文件物件模型，js程式碼去操作HTML標籤

dom和bom的區別，以及三類偏移屬性

bom BOM是browser object model的縮寫，簡稱瀏覽器物件模型，提供了獨立於內容而與瀏覽器視窗進行互動的物件；

DOM和BOM的區別

技術標籤：HTMLhtml5html DOM和BOM的區別在瀏覽器中執行的JavaScript可以認為由三部分組成：ECMAScript描述了該語言的語法和基本物件，DOM文件物件模型描述了處理網頁內容的方法和介面，BOM瀏覽器物件模型描述了

web -APIS（dom和BOM)

前言：js的基礎就是為了瀏覽器web端服務，所以有必要知道一下web端的api也就是介面，結合那個web-API的ppt來看。

【拓展知識】DOM和BOM

1、DOM文件物件模型：是W3C組織推薦的處理可擴充套件標誌語言的標準程式設計介面。

總結 DOM、BOM API 中的尺寸與佈局相關屬性和方法

.ex-txt_in-section { color: rgba(128, 128, 128, 1); font-size: 12px; transform: scale(0.6) } .em-txt { font-weight: bold }

總結02（陣列方法的重構，將列表轉為陣列，陣列的複製和去重，DOM與BOM）

陣列方法重構 //push function push(arr){ for(var i=1;i<arguments.length;i++){ arr[arr.length]=arguments[i];

前端之JavaScript函式以及BOM、DOM操作等相關內容-57

函式與BOM、DOM操作 1.函式 1.javascript中的變數提升和函式提升 1、在js中只有兩種作用域

再談BOM和DOM(1):BOM與DOM概述

DOM是為了操作文件出現的介面，瀏覽器向我們提供了當前網頁的地圖或者說模型，而我們可以通過js去讀取這張地圖對html元素進行查詢及修改,BOM主要是處理瀏覽器視窗和框架，比如操作瀏覽器歷史記錄，獲取瀏覽器資訊等

DOM 物件和 BOM 物件

目錄DOM物件1. DOM 簡介2.HTML DOM 樹3. DOM 節點4. DOM 查詢5. DOM 操作6. DOM 事件7. DOM 優化BOM 物件1. window 物件2. Navigator 物件3. Screen 物件4. Location 物件5. History 物件

MySql 儲存引擎和索引相關知識總結

儲存引擎什麼是資料庫儲存引擎？資料庫引擎是資料庫底層軟體元件，不同的儲存引擎提供不同的儲存機制，索引技巧，鎖定水平等功能，使用不同的資料庫引擎，可以獲得特定的功能

Spring和Springboot相關知識點整理

簡介本文主要整理一些Spring & SpringBoot應用時和相關原理的知識點，對於原始碼不做沒有深入的講解。

BOM相關物件的屬性與方法

BOM BOM - Browser Object Model ( 瀏覽器物件模型 )，BOM 主要用於操作與管理瀏覽器相關狀態。BOM 由以 window 物件為主以及其他常用物件如 navigator 、location 、history 、screen 、document 等等功能各異的物

js中BOM相關知識

BOM(browser object module) :瀏覽器物件模型 BOM物件屬性與方法 navigator :獲取客戶瀏覽器資訊

3、init_sequence_f[]中驅動模型和外設相關初始化

本章所涉及的函式如下： 1 static init_fnc_t init_sequence_f[] = { 2arch_cpu_init,/* CPU相關初始化，若沒有，則返回0即可 */

TCP和UDP相關知識

TCP和UDP都是傳輸層的協議，但二者具有不同的特性，也適用於不同的場景。如下表所示：

Django 中URL和Views相關知識梳理（極簡版）

提示：僅供梳理參考，很多相關的細節內容忽略。 1.URL （1）URL匹配的規則是正則，關於正則不再贅述。

《JavaScript 模式》讀書筆記（8）— DOM和瀏覽器模式1

　　在本書的前面章節中，我們主要集中關注於核心JavaScript（ECMAScript），而並沒有太多關注在瀏覽器中使用JavaScript的模式。本章將探索一些瀏覽器特定的模式，因為瀏覽器是使用JavaScript最為常見的環境。同時也

《JavaScript 模式》讀書筆記（8）— DOM和瀏覽器模式2

四、長期執行指令碼　　可能會注意到有時候瀏覽器會提示某個指令碼已經運行了很長時間，是否應該停止該指令碼。實際上無論要處理多麼複雜的任務，都不希望應用程式發生上述事情。而且，如果該指令碼的工作十分繁重，

DOM與BOM

前戲到目前為止，我們已經學過了JavaScript的一些簡單的語法。但是這些簡單的語法，並沒有和瀏覽器有任何互動。

DOM和BOM相關

相關推薦