共计 3696 个字符，预计需要花费 10 分钟才能阅读完成。
DOM
(1)DOM 是 JS 操作网页的接口，全称为“文档对象模型”。(2)作用是将网页转为一个 JS 对象，从而能够用脚本进行各种操作(比方增删内容)1. 节点
1.1 节点层级
(1)document 节点示意每个文档的根节点。根节点的惟一子节点是 <html> 元素，咱们称之为文档元素(documentElement)。(2)文档元素是文档最外层的元素，所有其余元素都存在于这个元素之内。(3)每个文档只能有一个文档元素。在 HTML 页面中，文档元素始终都是 <html> 元素。1.2 节点类型(7 种)
DOM 的最小组成单位叫做节点(node)。(1)文档节点(document) 整个 HTML 文档 document 对象作为 window 对象的属性存在的，咱们不必获取就可间接应用
(2)元素节点(Element) HTML 文档中的 HTML 标签
(3)属性节点(Attribute) 元素的属性，示意的是标签中的一个一个的属性，这里要留神的是属性节点并非是元素节点的子节点，而是元素节点的一部分。(4)文本节点(Text) HTML 标签中的文本内容
(5)DocumentType doctype 标签(比方 <!DOCTYPE html>)。(6)Comment 正文
(7)DocumentFragment 文档的片段
这七种节点都属于浏览器原生提供的节点对象的派生对象，具备一些独特的属性和办法。1.3 节点树
最顶层的节点就是 document 节点，它代表了整个文档。文档外面最高的 HTML 标签，个别是 <html>，它形成树结构的根节点
其余 HTML 标签节点都是它的上级。除了根节点外，其余节点对于四周的节点都存在三种关系：(1)父子节点(parentNode): 间接的那个下级节点
(2)子节点关系(childNode): 间接的上级节点
a.firstChild(第一个子节点)
b.lastChild(最初一个子节点)
(3)同级节点关系(sibling): 领有同一个父节点的节点。a.nextSibling(紧邻在后的那个同级节点)
b.previousSibling(紧邻在前的那个同级节点)
2.Node 类型
2.1 属性
(1)nodeType 属性返回一个整数值，示意节点的类型
a. 文档节点（document）9
b. 元素节点（element）1
c. 属性节点（attr）2
d. 文本节点（text）3
e. 文档类型节点（DocumentType）10
f. 正文节点（Comment）8
g. 文档片断节点（DocumentFragment）11
<script>
console.log(document.nodeType); //9
</script>
(2) nodeName 属性返回节点的名称
var div = document.getElementById('d1');
console.log(div.nodeName); //DIV
(3) nodeValue 返回一个字符串，示意以后节点自身的文本值，该属性可读写只有文本节点（text）、正文节点（comment）和属性节点（attr）有文本值.
(4) textContent 返回以后节点和它的所有后辈节点的文本内容
(5) nextSibling 返回紧跟在以后节点前面的第一个同级节点。如果以后节点前面没有同级节点，则返回 null
(6) previousSibling 返回以后节点后面的、间隔最近的一个同级节点。如果以后节点后面没有同级节点，则返回 null
(7) parentNode 以后节点的父节点。对于一个节点来说，它的父节点只可能是三种类型：元素节点 (element)、文档节点(document) 和文档片段节点(documentfragment)
(8) parentElement 返回以后节点的父元素节点。如果以后节点没有父节点，或者父节点类型不是元素节点，则返回 null
(9) firstChild 返回以后节点的第一个子节点，如果以后节点没有子节点，则返回 null
(10)lastChild 返回最初一个子节点。(11)childNodes 返回一个相似数组的对象（NodeList 汇合），成员包含以后节点的所有子节点2.2 办法
留神：以下四个办法都须要父节点对象进行调用!
(1)appendChild() 承受一个节点对象作为参数，将其作为最初一个子节点，插入以后节点。该办法的返回值就是插入文档的子节点。(2)insertBefore(newNode,referenceNode) 用于将某个节点插入父节点外部的指定地位。(3)removeChild() 承受一个子节点作为参数，用于从以后节点移除该子节点。返回值是移除的子节点。(4)replaceChild(newChild,oldChild) 用于将一个新的节点，替换以后节点的某一个子节点。返回值是替换走的那个节点 oldChild。(5)cloneNode() 办法返回调用该办法的节点的一个正本.3.Document 类型
3.1 属性
(1)documentElement 始终指向 HTML 页面中的 <html> 元素
(2)body 间接指向 <body> 元素
(3)doctype 拜访 <!DOCTYPE>, 浏览器反对不统一，很少应用
(4)title 获取文档的题目
(5)URL 获得残缺的 URL
(6)domain 获得域名，并且能够进行设置，在跨域拜访中常常会用到
(7)referrer 获得链接到以后页面的那个页面的 URL，即起源页面的 URL
(8)images 获取所有的 img 对象，返回 HTMLCollection 类数组对象
(9)forms 获取所有的 form 对象，返回 HTMLCollection 类数组对象
(10)links 获取文档中所有带 href 属性的 <a> 元素3.2 查找元素
(1)document.getElementById(id) 通过元素 id 来查找元素
(2)document.getElementsByTagName(name) 通过标签名来查找元素
(3)document.getElementsByClassName(name) 通过类名来查找元素
(4)document.querySelector() 返回文档中匹配指定的 CSS 选择器的第一元素
(5)document.querySelectorAll() document.querySelectorAll() 是 HTML5 中引入的新办法，返回文档中匹配的 CSS 选择器的所有元素节点列表3.3 增加元素
document.createElement(element) 创立一个新的 HTML 元素，要与 appendChild() 或 insertBefore()办法联结应用。其中，appendChild() 办法在节点的子节点列表末增加新的子节点。insertBefore() 办法在节点的子节点列表任意地位插入新的节点。3.4 写入
document.write() 向文档写入文本或 HTML 表达式 或 JavaScript 代码。4.Element 类型
4.1 属性
(1)attributes：返回一个与该元素相干的所有属性的汇合。(2)classList：返回该元素蕴含的 class 属性的汇合。(3)className：获取或设置指定元素的 class 属性的值。(4)tagName：返回以后元素的标签名。(5)innerHTML：设置或获取 HTML 语法示意的元素的后辈。(6)clientHeight：获取元素外部的高度，蕴含内边距，但不包含程度滚动条、边框和外边距。(7)clientTop：返回该元素间隔它上边界的高度。(8)clientLeft：返回该元素间隔它左边界的宽度。(9)clientWidth：返回该元素它外部的宽度，包含内边距，但不包含垂直滚动条、边框和外边距。4.2 罕用办法
(1)element.innerHTML = new html content 扭转元素的 innerHTML
(2)element.attribute = value 批改属性的值
(3)element.getAttribute() 返回元素节点的指定属性值。(4)element.setAttribute(attribute, value) 设置或扭转 HTML 元素的属性值
(5)element.style.property = new style 扭转 HTML 元素的款式5 Text 类型
5.1 属性及办法
(1)length 文本长度
(2)appendData(text) 追加文本
(3)deleteData(beginIndex,count) 删除文本
(4)insertData(beginIndex,text) 插入文本
(5)replaceData(beginIndex,count,text) 替换文本
(6)splitText(beginIndex) 从 beginIndex 地位将以后文本节点分成两个文本节点
(7) document.createTextNode(text) 创立文本节点，参数为要插入节点中的文本
(8)substringData(beginIndex,count) 从 beginIndex 开始提取 count 个子字符串
正文完
发表至： javascript
2021-09-07
