BOM與DOM

時間 2019-11-13

標籤 bom dom 欄目 HTML 简体版

原文原文鏈接

BOM和DOM和ECMAscript的關係：html

BOM是運行平臺，BOM規則創建在ECMAscript的規則之上
DOM是運行在平臺上的頁面
ECMAscript是用來操做平臺或運行在平臺上的頁面的工具node

BOM:瀏覽器對象模型(Browers Object MOdel)數組

window是js中的頂層對象，全部的全局都屬於window;window窗口：提供了瀏覽器的窗口之間的操做。瀏覽器

window對象的常見方法：

alert(要顯示的文本); 彈出信息框

prompt(提示對話框信息); 彈出輸入框，點擊肯定，返回字符串，點擊取消，返回null

confirm(提示文字); 點擊肯定返回true，點擊取消返回false

open(url,name,feature,replace);

open('http://www.baidu.com','_blank','width=300,height=300')

//谷歌會默認把系統自動打開的新網頁阻止掉，但不阻止經過事件打開的網頁

close();關閉瀏覽器。

window對象下內置的子對象：

history對象：該對象包含瀏覽器訪問過的url。

該對象的屬性：

history.length;返回歷史記錄的數量

該對象的方法：

history.back();後退，加載前一個url。

history.forward();前進，須要後退一下以後，纔有前進的方向

history.go(num);參數爲正，前進相應的數目，爲負，後退相應的數目，爲0，刷新

location對象：包含當前url的相關信息，而history對象不能具體反映url的相關信息。

該對象的屬性：

location.href;設置或返回完整的url

location.search;返回url?後面的查詢部分

location.hash;是一個可讀寫的字符串，是url的錨部分（從#開始的部分）哈希

該對象的方法：

location.reload();刷新頁面的方法，通常狀況下，傳遞一個true，不使用緩存刷新。緩存？

location.assign(url);加載新頁面，當url爲空字符時，加載當前頁面

window.onload / onscroll／onresize 事件

onload當文檔加載完成後執行一些操做

1 window.onload = function(){
2         console.log("頁面加載完成")
3     }

onscroll當頁面發生滾動時執行一些操做

1 window.onload = function(){
2         console.log(1)            //當頁面發生滾動時，打印1
3     }

onresize當窗口大小發生改變時執行一些操做

1 window.onresize = function(){
2         console.log(1)            //當窗口大小發生改變時，打印1
3     }

DOM：文檔對象模型(Document Object MOdel )緩存

改變元素的內容(innerHTML)，屬性(value)，樣式(width,height,background)

DOM中的選擇器

元素節點選擇器：app

id:返回的是單個對象;document.getElementById( )工具

class：返回的是數組對象，若是要使用其中的元素，經過索引解析；document.getElementsByClassName( )ui

tagname：返回的是數組對象，若是要使用其中的元素，經過索引解析;document.getElementsByTagName( )url

name:返回的是數組對象，若是要使用其中的元素，經過索引解析;document.getElementsByName( )spa

querySelector：返回的是單個對象;document.querySelector( )

querySelectorAll：返回的是數組對象，若是要使用其中的元素，經過索引解析;document.querySelectorAll( )

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <meta name="viewport" content="width=device-width, initial-scale=1">
 6         <title>選擇器</title>
 7     </head>
 8     <body>
 9         <div id="box">1</div>
10         <div id="box">2</div>
11         <div id="box">3</div>
12         <div class="msg">
13             <div class="sbox">
14                 <h2>標題3</h2>
15                 <h2>標題4</h2>
16             </div>
17             <h2>標題1</h2>
18             <h2>標題2</h2>
19             
20         </div>
21         <div class="cont">4</div>
22         <div class="cont">5</div>
23         <div class="cont">6</div>
24         <span>7</span>
25         <span>8</span>
26         <span>9</span>
27         <input type="text" name="user">
28         <input type="text" name="user">
29         <input type="text" name="pass">
30     </body>
31     <script>
32         //id
33         var box = document.getElementById("box");
34         console.log(box);
35         //class
36         var acont = document.getElementsByClassName("cont");
37         console.log(acont);
38         console.log(acont[0]);
39         console.log(acont[0].innerHTML);
40         console.log(acont.innerHTML);
41         //tagName
42         var aspan = document.getElementsByTagName("span");
43         console.log(aspan);
44         console.log(aspan[0]);
45         //name
46         var auser = document.getElementsByName("user");
47         console.log(auser);
48         //querySelector
49         var ele = document.querySelector("#box");
50         var ele = document.querySelector(".cont");
51         var ele = document.querySelector("span");
52         var ele =document.querySelector(".msg h2");
53         var ele =document.querySelector(".msg>h2")
54         console.log(ele);
55         //querySelectorAll
56         var ele = document.querySelectorAll("#box");
57         var ele = document.querySelectorAll(".cont");
58         var ele = document.querySelectorAll("span");
59         var ele = document.querySelectorAll(".msg h2");
60         var ele = document.querySelectorAll(".msg>h2");
61         console.log(ele);
62     // 父選子：得到子元素節點的集合，不包含空白節點
63         var omsg = document.querySelector(".msg");
64         console.log(omsg.children);
65     // 子選父：得到父元素節點
66         var osbox = document.querySelector(".sbox");
67         console.log(osbox.parentNode);
68     // 第一個子
69         var omsg = document.querySelector(".msg");
70         console.log(omsg.firstElementChild)
71     // 最後一個子
72         var omsg = document.querySelector(".msg");
73         console.log(omsg.lastElementChild)
74     // 上一個兄弟
75         var omsg = document.querySelector(".msg");
76         console.log(omsg.previousElementSibling)
77     // 下一個兄弟
78         var omsg = document.querySelector(".msg");
79         console.log(omsg.nextElementSibling)
80     </script>
81 </html>

其餘節點選擇器：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     <span>qwe</span>
11     <div class="box"><span>1</span>
12         <p>2</p>
13         hello
14         <!-- 這是註釋 -->
15         <em>3</em>
16     </div>
17     <span>zxc</span>
18 </body>
19 <script>
20     // 其餘節點選擇器:
21         // 關係：
22         // 父選子：得到全部子節點的集合，包括空白節點
23             // var obox = document.querySelector(".box")
24             // console.log(obox.childNodes)
25         // 上一個兄弟：
26             // var obox = document.querySelector(".box")
27             // console.log(obox.previousSibling)
28         // 下一個兄弟：
29             // var obox = document.querySelector(".box")
30             // console.log(obox.nextSibling)
31         // 第一個子：
32             // var obox = document.querySelector(".box")
33             // console.log(obox.firstChild)
34         // 最後一個子：
35             var obox = document.querySelector(".box")
36             console.log(obox.lastChild)
37 </script>
38 </html>

DOM屬性的基本操做：

元素的屬性：內置、非內置

非內置屬性須要經過一些節點的方法進行操做，注意：節點的方法，前綴必定是節點

getAttribute() ：獲取元素的屬性

setAttribute()：設置／修改元素的屬性，低版本的IE不兼容;接收兩個參數，屬性名和屬性值

removeAttribute()：刪除元素的屬性，低版本的IE不兼容

節點：

經過遍歷全部子節點，將空白節點過濾掉，得出全部的元素節點；

文檔節點：整個文檔；ownerDocument：獲取該節點的文檔根節點，至關與 document

元素節點：每一個HTML標籤

文本節點：包含在HTML元素中的文本

屬性節點：每個HTML屬性；attributes：得到全部屬性節點，返回一個數組

註釋節點：註釋

節點類型(nodeType) 節點名字(nodeName) 節點值(nodeValue)

元素節點 1 標籤名 null

文本節點 3 #text 文本

註釋節點 8 #comment 註釋的文字

文檔節點 9 #document null

屬性節點 2 屬性名屬性值

DOM元素的基本操做

建立：createElement() 配合 appendChild() 將建立好的元素，插入到某個標籤內的最後

刪除：removeChild() 配合 parentNode； remove() 直接刪除當前元素

document.body.removeChild(div)；

樣式：

1  獲取非行內樣式（兼容問題）
2     function getStyle(obj,attr){             //獲取非行間樣式，obj是對象，attr是值
3         if(obj.currentStyle){                //針對ie獲取非行間樣式
4             return obj.currentStyle[attr];
5         }else{
6             return getComputedStyle(obj,false)[attr];   //針對非ie
7         };
8     };