乾貨滿滿，絕不錯過，DOM、BOM 操作超級集合

本章內容：

定義
節點類型
節點關係
選擇器
樣式操作方法style
表格操作方法
表單操作方法
元素節點ELEMENT
屬性節點attributes
文本節點TEXT
文檔節點 Document
位置操作方法
定時器
彈出框
location
其它
事件操作
實例

定義

文檔對象模型（Document Object Model，DOM）是一種用於HTML和XML文檔的編程接口。

節點類型

12中節點類型都有NodeType屬性來表明節點類型

節點類型		描述
1	Element	代表元素
2	Attr	代表屬性
3	Text	代表元素或屬性中的文本內容。
4	CDATASection	代表文檔中的 CDATA 部分（不會由解析器解析的文本）。
5	EntityReference	代表實體引用。
6	Entity	代表實體。
7	ProcessingInstruction	代表處理指令。
8	Comment	代表註釋。
9	Document	代表整個文檔（DOM 樹的根節點）。
10	DocumentType	向爲文檔定義的實體提供接口
11	DocumentFragment	代表輕量級的 Document 對象，能夠容納文檔的某個部分
12	Notation	代表 DTD 中聲明的符號。

節點關係

nodeType	返回節點類型的數字值（1~12）
nodeName	元素節點:標籤名稱(大寫)、屬性節點:屬性名稱、文本節點:#text、文檔節點:#document
nodeValue	文本節點:包含文本、屬性節點:包含屬性、元素節點和文檔節點:null
parentNode	父節點
parentElement	父節點標籤元素
childNodes	所有子節點
children	第一層子節點
firstChild	第一個子節點，Node 對象形式
firstElementChild	第一個子標籤元素
lastChild	最後一個子節點
lastElementChild	最後一個子標籤元素
previousSibling	上一個兄弟節點
previousElementSibling	上一個兄弟標籤元素
nextSibling	下一個兄弟節點
nextElementSibling	下一個兄弟標籤元素
childElementCount	第一層子元素的個數(不包括文本節點和註釋)
ownerDocument	指向整個文檔的文檔節點

 View
Code

節點關係方法：

hasChildNodes() 包含一個或多個節點時返回true

contains() 如果是後代節點返回true

isSameNode()、isEqualNode() 傳入節點與引用節點的引用爲同一個對象返回true

compareDocumentPostion() 確定節點之間的各種關係

 compareDocumentPostion()
節點對應關係

 View
Code

選擇器

getElementById()	一個參數:元素標籤的ID
getElementsByTagName()	一個參數:元素標籤名
getElementsByName()	一個參數:name屬性名
getElementsByClassName()	一個參數:包含一個或多個類名的字符串
classList	返回所有類名的數組 add （添加） contains （存在返回true,否則返回false） remove（刪除） toggle（存在則刪除，否則添加）
querySelector()	接收CSS選擇符，返回匹配到的第一個元素，沒有則null
querySelectorAll()	接收CSS選擇符，返回一個數組，沒有則返回[]

<!--getElementById()-->
    <div id="t"></div>
    <script>
        var tT = document.getElementById('t');
        console.log(tT);
    </script>


<!--getElementsByTagName()-->
    <div id="t">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <script>
        var tT = document.getElementsByTagName('div');
        console.log(tT); //[div#t, div, div, div, t: div#t]
        console.log(tT[0]); //<div id="t">...</div>
        console.log(tT.length); //4
    </script>


<!--getElementsByName()-->
    <div name="nick"></div>
    <script>
        var tT = document.getElementsByName("nick");
        console.log(tT); //[div]
    </script>


<!--getElementsByClassName()-->
    <div class="t">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <script>
        var tT = document.getElementsByClassName('t');
        console.log(tT); //[div.t]
        console.log(tT[0]); //<div id="t">...</div>
        console.log(tT.length); //1
    </script>


<!--classList-->
    <div class="t t2 t3"></div>
    <script>
        var tT = document.getElementsByTagName('div')[0];
        tTList = tT.classList;
        console.log(tT); //<div class="t t2 t3"></div>
        console.log(tTList); //["t", "t2", "t3"]
        tTList.add("t5");
        console.log(tTList.contains("t5")); //true
        tTList.remove("t5");
        console.log(tTList.contains("t5")); //false
        tTList.toggle("t5");
        console.log(tTList.contains("t5")); //true
    </script>


<!--querySelector()-->
    <div class="t t2 t3"></div>
    <div class="t" id="t"></div>
    <div name="nick"></div>
    <script>
        var tT = document.querySelector("div");
        console.log(tT); //<div class="t t2 t3"></div>
        var tI = document.querySelector("#t");
        console.log(tI); //<div class="t" id="t"></div>
        var tC = document.querySelector(".t");
        console.log(tC); //<div class="t t2 t3"></div>
        var tN = document.querySelector("[name]");
        console.log(tN); //<div name="nick"></div>
    </script>


<!--querySelectorAll()-->
    <div class="t t2 t3"></div>
    <div class="t" id="t"></div>
    <div name="nick"></div>
    <script>
        var tT = document.querySelectorAll("div");
        console.log(tT); //[div.t.t2.t3, div#t.t, div]
        var tI = document.querySelectorAll("#t");
        console.log(tI); //[div#t.t]
        var tC = document.querySelectorAll(".t");
        console.log(tC); //[div.t.t2.t3, div#t.t]
        var tN = document.querySelectorAll("[name]");
        console.log(tN); //[div]
    </script>

樣式操作方法style

style.cssText	可對style中的代碼進行讀寫
style.item()	返回給定位置的CSS屬性的名稱
style.length	style代碼塊中參數個數
style.getPropertyValue()	返回給定屬性的字符串值
style.getPropertyPriority()	檢測給定屬性是否設置了!important，設置了返回"important";否則返回空字符串
style.removeProperty()	刪除指定屬性
style.setProperty()	設置屬性，可三個參數:設置屬性名，設置屬性值，是否設置爲"important"(可不寫或寫"")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="t" style="background-color: yellow; width: 100px; height: 100px">8</div>

    <script>
        var tT = document.getElementById("t");
        console.log(tT.style.cssText); //width: 100px; height: 100px; background-color: yellow;
        tT.style.cssText = "background-color: yellow; width: 200px; height: 200px"; //修改屬性
        console.log(tT.style.cssText); //width: 200px; height: 200px; background-color: yellow;
        console.log(tT.style.item("0")); //background-color
        console.log(tT.style.length); //3
        console.log(tT.style.getPropertyValue("background-color")); //yellow
        console.log(tT.style.getPropertyPriority("background-color")); //空字符串
        console.log(tT.style.removeProperty("width")); //200px
        tT.style.setProperty("width","200px",""); //設置屬性，第三個值爲important優先值，可不寫
        
    </script>
</body>
</html>

表格操作方法

createTHead()	創建<thead>元素，返回引用
deleteTHead()	刪除<thead>元素
createTBody()	創建<tbody>元素，返回引用
insertRow(0)	插入<tr>元素，從0開始
deleteRow(pos)	刪除指定位置的行
insertCell(0)	插入<td>元素，從0開始
deleteCell(pos)	刪除指定位置的單元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        var table = document.createElement("table");
        table.border = "1px";
        table.width = "150px";

        var theadt = table.createTHead();
        var tbody = table.createTBody();

        var trH0 = theadt.insertRow(0);
        trH0.insertCell(0).appendChild(document.createTextNode("姓名"));
        trH0.insertCell(1).appendChild(document.createTextNode("年齡"));

        var trB0 = tbody.insertRow(0);
        var trB1 = tbody.insertRow(1);
        trB0.insertCell(0).appendChild(document.createTextNode("nick"));
        trB0.insertCell(1).appendChild(document.createTextNode("18"));
        trB1.insertCell(0).appendChild(document.createTextNode("jenny"));
        trB1.insertCell(1).appendChild(document.createTextNode("21"));

        trB0.deleteCell(1);

        console.log(table);
        document.body.appendChild(table);
    </script>
</body>
</html>

表單操作方法

document.forms	獲取所有表單
`.submit()`	提交表單

 View
Code

元素節點ELEMENT

nodeType:1

nodeName	訪問元素的標籤名
tagName	訪問元素的標籤名
createElement()	創建節點
appendChild()	末尾添加節點，並返回新增節點
insertBefore()	參照節點之前插入節點，兩個參數：要插入的節點和參照節點
insertAfter()	參照節點之後插入節點，兩個參數：要插入的節點和參照節點
replaceChild()	替換節點，兩個參數：要插入的節點和要替換的節點(被移除)
removeChild()	移除節點
cloneNode()	克隆，一個布爾值參數，true爲深拷貝，false爲淺拷貝
importNode()	從文檔中複製一個節點，兩個參數：要複製的節點和布爾值(是否複製子節點)
insertAdjacentHTML()	插入文本，兩個參數：插入的位置和要插入文本 "beforebegin",在該元素前插入 "afterbegin",在該元素第一個子元素前插入 "beforeend",在該元素最後一個子元素後面插入 "afterend",在該元素後插入

屬性節點attributes

nodeType:2

attributes	獲取所有標籤屬性
getAttribute()	獲取指定標籤屬性
setAttribute()	設置指定標籤屬
removeAttribute()	移除指定標籤屬
var s = document.createAttribute("age") s.nodeValue = "18"	創建age屬性設置屬性值爲18

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="t" class="s1 s2" name="nick"></div>

    <script>
        var tT = document.getElementById("t");

        console.log(tT.attributes); //NamedNodeMap {0: id, 1: class, 2: name, length: 3}
        console.log(tT.attributes.id); //id="t"
        console.log(tT.attributes.class); //class="s1 s2"

        console.log(tT.attributes.getNamedItem("name")); //name="nick"
        console.log(tT.attributes.removeNamedItem("class")); //class="s1 s2"
        console.log(tT.attributes.getNamedItem("class")); //null
        var s = document.createAttribute("age"); //創建屬性
        s.nodeValue = "18"; //設置屬性值
        console.log(tT.attributes.setNamedItem(s));
        console.log(tT.attributes); //NamedNodeMap {0: id, 1: name, 2: age, length: 3}
        console.log(tT.attributes.item("1")); //name="nick"
    </script>
</body>
</html>

文本節點TEXT

nodeType:3

innerText	所有的純文本內容，包括子標籤中的文本
outerText	與innerText類似
innerHTML	所有子節點(包括元素、註釋和文本節點)
outerHTML	返回自身節點與所有子節點
textContent	與innerText類似，返回的內容帶樣式
data	文本內容
length	文本長度
createTextNode()	創建文本
normalize()	刪除文本與文本之間的空白
splitText()	分割
appendData()	追加
deleteData(offset,count)	從offset指定的位置開始刪除count個字符
insertData(offset,text)	在offset指定的位置插入text
replaceData(offset,count,text)	替換，從offset開始到offscount處的文本被text替換
substringData(offset,count)	提取從ffset開始到offscount處的文本

文檔節點 Document

nodeType:9

document.documentElement	代表頁面中的<html>元素
document.body	代表頁面中的<body>元素
document.doctype	代表<!DOCTYPE>標籤
document.head	代表頁面中的<head>元素
document.title	代表<title>元素的文本，可修改
document.URL	當前頁面的URL地址
document.domain	當前頁面的域名
document.charset	當前頁面使用的字符集
document.defaultView	返回當前 `document`對象所關聯的 `window` 對象，沒有返回 `null`
document.anchors	文檔中所有帶name屬性的<a>元素
document.links	文檔中所有帶href屬性的<a>元素
document.forms	文檔中所有的<form>元素
document.images	文檔中所有的<img>元素
document.readyState	兩個值:loading(正在加載文檔)、complete(已經加載完文檔)
document.compatMode	兩個值：BackCompat：標準兼容模式關閉、CSS1Compat：標準兼容模式開啓
write()、writeln()、 open()、close()	write()文本原樣輸出到屏幕、writeln()輸出後加換行符、 open()清空內容並打開新文檔、close()關閉當前文檔，下次寫是新文檔

位置操作方法

document.documentElement.offsetHeight	文檔總高度
document.documentElement.clientHeight	文檔佔當前屏幕高度
document.documentElement.clientWidth	文檔佔當前屏幕寬度
offsetHeight	自身高度（height + padding + border）
scrollHeight	文檔高度（height + padding）
offsetTop	距離上級標籤定位高度（magin）
clientTop	border高度（border）
offsetParent	父級定位標籤，元素
scrollTop	滾動高度

定時器

setInterval	多次定時器（毫秒計時）
clearInterval	清除多次定時器
setTimeout	單次定時器
clearTimeout	清除單次定時器

彈出框

alert()

彈出框

confirm()

確認框

返回值：true、false

prompt()

輸入框

兩個參數：提示的文本和輸入的默認值，返回值：輸入的值、""、null

location

location.href `location.href =` `"url"`	獲取URL 重定向
location.assign("http://www.cnblogs.com/suoning")	重定向到URL
location.search = "wd=suoning"	修改查詢字符串(百度搜索)
location.hostname	服務主機名，例：www.cnblogs.com
location.pathname	路徑，例：suoning
location.port	端口號
location.reload()	重新加載

其它

navigator	包含有關瀏覽器的信息
screen	包含有關客戶端顯示屏幕的信息
history	包含用戶(在瀏覽器窗口中)訪問過的 URL
window.print();	顯示打印對話框

事件操作

晨夕_love

發佈了20 篇原創文章 · 獲贊 25 · 訪問量 5萬+

私信關注

乾貨滿滿，絕不錯過，DOM、BOM 操作超級集合

定義

節點類型

節點關係

節點關係方法：

選擇器

樣式操作方法style

表格操作方法

表單操作方法

屬性節點attributes

文本節點TEXT

文檔節點 Document

位置操作方法

定時器

彈出框

location

其它

事件操作

DAPPER 事務 TRANSACTION

html+css+js 動態時鐘

我的TypeScript筆記

floor random 隨機抽獎

乾貨滿滿，絕不錯過，DOM、BOM 操作超級集合

瀑布流佈局

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結