DOM、BOM操作集合

2024-04-27 15:06:12

字體：大中小

來源：轉載

供稿：網友

DOM、BOM操作集合

一、定義

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

二、節點

節點類型

節點類型		描述
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	下一個兄弟節點
nextElementCount	下一個兄弟標簽元素
childElementCount	第一層元素的個數（不包括文本節點和注釋）
ownerDocument	指向整個文檔的文本節點

代碼示例

節點關系方法：

hasChildNodes() 包含一個或多個節點時返回truecontains() 如果是后代節點返回trueisSaneNode()、isEqualNode() 傳入節點與引用節點的引用為同一個對象返回truecompareDocumentPostion() 確定節點之間的各種關系

數值	關系
1	給定節點不在當前文檔中
2	給定節點位于參考節點之前
4	給定節點位于參考節點之后
8	給定節點包含參考節點
16	給定節點被參考節點包含

代碼示例

三、選擇器

選擇器

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

代碼示例

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body>  <div id="t"></div> <script> var tT = document.getElementById('t'); console.log(tT); </script>  <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>  <div name="nick"></div> <script> var tT = document.getElementsByName("nick"); console.log(tT); //[div] </script>  <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>  <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>  <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>  <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></body></html>

四、style

樣式操作方法style

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

代碼示例

五、表格操作

表格操作方法

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

代碼示例

六、表單操作

表單操作方式

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

代碼示例

七、元素節點ELEMENT

nodeType:1

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

代碼示例：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body> <div id="t"> <span id="one"></span> <span id="s"> <a></a> <h1>Nick</h1> </span> <p></p> </div> <script> var tT = document.getElementById("t"); //appendChild() var a1New = document.createElement('a'); tT.appendChild(a1New); console.log(tT.lastElementChild); //<a></a> //insertBefore() var a2New = document.createElement('a'); a2New.className = 't'; //設置css樣式 a2New.id = 'oneNew'; a2New.innerText = 'jenny'; //設置標簽中間文本 tT.insertBefore(a2New,document.getElementById('one')); console.log(tT.firstElementChild); //<a class="t">jenny</a> //replaceChild() var a3New = document.createElement('h3'); tT.replaceChild(a3New,document.getElementById('oneNew')); console.log(tT.firstElementChild); //<h3></h3> //removeChild() tT.removeChild(tT.firstElementChild); console.log(tT.firstElementChild); //<span id="one"></span> //cloneNode() var clNo = tT.cloneNode(true); console.log(clNo); //<div id="t">...</div> //importNode() var imNoT = document.importNode(tT,true); console.log(imNoT.firstChild); //#text var imNoF = document.importNode(tT,false); console.log(imNoF.firstChild); //null //insertAdjacentHTML() tT.insertAdjacentText("beforebegin","beforebegin"); tT.insertAdjacentText("afterbegin","afterbegin"); tT.insertAdjacentText("beforeend","beforeend"); tT.insertAdjacentText("afterend","afterend"); </script></body></html><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body> <div id="t" class="tClass" title="tTitle" lang="en" dir="ltr"></div> <script> var tN = document.getElementById("t"); console.log(tN.nodeType); //1 console.log(tN.tagName); //DIV console.log(tN.nodeName); //DIV console.log(tN.id); //t console.log(tN.title); //tTitle console.log(tN.lang); //en console.log(tN.dir); //ltr console.log(tN.className); //tClass var dirNew = document.createElement("div"); dirNew.className = "tC"; dirNew.innerText = "Nick"; console.log(dirNew); //<div class="tC">Nick</div> </script></body></html>

八、屬性節點attributes

nodeType:2

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

代碼示例

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</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><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</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.getAttribute("name")); //nick tT.setAttribute("age",18); console.log(tT.getAttribute("age")); //18 tT.removeAttribute("age"); console.log(tT.getAttribute("age")); //null </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開始到count處的文本被text替換
substringData(offset,count)	提取從offset開始到count處的文本

代碼示例：

十、文檔節點 Document

nodeType: 4

document.documentElement	代表頁面中的 html 元素
document.body	代表頁面中的 body 元素
document.doctype	代表 !DOCTYPE 標簽
document.head	代表頁面中的 head 元素
document.title	代表 title 元素的文本，可修改
document.URL	當前頁面的URL地址
document.domain	當前頁面的域名
document.chartset	當前頁面使用的字符集
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()	write()文本原樣輸出到屏幕、writeln()輸出后加換行符
open()/close()	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	滾動高度

代碼示例

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } .zg { height: 1000px; position: relative; border: 3px solid transparent; } .dg { height: 500px; padding-top: 10px; margin-top: 20px; border: 2px solid transparent; } </style></head><body onscroll="Scroll()"> <div id="zg" class="zg"> <div id="dg" class="dg"> </div> </div> <script> var zg = document.documentElement.offsetHeight; console.log(zg); //1000、文檔總高度 var dg = document.documentElement.clientHeight; console.log(dg); //667,可變、文檔占屏幕高度 var dgBox = document.getElementById("dg"); console.log(dgBox.offsetHeight); //514 (padding,border)、自身高度 console.log(dgBox.scrollHeight); //510（padding）、文檔高度 console.log(dgBox.offsetTop); //20 (magin)、距離上級定位高度 console.log(dgBox.clientTop); //2(border)、border高度 console.log(dgBox.offsetParent); //<div id="zg" class="zg">...</div>元素、父級定位標簽 function Scroll() { console.log(document.body.scrollTop); //滾動高度 } </script></body></html>

十二、定時器

setInterval	多次定時器(毫秒計時)>
clearInterval	清除多次定時器
setTimeout	單次定時器
clearTimeout	清除單次定時器

代碼示例

十三、彈出框

alert()	彈出框
confirm()	確認框-返回值：true、false
prompt()	輸入框-兩個參數：提示的文本和輸入的默認值，返回值：輸入的值、”“、null

prompt

var result = prompt("What is your name?" ,"Nick");if(result != null){ alert("welcome,"+result); }console.log(result)

十四、location

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

十五、其他

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

代碼示例：

//后退一頁history.go(-1)//前進一頁history.go(1);//前進兩頁history.go(2);//無參數時，刷新當前頁面history.go()//后退一頁history.back()//前進一頁history.forward()

十六、事件操作

屬性	此事件發生在何時….
onabort	圖像的加載被中斷。
onblur	元素失去焦點
onchange	域的內容被改變
onclick	當用戶點擊某個對象時調用的事件句柄
ondblclick	當用戶雙擊某個對象時調用的事件句柄
onerror	在加載文檔或圖像時發生錯誤
onfocus	元素獲得焦點
onkeydown	某個鍵盤按鍵被按下
onkeypress	某個鍵盤按鍵被按下并松開
onkeyup	某個鍵盤按鍵被松開
onload	一張頁面或一幅圖像完成加載
onmousemove	鼠標被移動
onmousedown	鼠標按鈕被按下
onmouSEOut	鼠標從某個元素移開
onmouseover	鼠標移到某元素之上
onmouseup	鼠標按鍵被松開
onreset	重置按鈕被點擊
onresize	窗口或框架被重新調整大小
onselect	文本被選中
onsubmit	確認按鈕被點擊
onunload	用戶退出頁面