干货满满，绝不错过，DOM、BOM 操作超级集合

最新推荐文章于 2023-09-10 23:55:46 发布

晨夕_love

最新推荐文章于 2023-09-10 23:55:46 发布

阅读量1.4k

点赞数 2

html+css+js 同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

javascript

12 篇文章 0 订阅

订阅专栏

jquery

7 篇文章 0 订阅

订阅专栏

本章内容：

定义
节点类型
节点关系
选择器
样式操作方法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

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
干货满满，绝不错过，DOM、BOM 操作超级集合

本章内容：定义节点类型节点关系选择器样式操作方法style表格操作方法表单操作方法元素节点ELEMENT属性节点attributes文本节点TEXT文档节点 Document位置操作方法定时器弹出框location其它事件操作实例定义文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。节点
复制链接

扫一扫