0６-JavaScript 获取元素和操作元素

１. 获取元素

１.1 如何获取页面元素

1. 根据ID来获取
2. 根据标签名来获取
3. 通过 HTML5 新增方法来获取
4. 特殊元素获取

１.2 根据ID获取

使用 getElementById() 来获取

１.3 根据标签名来获取

使用 getElementsByTagName() 方法返回带有指定标签名的对象的集合

还可以获取某个元素(单个元素)内部所有指定标签名的子元素**element.getElementsByTagName('标签名')**

１.4 通过 HTML5 新增方法来获取 (ie9以上)

1. document.getElementsByClassName('类名') 通过类名获取元素
2. document.querySelector(选择器) 选择第一个元素对象
3. document.querySelectorAll(选择器) 选择所有的对象

１.5 特殊元素获取

1. 获取 body 元素 document.body
2. 获取 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 排他思想

如果有同一组元素，想要某一个元素实现某种样式，需要用到循环的排他思想算法：

1. 所有元素全部清除样式
2. 给当前元素设置样式
3. 顺序不能颠倒

2.6 自定义属性的操作

1. 获取属性值
   element.属性 获取属性值　　　（元素本身自带的属性）
   element．getAttribute('属性')（主要获得自定义的属性，由程序员自定义的）

2. 设置属性值
   element．属性值 = '值'　　设置内置属性值
   element．setAttribute（'属性', '值'）

3. 移除属性
   element．removeAttribute（'属性'）

2.7 H5 自定义属性

自定义属性的目的：为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中
自定义属性获取是通过 getAttribute(‘属性’) 获取
但有些自定义属性容易引起歧义，不易判断其是内置属性还是自定义属性

1. 设置H5 自定义属性
   H5规定自定义属性 是以data- 开头做属性名 并且赋值
   如：<div data-index = '1'></div>
   或者使用JS设置 element.setAttribute('data-index',2)

2. 获取H5自定义属性
   兼容性获取 element.getAttribute('data-index');
   H5 新增 element.dataset.index 或 element.dataset['index'] 仅ie 11支持