获取元素和操作元素
1. 获取元素
1.1 如何获取页面元素
- 根据ID来获取
- 根据标签名来获取
- 通过 HTML5 新增方法来获取
- 特殊元素获取
1.2 根据ID获取
使用 getElementById()
来获取
1.3 根据标签名来获取
使用 getElementsByTagName()
方法返回带有指定标签名的对象的集合
还可以获取某个元素(单个元素)内部所有指定标签名的子元素**element.getElementsByTagName('标签名')
**
1.4 通过 HTML5 新增方法来获取 (ie9以上)
document.getElementsByClassName('类名')
通过类名获取元素document.querySelector(选择器)
选择第一个元素对象document.querySelectorAll(选择器)
选择所有的对象
1.5 特殊元素获取
- 获取 body 元素
document.body
- 获取 html 元素
document.documentElement
2. 操作元素
2.1 改变元素内容
element.innerText
从起始位置到终止位置的内容 ,它去除html标签,同时空格和换行也会去掉
element.innerHtml
起始位置到终止位置的全部内容,包括HTML标签,同时保留空格和换行
2.2 常用元素的属性操作
innerText 、 innerHtml 改变元素内容
src 、 href
id 、alt 、 title
2.3 表单元素的属性操作
利用 DOM 可以操作表单元素的属性
如:type 、 value 、 checked 、 selected 、 disabled
2.4 样式属性操作
可以通过JS 修改样式的大小、颜色、位置等样式
- element.style 行内样式操作
- element.className 类名样式操作
注:JS 中的样式采取驼峰命名法 如:fontSize backgroundColor ;
JS 修改 style 样式操作,产生的是行内样式,CSS权重较高
如果样式修改较多,可以采用操作类名方式更改元素样式,className会直接更改元素的类名
2.5 排他思想
如果有同一组元素,想要某一个元素实现某种样式,需要用到循环的排他思想算法:
- 所有元素全部清除样式
- 给当前元素设置样式
- 顺序不能颠倒
2.6 自定义属性的操作
-
获取属性值
element.属性
获取属性值 (元素本身自带的属性)
element.getAttribute('属性')
(主要获得自定义的属性,由程序员自定义的) -
设置属性值
element.属性值 = '值'
设置内置属性值
element.setAttribute('属性', '值')
-
移除属性
element.removeAttribute('属性')
2.7 H5 自定义属性
自定义属性的目的:为了保存并使用数据,有些数据可以保存到页面中而不用保存到数据库中
自定义属性获取是通过 getAttribute(‘属性’) 获取
但有些自定义属性容易引起歧义,不易判断其是内置属性还是自定义属性
-
设置H5 自定义属性
H5规定自定义属性 是以data- 开头做属性名 并且赋值
如:<div data-index = '1'></div>
或者使用JS设置element.setAttribute('data-index',2)
-
获取H5自定义属性
兼容性获取element.getAttribute('data-index');
H5 新增element.dataset.index
或element.dataset['index']
仅ie 11支持