js中对DOM操作的常用方法总结

1. Node节点

属性:

nodeName 节点名称,元素节点保存的是标签名
nodeType 节点类型,包括元素节点和文字节点
nodeValue 节点值,元素节点的值始终为null

childNodes 保存子节点列表NodeList对象
parentNode 父节点
previousSibling 上一个同胞节点
nextSibling 下一个同胞节点
firstChild 第一个子节点
lastChild 最后一个子节点
*以上关系指针都是只读的,只能通过方法来操作节点

方法:

appendChild(newNode) 在子节点列表末尾添加新节点
insertBefore(newNode, node.firstChild) 特定位置插入新节点
replaceChild(newNode, node.firstChild) 替换节点
removeChild(node.firstChild) 删除节点
*以上方法都是对子节点进行操作,要使用这几个方法必须先取得父节点parentNode,对不支持子节点的节点上调用这些方法,会导致错误

cloneNode(true) 复制节点,接受一个布尔参数,表示是否执行深复制
normalize() 合并文本节点和删除空文本节点

2. 查找子元素节点

属性:

childElementCount 子元素个数
firstElementChild 第一个子元素
lastElementChild 最后一个子元素
previousElementSibling 前一个同辈元素
nextElementSibling 后一个同辈元素
*支持IE9+

3. 查找元素方法

getElementById('id') 取得指定ID的第一个元素
getElementsByTagName('img') 取得所有标签的元素,返回HTMLCollection对象

querySelector('body') 通过CSS选择符获取第一个元素
querySelectorAll('body') 通过CSS选择符获取所有元素,返回NodeList对象,底层实现为一组元素的快照,而非不断对文档进行搜索的动态查询
*选择API支持IE8+

getElementsByClassName('btn') 通过类名获取所有元素,返回NodeList对象,有性能问题
*支持IE9+

4. 操作特性方法

getAttribute('id') 获取特性
*获取到的style特性为CSS文本,获取到的onclick特性为相应代码字符串,一般仅用于取得自定义特性
setAttribute('id', 'red') 设置特性
removeAttribute('id') 移除特性

element.attributes 特性动态集合NamedNodeMap对象,类似NodeList
*可用于遍历元素的特性

5.操作类的方法

  • className属性
    元素所有类构成的字符串
  • HTML5新增的classList属性
    add(value) 增加类
    contain(value) 是否包含类
    remove(value) 删除类,删除不存在的类不会报错
    toggle(value) 改变类
    length属性 类的个数,可以通过索引来访问类名
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本章内容 理解包含不同层次节点的 DOM 使用不同的节点类型 克服浏览器兼容性问题及各种陷阱 DOM 是针对 HT...
    闷油瓶小张阅读 659评论 0 1
  • 原文 链接 关注公众号获取更多资讯 一、基本类型介绍 1.1 Node类型 DOM1级定义了一个Node接口,该接...
    前端进阶之旅阅读 3,961评论 7 34
  • Node类型 DOM1级定义了一个Node接口,该接口由DOM中所有节点类型实现。这个Node接口在JS中是作为N...
    Maggie_77阅读 426评论 0 0
  • 上周参加了一个PPT大赛,12个人中有6个名额有奖,而我,就是那没获奖中的一个。 这是我们部门主办的活动...
    f964145b03d3阅读 211评论 3 3
  • 我抛弃了青春 只为你 青春曾在我眼里 我睁着眼睛 看它将我狠狠丢掉 因为有了你 我曾将咸菜 当成山珍海味 你像是我...
    密密写作阅读 192评论 0 1