DOM文档对象模型和用法

DOM文档对象模型

功能：提供了页面中节点对象的一些属性和方法

• 节点类型：元素节点 ，属性节点， 文本节点。

节点类型	nodeType	nodeName	nodeValue
元素节点	1	标签名	null
属性节点	2	属性名	属性值
文本节点	3	#text	文本内容

• 节点的获取(从全局查找)

document.getElementById(id）个体 **功能：通过id获取符合条件的元素**
document.getElemenstByTagName("标签名")  集合
document.getElementsByClassName("类名")  集合  （IE8以下不兼容）
document.getElementsByName("name属性的值") 集合  （name属性常用于表单元素）
document.querySelector("选择器格式") 只能取到集合的第一个  
document.querySelectorAll("选择器格式") 集合   

节点的增

• 元素节点：var 变量 = document.creatElement("标签名")；//创建节点
  ​ 父标签.appendChild(“变量”)
• 文本节点 var 变量2 = document.creatTextNode("内容")；//创建节点
  ​ 变量.appendChild(变量2)

节点的修改

• 节点类型修改
  ​ 父元素.replaceChild( new元素 , old元素)

节点的删除

• removeChild()

节点的克隆

• cloneNode(true) true可以将内容也克隆

属性节点

• attributes() 获取当前元素上的所有属性节点
  ​ 1. 查询 节点 . getAttribute(属性名) 优点：1.查询class时不用className 2.允许查询自定义属性
  ​ 2. 添加 节点 . setAttribute(属性名) 在行间设置自定义属性
  ​ 3. 删除 节点 . removeAttribute(属性名)

元素节点的其他属性

• innerHtml 1. 获取标签的内容 2. 赋值 节点.innerHtml = "新内容"
• innerText 1. 获取标签中的纯文本 2. 赋值 节点.innerText = "新内容"
• outerHtml 1. 从外标签开始到外标签结束 2. 赋值 节点.outerHtml = “新内容”
  ​

获取子节点

• childNodes() 获取当前节点下所有子节点

• firstChild()

• lastChild()

• nextSibling() 访问当前节点兄弟节点的下一个节点

• previousSibiing() 访问当前节点兄弟节点的上一个节点
  【注】以上方法都包含文本节点
  【注】以下方法只获取子节点中的元素节点

• children（）排除文本节点后的节点

• firstElementChild()

• lastElementChild()

• nextElementSibling()

• previousElementSibling()

获取当前有效样式

1. 节点 . currentStyle[css属性] 谷歌里报错
2. getComputedStyle(节点)[css属性] IE里报错

节点操作

• 创建节点：
  ​ document.creatElement(标签名)
• 插入节点：
  ​ 1. 将node2节点插入到node1节点中子节点的末尾 node1.appendChild(node2)
  ​ 2. 将box2节点插入到box1节点前面 box1.parentNode.insertBefore(box2,box1)
• 替换节点：
  ​ 将box2节点替换box1节点box1.parentNode.replaceChild(box2,box1)
• 创建文本节点：
  ​ document.creatTextNode(文本内容)