目前正在自学JavaScript,学到DOM操作,现总结常用操作函数,如有不对,敬请评论,共同进步。JavaScript中DOM操作的核心内容即 dom结点的 增删改查
1、查询
(1)标准的DOM API
document.getElementById
document.getElementsByTagName
document.getElementsByName
在IE8以下不兼容获取不到div、span、非name标准元素属性document.getElementsByClassName
在IE8以下不兼容;document.querySelectorAll
返回匹配的元素集合,如果没有匹配项,返回空的nodelist(节点数组),参数为css选择器
(2)亲属访问(当前节点node)
- 父节点.firstChild 获取父节点的第一个子节点
- 父节点.lastChild 获取父节点的最后一个子节点
- node.parentNode 当前节点的父节点
- node.previousSibling 当前节点的上一个兄弟节点
- node.nextSibling 当前节点的下一个兄弟节点
- node.attributes 获取属性集合
- node.childNodes 获取子元素集合
(3)属性获取
getAttribute
获取属性值getAttributeNode
获取属性节点
2、增加
(1)创建
document.createElement
创建元素节点document.createTextNode
创建文本节点document.createAttribute
创建属性节点innerHTML
innerText
cloneNode
参数为Boolean类型,设置为 true,克隆节点及其属性,以及后代,设置为 false,只需要克隆节点及其后代
(2)加入到DOM树
appendChild
追加到元素的结尾处insertBefore
将元素插入到某一元素的前面
语法:当前节点的父元素.insertBefore(newItem,existingItem);innerHTML
(3)其他
- style的操作
- setAttribute(属性名,属性值)
3、删除
(1)删除元素
removeChild
removeAttributeNode
4、修改
(1)修改结点
- 删除节点再加入
(2)修改样式
- style.xxx = xxx
- setAttribute
(3)修改文本
innerHTML
innerText
早期火狐浏览器不支持- 同节点操作,先删除在添加
nodeValue
(4)修改属性
- .属性名 = xxx
setAttribute
5、常用的节点属性
nodeValue 表示节点的值,所有节点都有该属性,但一般文本节点使用该属性
nodeName 表示节点的名字,所有节点都有该属性,但一般元素节点才使用。元素节点打印的元素名均为大写字母。所有文本节点都打印#text
nodeType节点类型
- 1 元素节点
- 2 属性节点
- 3 文本节点