DOM
DOM
Document Object Model 文档对象模型
一套操作页面元素的属性和方法
了解 DOM
DOM 是以树状结构存在的内容
DOM 的顶级是 document 表示当前文档
在 PC 端, document 上面还有一个 window
对 DOM 的操作
从 document ~ 各种标签, 文本, 属性, 样式 的操作
获取 DOM 元素
通过 JS 获取到页面中的元素, 进行操作
1. 非常规标签
1-1. html
document.documentElement
1-2. head
document.head
1-3. body
document.body
2. 常规标签
不是不能获取非常规标签, 只是一般不这么用
2-1. getElementById()
使用方法: 查找范围.getElementById('id 名称')
查找范围: document 或者一个 元素
2-2. getElementsByTagName()
使用方法: 查找范围.getElementsByTagName('标签名')
2-3. getElementsByClassName()
使用方法: 查找范围.getElementsByClassName('类名')
2-4. getElementsByName()
使用方法: 查找范围.getElementsByName('元素 name 属性的值')
2-5. querySelector()
使用方法: 查找范围.querySelector('选择器')
2-6. querySelectorAll()
使用方法: 查找范围.querySelectorAll('选择器')
特点: 5 和 6 IE 低版本不支持
元素的属性
id / class / style / src / type / name / href / border / ... 叫做原生属性
style 是属性名, 这个属性的作用就是给元素设置内联样式
index / abc / aaa / ... 自定义属性
不是标签原生自带的属性, 是我们自己随便书写的一个属性
data-xxx 开头的属性
我们都叫做 H5 自定义属性
操作元素属性
使用 JS 语法操作标签上的三种属性
1. 原生属性
直接操作
元素.属性名
2. 自定义属性
setAttribute()
getAttribute()
removeAttribute()
3. H5 自定义属性
元素.dataset.xxx
原生属性
使用方法: 元素.属性名
读: 元素.属性名
获取元素该属性的值
写: 元素.属性名 = '值'
设置该元素的该属性的值
注意: class 除外, 操作 类名使用 元素.className
自定义属性
不能直接点语法操作
三种方法
1. setAttribute('属性名', '属性值')
给元素标签上设置属性
2. getAtrribute('属性名')
获取元素上的属性的值
3. removeAttribute('属性名')
删除元素上的属性
特点:
1. 可以操作自定义属性, 可以操作原生属性
2. 不管你设置什么数据类型, 当你再次从标签上拿到的时候, 都是字符串
DOM 是 js 比较重要的部分,由于这里涉及到 html 和 css 的操作,所以一定要努力学习好这里,后面我会讲到 DOM 是如何操作父元素以及其他元素的 ,希望能够帮助到大家更好的理解 DOM.
版权声明: 本文为 InfoQ 作者【Jason199】的原创文章。
原文链接:【http://xie.infoq.cn/article/77af168093d46fb6050276fbb】。
本文遵守【CC BY-NC】协议,转载请保留原文出处及本版权声明。
评论