是什么?
是各大浏览器提供的针对 html 和 xml 文档的一个 API(Application Programming Interface 应用程序编程接口).DOM 描述了一个层次化的节点树, 容许开发人员对 DOM 中的节点进行增删改查, 操作节点的属性和样式.
节点
HTML 中的每个成分都是一个节点 (元素, 属性, 文本, 注释, 文档). 下图是犀牛书中对 DOM 结构的解析, 迷茫了回头看图.
节点类型
通过节点的 nodeType 属性访问该节点的类型, 五种不同的返回值分别代表 5 中类型的节点.
元素 (element): 1
属性 (attribute):2
文本 (text):3
注释 (annotation):8
文档 (document):9(一个页面只有一个 document 对象)
- <!-- 这是注释节点
- 元素节点: 整个 div
- 属性节点: 有两个, id 属性 hero 和自定义属性 data-imgSrc="xxx"
- 文本节点: 哈哈没想到吧, 我又回来啦!
- -->
- <div id="hero" data-imgSrc="xxx"> 哈哈没想到吧, 我又回来啦!</div>
节点名称
通过 nodeName 访问节点名称.
元素节点: 是大写的标签名称.
文本节点: 永远是 #text
注释节点: 永远是 #comment
节点值
通过 nodeValue 访问节点值, 元素节点 nodeValue 属性不可用.
文本节点: 其中的文本
注释节点: 其中的注释内容
获取 DOM 元素
必须拿到相应的 DOM 元素, 才能对它进行操作. 文本, 注释这两个节点不能够直接选取, 需要获得包含他们的元素节点之后, 通过元素节点的属性获取. 通过操作之前我们还有一件事情需要搞清楚, DOMAPI 在 JS 中是以怎样的形式存在的.
JS 根对象: Object 是 JS 中的根对象, 几乎所有对象都拓展于它.
Windows:Windows 对象是浏览器环境提供的, 拓展于 Object 的. Windows 是浏览器环境中的全局对象. 从程序度来看, 每个页面都是一个独立的 Windows 对象.
document: 是 Windows 上的属性, 代表当前页面中的整个文档对象. DOM API 就放在 document 中.
- console.log(document === Windows.document); //true
- console.log(document);
Chrome 中以上两条语句的输出
通过 ID 获取: document.getElementById()
通过 className 获取: document.getElementsByClassName()
通过标签名称获取: document.getElementsByTagName()
通过 name(例如表单元素的 name) 属性值获取: document.getElementsByName()
可接收类名, id 名, 标签名获取匹配到的第一个元素 (文档中从上到下, 从外到里):document.querySelector( 新)
可接收类名, id 名, 标签名获取匹配到的所有元素: document.querySelectorAll(新)
节点遍历
节点上有一些属性方便我们获取它的后代, 附近的节点. 考虑到我们日常工作中可能不需要操作注释节点, 所以这些属性获取的结果被分为两类: 查找过程忽略注释的, 不忽略注释的.
childNodes: 所有子节点 获取所有子节点 (包括注释)
children: 所有是标签类型的子节点 获取所有子元素
parentNode: 获取已知节点的父节点
firstElementChild : 第一个子节点 (元素)
firstChild : 第一个子节点
lastElementChild: 最后一个子节点 (元素)
lastChild: 最后一个子节点
nextElementSibling: 下一个兄弟节点 (元素)
nextSibling: 下一个兄弟节点
previousElementSibling: 上一个兄弟节点
previousSibling: 上一个兄弟节点 //
创建节点
document.createElement("标签名") : 创建新元素
document.createTextNode("") : 创建文本节点
插入节点
appendChild(node) : 向 childNodes 末尾插入一个节点 node
insertBefore(newElement,targetElement) : 向 targetNode 之前插入节点 node
替换节点
replaceChild(newNode,oldNode) : newNode 替换节点 oldNode
删除节点
removeChild(node) : 移除父节点的某个子节点
remove(): 移除当前节点
复制节点
cloneNode(boolean) : 复制一个节点
DOM 属性和样式操作
DOM 从程序角度看是不同类型的节点, 这里的 DOM 特指的是元素类型 (Element), 这里的属性特指的是标签元素上的属性 (id class 自定义 style...).
属性操作: getAttribute(属性名),setAttribute(属性名, 值)
- var hero = document.getElementById("hero");
- var heroAttr = hero.getAttribute("id");
- console.log(heroAttr); // hero
- hero.setAttribute("class","anmate fadeIn");
- console.log(hero); // <div id="hero" data-imgsrc="xxx" class="anmate fadeIn"> 哈哈没想到吧, 我又回来啦!</div>
样式操作
设置内联样式: dom.style.styleName = "value"
- var hero = document.getElementById("hero");
- hero.style.color = "red";
- console.log(hero); //<div id="hero" data-imgsrc="xxx" style="color: red;"> 哈哈没想到吧, 我又回来啦!</div>
获取经过层叠计算后, 最终应用到元素上的样式: IE(dom.currentStyle.styleName) / 非 IE(getComputedStyle(对象, 伪类). 样式名)
- function getCurrentStyle(dom,styleName){
- if(Windows.getComputedStyle){
- return Windows.getComputedStyle(dom).styleName;
- }
- return dom.currentStyle.styleName;
- }
DOM 元素大小和位置
offsetWidth 元素自身的宽度 width+border+padding
offsetHeight 元素自身的高度 height+border+padding
clientWidth 获取元素的宽度 width+padding(不包含 border)
clientHeight 获取元素的高度 height+padding(不包含 border)
offsetLeft 元素左边框距离父元素的距离 (如果父级没有定位, 就是相对于浏览器窗口. 如果有定位, 是对有定位的父级元素)
offsetTop 元素上边框距离父元素的距离
客户区域
- document.documentElement.clientWidth
- document.documentElement.clientHeight
- document.body.clientWidth
- document.body.clientHeight
滚动属性
注意: Chrome 下滚动条相关操作是放在 document.body 之下的.
scrollHeight, scrollWidth :scrollHeight 返回的是元素的实际内容的高度, 值 = 子元素的 height 值 + 元素的 padding-top + 父元素 padding-bottom.
scrollTop, scrollLeft: 返回已经滚动到元素的左边界或上边界的像素数. 只有在元素有滚动条的时候, 这些像素才有用. 这些属性也只在文档的 <body> 或 <HTML> 标记上定义 (这和浏览器有关), 并且一起来制定滚动文档的位置.
- // IE 6 以上都可以
- document.documentElement.scrollTop
- // Chrome
- document.body.scrollTop
document 常用属性
document.body:body 元素
document.title: 获取, 设置文档的标题
document.URL: 获得当前页面完整的 URL
document.domain: 获取当前页域名
........
来源: https://www.cnblogs.com/keliguicang/p/10991524.html