JavaScript_4 基本语法：DOM的元素操作
Web APIS
之前的只是 js 语法基础罢了。要想实现在浏览器中实现交互功能主要是通过 Web APIs 的交互功能。比如之前接触过的alert(), prompt()直接在浏览器中输入输出这两个方法都属于 Web APIs.
DOM 介绍
document object model 文本对象模型，是W3C推荐的可扩展的标记语言（HTML XML）的标准编程接口。通过这些借口可以改变网页的内容、结构、样式。
文档：一个页面是一个文档。
元素：一个标签是一个元素。
结点：网页中所有内容都是结点（标签、属性、文本、注释）。
以上三者都是对象。
获取元素
getElementById() 通过 id 获取元素。没有返回 null。
<div id='time'></div>
var timer=document.getElementId('time');//返回元素对象
console.log(timer);//打印标签和内容
console.dir(timer);//打印其详细信息
getElementsByTagName() 根据标签名获取，返回对象集合。可以通过数组下标的形式访问第几个元素。
除了 document.getElementsByTagName() 父元素，也可以 element.getElementsByTagName() 获取该父元素中的子元素。注意父元素不可以是对象数组，必须是具体的某个对象，形如 element[0].
getElementsByClassName() H5新增方法，根据类名获取。
querySelector() H5新增方法，根据选择器获取第一个对应元素对象，括号中写选择器。如.style说明这是个类选择器，#style说明这是个id选择器，li直接写标签是标签选择器.
querySelectorAll() 获取所有对应元素对象。
document.body() document.documentElement() 获取 body 和 html 元素。
事件
分为三部分：事件源，事件类型（点击？获取鼠标焦点？）执行程序。
事件源：获取的元素对象。
事件类型、事件对象：通过函数赋值方式完成。
btn.onclick=function(){
alert('点击按钮弹出警示');
//this会指向事件的调用者，即btn自己。
this.disabled=true;
}
onclick 点击
onmouseover 鼠标经过
onmouseout 鼠标移开
onfocus 获得焦点
onblur 失去焦点
onmousemove 鼠标移动
onmouseup 鼠标弹起
onmousedown 鼠标按下
修改文本
element.innertext='新文本';
文本也可以是之前的一些js基础内容，比如获取今天日期。
如果不添加事件直接写上式，那么在打开页面时就会自动修改文本。
element.innereHTML='新文本';
innerHTML 可以识别标签，如。
获取文本
var text=element.innertext;
var text=element.innerHTML;
这两个属性也可以访问值，获取文本内容，innerHTML 还会包含空格、标签等内容。
修改属性
img.src='新src';img.title='新标题';
修改表单属性
value：表单中的值
disabled：是否被禁用
checked, selected：是否被选择
制作密码框，点击眼睛图标后密码可见，再次点击密码隐藏：切换输入框的type=text或password。
修改样式
btn.style.backgroundColor:#ffffff;
js中样式属性为驼峰命名法；
修改的样式属于行内样式，权重较高。
点击叉号关闭：display: none;
循环精灵图的制作：在for循环中调整每个图标的 backgroundPosition 位置。
如果要改的样式太多，可以直接改类选择器：element.className='新类选择器';这个优先级比默认的类选择器高，会覆盖原来的样式。
制作带提示信息的密码框，用户输入少于6位或多于16位时显示红色提示信息：首先判断用户焦点离开输入框，然后判断输入框中值的长度，如果不符合规范则样式变为红色，提示信息变为“输入的密码格式不正确”。
排他思想
例：一共有五个按钮，默认都是白色背景，每次点击一个按钮时，只有那个按钮变色。
for(int i=0;i<5;i++){
btn[i].onclick=function(){
this.style.backgroundColor='red';
}
}
但是上面的解法问题在于点击后的按钮红色会永久保留，而我们每次只希望一个按钮变色。
解法：每次点击时，先把所有按钮背景颜色置为白色（排他），然后再把当前按钮背景置为红色。
轮播图的小圆点就会采用这种方法。不过也不是所有的只变当前元素的示例都需要排他思想。比如鼠标经过按钮变色，离开恢复，就可以只写 onmouseover 变红和 onmouseout 变白。
tabBar制作也会用到排他思想。点击对应的li列表，该列表的样式变为被选中状态，同时该列表中包含的内容也是一样的，变为display:block状态，其他的隐藏或未选中状态。这里列表对应内容元素可以通过下面的自定义属性实现。
自定义属性
除了元素自带的属性还可以自定义。
元素自身原有的属性通过.属性就能获取和赋值。
自定义属性通过getAttribute()获取，setAttribute('属性','值')赋值，removeAttribute('属性')删除属性。
为防止自定义属性与元素原有属性产生歧义，H5规定所有自定义属性以data-开头，如 data-index, data-list-name，获取的时候有两种方法，第一种还是getAttribute(), 如element.getAttribute('data-index')
ie11后还支持一种获取自定义属性的方法：采用驼峰命名法，属性名为index, listName，不包含data。
然后使用dataset获取，如element.dataset.listName或element.dataset['listName']。
这种方法获取的属性只能由data开头，属性名不包括data。