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元素)
节点的删除
节点的克隆
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()
获取当前有效样式
节点 . currentStyle[css属性]
谷歌里报错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(文本内容)