JavaScript中常用的DOM操作函数
来源:互联网 发布:爱丁堡商学院申请 知乎 编辑:程序博客网 时间:2024/06/06 04:46
目前正在自学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 文本节点
0 0
- JavaScript中常用的DOM操作函数
- Javascript中DOM常用操作
- javascript常用函数方法(DOM基本操作)
- Javascript中Dom常用操作总结
- JavaScript 常用 dom 操作
- 原生JavaScript常用的DOM操作
- DOM对象的javascript常用函数
- javaScript中dom操作
- javascript之DOM中常用的方法
- JavaScript中常见的HTML DOM操作
- Javascript中对DOM操作的总结
- javascript DOM技术常用操作
- JavaScript常用原生DOM操作
- javascript 常用DOM操作整理
- jquery 中关于DOM 的常用操作
- 12、javascript中数组常用的函数操作总结
- Javascript的DOM操作
- Javascript的DOM操作
- win下安装scrapy框架
- 我的java学习路之循环学习应用demo1九九乘法表
- matlab中创建一维数组变量的方法
- struts2+jquery+ajax实现传输List数据并解析
- java中讲讲FileInputStream的用法,举例?
- JavaScript中常用的DOM操作函数
- 【leetcode】binary-tree-postorder-traversal
- mutableCopy与copy在面试中的那些坑你知道吗?
- Bootstrap初学
- [Leetcode]_21 Merge Two Sorted Lists
- ubuntu 下配置dlib-18.16 在QT中使用
- Ubuntu下用C语言访问MySQL数据库
- 【smoj 1167】松果
- java中讲讲InputStream的用法,举例?