HTML基础之DOM
DOM（Document Object Model 文档对象模型）
一个web页面的展示，是由html标签组合成的一个页面，js是一门语言，dom对象实际就是将html标签转换成了一个文档对象。可以通过dom对象中js提供的方法，找到html的各个标签。通过找到标签就可以操作标签使页面动起来，让页面动起来；对于ui自动化来说我们可以用次方法来定位元素。
dom可以直接在浏览器的开发者工具的console中操作
获取标签
// 直接获取标签
操作标签
一、文本内容操作
innerHTMl和innertext
innerText 获取到标签中的主动闭合标签的中间的那个文案
tmp.innerText='老铁双击666'; //更改标签内文本内容
tmp.innerHTML; // 获取标签中的所有html代码，把可以将含有HTML代码的字符串变为标签-->
eg:
<!--tmp.innerHTML="<input type='button' value='提交'>"-->
input/textarea标签操作
tmp.value //获取input和textarea参数值
tmp.value='XXXXXX'对input和textarea的值进行赋值
select标签
tmp.value; //获取select标签的选定的value参数
tmp.value = '选项' // 修改select选中的选项，通过value修改更改必须预制value属性
tmp.selectedIndex; // 获取当前select标签的选中的选项下标
tmp.selectedIndex = 1 // 通过下标更改select的选项
绑定事件
直接绑定和间接绑定：
直接绑定：
eg.1:
<input type='button' value = '提交' style='float:left;margin-top: 50px' onclick='click1()';>
<script>
function click1() {
alert('click事件！！！'); //弹窗
}
</script>
间接绑定：
eg.2
<input type="button" id="i1" value="提交">
<input type="text" id="i2" placeholder="switch">
<script>
var target = document.getElementById('i1');//必须有分号
// target.onclick=function () {
// var tmp = document.getElementById('i2').value
// if (tmp==1){
// alert("tmp==1")
//
// }else if (tmp==2){
// alert('tmp==2')
// }else{
// alert('none')
// }
//</script>
onfocus() //获取光标时操作
onblur() //失去焦点做操作
onclick()//单击时操作
ondblclick()//双击时操作
onmouseover()//鼠标悬浮触发操作
onmouseout()//鼠标离开悬浮触发操作
=== 三个等号代表必须类型相同，是强类型判断；两个等号只判断值相等
操作样式
<!--tmp.className = 'c1'; // 更改标签class属性 只能有一个class属性-->
<!--tmp.classList;// 获取样式数组-->
<!--tmp.classList.add('aaa'); //添加样式 数组-->
<!--tmp.classList.remove('aaa'); //删除样式-->
tmp.checked; //获取checkbox的状态 true为勾选<!--操作单独样式-->
<!--style.xxx //操作任意样式属性，相当于在标签中增加一个style属性-->
<!--tmp.style.display='none'样式隐藏 操作单个样式属性，相当于在标签中增加一个style属性-->
<!--tmp.style.display=''相当于没有display属性-->
<!--tmp.style.backgroundColor='blue'-->
<!--js中不能使用“-”会把“-”后第一个字母变成大写来转义-->
创建标签：
通过对象方式创建标签
createElement(tagName) //通过DOM创建一个标签对象
appendChild(tagObj) //在父级标签内添加一个子标签对象
字符串方式创建标签
