javascript DOM

DOM

概念：

• 文档对象模型，是针对HTML和XML文档的一个API

功能（作用）：

• 对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。我们可以通过JavaScript操作DOM，可以对节点实现增删改查操作，可以动态添加标签，属性等。

---

节点

概念：

• HTML 文档中的每个成分都是一个节点。
• 标签元素就是节点，文本、注释、文档、属性等都是节点。

节点属性：

• nodeName（节点名称）

父节点的nodeName是标签名
文本节点的 nodeName 永远是 #text
注释节点的 nodeName 永远是 #comment

• nodeValue（节点值）

文本节点，nodeValue 属性包含文本。
元素节点nodeValue不可用
注释节点nodeValue包括注释内容

• nodeType（节点类型）

元素----1
属性----2
文本----3
注释----8
文档----9

---

获取DOM元素

• document.getElementById()
• document.getElementsByTagName()
• document.getElementsByName()-----根据name属性获取（input）
• document.getElementsByClassName(新)-----根据标签class
• document.querySelector( 新)-----根据标签名获取第一个元素
• document.querySelectorAll(新)-----获取所有标签名的元素

---

节点遍历

=>根据标签名获取元素列表 HTMLCollection 需要Array转成数组
=>根据name获取 NodeList 可以直接用数组的方法
=>元素就是HTML标签，不包含注释，文本，换行，文档

// document.documentElement-----html
// document -----整个文档
// document.URL -----等同于location.href
// document.domain ------域名

例：e.target.constructor===HTMLUListElement
// HTMLUListElement-----ul
// HTMLLIElement-----li
// HTMLAnchorElement-----a

• childNodes：所有子节点 获取所有子节点（包括注释）
• children：所有是标签类型的子节点 获取所有子元素
• parentNode：获取已知节点的父节点
• textContent：获取所有文本节点及其后代
• firstElementChild : 第一个子节点 （元素）
• firstChild : 第一个子节点
• lastElementChild：最后一个子节点（元素）
• lastChild：最后一个子节点
• nextElementSibling：下一个兄弟节点（元素）
• nextSibling：下一个兄弟节点
• previousElementSibling：上一个兄弟节点
• previousSibling：上一个兄弟节点

---

创建节点

=>div.innerHTML = “

a

”-----标签
=>div.textContent = “

a

”-----变成文本

• document.createElement(“标签名”) : 创建新元素
• document.createTextNode("") : 创建文本节点

插入节点

=>文档碎片容器—>document.createDocumentFragment()
=>(父对象.insertBefore(新插入的对象，目标插入对象之前（兄弟节点对象）,当父对象下无子节点的时候不适用)

• appendChild(node) : 向childNodes末尾插入一个节点node
• insertBefore(newElement,targetElement) : 向targetNode之前插入节点node

替换节点

• replaceChild(newNode,oldNode) : newNode替换节点oldNode

删除节点

• removeChild(node) : 移除父节点的某个子节点-----他杀
• remove()：移除当前节点-----自杀

复制节点

• cloneNode(boolean) : 复制一个节点
  true:深复制（复制所有）
  false（可以复制原标签所有属性和样式，但是不能复制内容和后代）

---

DOM属性

=>标签属性分为默认标签属性和自定义标签属性
=>DOM的对象属性也分为默认属性和自定义属性
=>自定义属性的命名和值必须使用小写和横线连接

// DOM的对象属性和标签属性 不一定相同，也不一定可以互相获取
// DOM中的自定义属性和标签自定义属性是完全不能互相调用

=>有些标签默认属性可以通过DOM属性调用
=>title id src href alt placeholder type value 等等
=>class标签属性DOM属性调用是className

常用属性

• document.body：body元素
• document.title：获取、设置文档的标题
• document.URL：获得完整的URL
• document.domain：获取域名

获取节点上的属性

getAttribute(属性)：
DOM对象.getAttribute(“标签名”)-----根据标签属性名获取值

给节点创建新属性

DOM对象.setAttribute(“属性”,“标签属性值”)-----创建

删除一个节点上的属性

DOM对象.removeAttribute(“标签名”)-----删除标签属性

---

DOM对象的样式

设置Dom对象的样式

• dom.style.styleName="";-----设置行内样式（不能写伪类）

获取计算后的dom样式

• ie：currentStyle
  =>ie所支持的获取非行间样式的方法
  用法：对象.currentStyle.样式名
  例：div.currentStyle.width

• 非ie：getComputedStyle
  =>非ie所支持的获取非行间样式的方法
  用法：getComputedStyle(对象，伪类).样式名
  例：getComputedStyle(div,null).color

---

DOM对象常见属性

客户区大小

• document.documentElement.clientWidth-----可视区宽高-滚动条
• document.documentElement.clientHeight
• document.body.clientWidth-----body
• document.body.clientHeight

元素占有可见空间

• offsetWidth 元素自身的宽度 width+border+padding
• offsetHeight 元素自身的高度 height+border+padding
• clientWidth 获取元素的宽度 width+padding(不包含border）
• clientHeight 获取元素的高度 height+padding(不包含border)

元素到边界的偏移

• offsetLeft 元素左边框距离父元素的距离（如果父级没有定位，就是相对于浏览器窗口。如果有定位，是对有定位的父级元素）
• offsetTop 元素上边框距离父元素的距离

滚动属性

• scrollHeight, scrollWidth
  scrollHeight返回的是元素的实际内容的高度，值=子元素的height值+元素的padding-top+父元素padding-bottom。
• scrollTop, scrollLeft -----可读可写
  =>初始化第一次渲染时，页面中的滚动条不可以设置，当第一次渲染完毕，交互时有效
  =>返回已经滚动到元素的左边界或上边界的像素数。只有在元素有滚动条的时候，这些像素才有用。这些属性也只在文档的 或 标记上定义（这和浏览器有关），并且一起来制定滚动文档的位置。

---

css样式

• ie都支持

styleSheets.addRule(selector, style, [index])
styleSheet.addRule(".div1", “width:50px;height:50px”, 0)

• ie9以上支持

styleSheet.insertRule(rule, [index])
styleSheet.insertRule(".div1 {width:50px;height:50px;}",0)