(1)DOM 是 JS 操作网页的接口,全称为“文档对象模型”。(2)作用是将网页转为一个 JS 对象,从而能够用脚本进行各种操作(比方增删内容)
(1)document 节点示意每个文档的根节点。根节点的惟一子节点是 <html> 元素,咱们称之为文档元素(documentElement)。(2)文档元素是文档最外层的元素,所有其余元素都存在于这个元素之内。(3)每个文档只能有一个文档元素。在 HTML 页面中,文档元素始终都是 <html> 元素。
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 文档的片段
这七种节点都属于浏览器原生提供的节点对象的派生对象,具备一些独特的属性和办法。
最顶层的节点就是 document 节点,它代表了整个文档。文档外面最高的 HTML 标签,个别是 <html>,它形成树结构的根节点
其余 HTML 标签节点都是它的上级。除了根节点外,其余节点对于四周的节点都存在三种关系:(1)父子节点(parentNode): 间接的那个下级节点
(2)子节点关系(childNode): 间接的上级节点
a.firstChild(第一个子节点)
b.lastChild(最初一个子节点)
(3)同级节点关系(sibling): 领有同一个父节点的节点。a.nextSibling(紧邻在后的那个同级节点)
b.previousSibling(紧邻在前的那个同级节点)
(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 汇合),成员包含以后节点的所有子节点
留神:以下四个办法都须要父节点对象进行调用!
(1)appendChild() 承受一个节点对象作为参数,将其作为最初一个子节点,插入以后节点。该办法的返回值就是插入文档的子节点。(2)insertBefore(newNode,referenceNode) 用于将某个节点插入父节点外部的指定地位。(3)removeChild() 承受一个子节点作为参数,用于从以后节点移除该子节点。返回值是移除的子节点。(4)replaceChild(newChild,oldChild) 用于将一个新的节点,替换以后节点的某一个子节点。返回值是替换走的那个节点 oldChild。(5)cloneNode() 办法返回调用该办法的节点的一个正本.
(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> 元素
(1)document.getElementById(id) 通过元素 id 来查找元素
(2)document.getElementsByTagName(name) 通过标签名来查找元素
(3)document.getElementsByClassName(name) 通过类名来查找元素
(4)document.querySelector() 返回文档中匹配指定的 CSS 选择器的第一元素
(5)document.querySelectorAll() document.querySelectorAll() 是 HTML5 中引入的新办法,返回文档中匹配的 CSS 选择器的所有元素节点列表
document.createElement(element) 创立一个新的 HTML 元素,要与 appendChild() 或 insertBefore()办法联结应用。其中,appendChild() 办法在节点的子节点列表末增加新的子节点。insertBefore() 办法在节点的子节点列表任意地位插入新的节点。
document.write() 向文档写入文本或 HTML 表达式 或 JavaScript 代码。
(1)attributes:返回一个与该元素相干的所有属性的汇合。(2)classList:返回该元素蕴含的 class 属性的汇合。(3)className:获取或设置指定元素的 class 属性的值。(4)tagName:返回以后元素的标签名。(5)innerHTML:设置或获取 HTML 语法示意的元素的后辈。(6)clientHeight:获取元素外部的高度,蕴含内边距,但不包含程度滚动条、边框和外边距。(7)clientTop:返回该元素间隔它上边界的高度。(8)clientLeft:返回该元素间隔它左边界的宽度。(9)clientWidth:返回该元素它外部的宽度,包含内边距,但不包含垂直滚动条、边框和外边距。
(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 元素的款式
(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 个子字符串