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	用户退出页面