什么是DOM
DOM 不是对象,也不是方法
DOM 的全称是 Document Object Model,译为文档对象模型,它是 W3C 制定的一套书写 HTML 分析器的标准接口规范。
DOM是文档对象模型,模型将整个文档看成是一个对象,而该对象又是由一个个节点对象组成的。
DOM就是用节点来构建整个页面,HTML里面的所有东西,都是节点。
说的通俗一点,DOM 就是为 HTML 文档提供的一个API(接口)。该API提供了对HTML 文档中元素,属性和文本的一系列操作方法和属性。
DOM的版本
DOM0(非标准)
DOM1:1998 年 10 月 01 日
DOM2:2000 年 11 月 13 日
DOM3:2004 年 04 月 07 日
DOM4:2015 年 11 月 19 日
DOM历史发展将其分为DOM0到DOM4级。
非标准,意思是没有统一标准,没有特别的提出来“DOM”概念。一般不说版本多少多少,一般都是说的DOM2或DOM0。
DOM0级提供了一些快速访问页面中常用元素节点的属性。
DOM2级开始,提供了许多查找元素节点的方法。
DOM2级之前通常通过元素节点之间的关系来查找元素节点。
DOM节点
在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:
1、文档是一个文档节点(document)。
2、所有的HTML元素都是元素节点(elementNode)。
3、所有 HTML 属性都是属性节点(attributeNode)。
4、文本插入到 HTML 元素是文本节点(textNode)。
5、注释是注释节点。
一般我们用的节点可以大致分为:元素节点,属性节点,文本节点。
注意:在 DOM 树结构中,属性节点比较特殊,它并不是元素节点的子节点。
节点类型 | nodeName | nodeType | nodeValue |
元素节点 | 标签名 | 1 | null |
属性节点 | 属性名 | 2 | 属性值 |
文本节点 | #text | 3 | 文本内容 |
注:nodeName获取的标签名是纯大写的。
一些老的查找节点的属性:
document.body 返回文档的body元素
document.images 返回所有的images对象的引用
document.links 返回所有的Area和links对象的引用
document.anchors 返回所有的Anchors对象的引用
document.forms 返回所有的forms对象的引用
现在常用的查找元素节点的方法:
document.getElementById("字符串的id值"); 返回一个dom元素节点
document.getElementsByName("字符串的name属性值"); 返回一个dom元素节点的伪数组
parentNode.getElementsByTagName("字符串的标签名"); 返回一个dom元素节点的伪数组
parentNode.getElementsByClassName("字符串的类名"); 返回一个dom元素节点的伪数组
parentNode.querySelector("选择器字符串"); 通过选择器来获取(强大),永远只获取第一个元素
parentNode.querySelectorAll("选择器字符串") 通过选择器来获取(强大),得到一个伪数组
注:最后两个用的最多、最好使,属于ES6。
常用的查找节点的属性:
两种方式,见名思意。
元素节点: 普通节点:
element.parentElement ement.parentNode
element.firstElementChild element.firstChild
element.lastElementChild element.lastChild
element.children element.childNodes
element.previousElementSibling node.previousSibling
element.nextElementSibling node.nextSibling
注:伪数组对象:选中的不是单个节点的时候,返回就是伪数组对象。
有两种类型:htmlCollectionList NodeList
但是用起来是一样的,用变量接住用就是了。
元素节点的操作:
创建节点:
document.createElement(tagString) 用指定的标签名称创建一个空的标签
注意:只能document调用,并且返回值仅仅是创建了一个元素节点对象,没有添加到html文档中。
添加节点:
parentElement.appendChild(newChildNode) 向某个父节点添加最后一个子节点
parentElement.insertBefore(newChildNode,oldChildNode) 在指定的已有的子节点之前插入新节点
删除节点:
parentElement.removeChild(ChildNode) 从元素中移除子节点
Element.remove(Node) 移除节点
替换节点(改):
parentElement.replaceChild(newnode,oldnode) 替换元素中的子节点
克隆节点:
element.cloneNode(boolean) 克隆节点
元素节点的增删改查是它的常用操作,DOM提供了大量的方法来实现这些操作
注意:返回值是克隆的节点,且未加入html文档。
文本节点的操作:
本节点内容的获取:
textNode.nodeValue
注意:一般我们操作文本节点中的内容时是不需要获取文本节点的,而是直接通过元素节点拿到文本的值,所以该方法很少使用。
只获取文本节点的内容:
elementNode.innerText 单单只是一个字符串文本
获取元素节点下面所有的内容:
elementNode.innerHTML 此方法会被解析,可以写标签、属性、都认识
注意:两个属性都是可读可写的,其值为字符串,可直接用于内容的获取或者修改。
文本的节点的操作一般都是通过元素节点来完成的,包括属性innnerHTML和innerText。