为什么要获取元素？
我们想要操作页面上的某部分（显示/隐藏，动画），需要先获取到该部分对应的元素，才进行后续操作
1. 根据id获取元素
document.getElementById("bo1x");
注意：①如果没有指定的id，则返回值为null
- 档是从上往下一次执行
- console.dir() 输出的是元素对应的标签的内容
- 如何获取对象的类型（对象是有类型的）
Typeof 不能获取对象的具体类型，返回值始终是object
- console.log(对象.constructor) constructor 构造器,返回对象的构造函数
- 获取到的数据类型HTMLDivElement，对象都是有类型的
2.根据标签名获取元素
document.getElementsByTagName('div');
伪数组，返回值就是一个伪数组，但是不具备数组的方法
3.根据name获取元素
document.getElementsByName('div');
- 返回的是NodeList类型（节点的集合），返回值是元素
4.根据classname获取元素
document.getElementsByClassName("div1");
返回值是HTMLCollection，是一个集合
5. querySelector （HTML5中新增的方法）
Document.querySelector(“选择器名称”)
查找一个元素，如果页面上有多个符合条件的元素，只返回第一个标签。
返回值为Nodelist（元素）
6. querySelector （HTML5中新增的方法）
Document.querySelectorAll(“选择器名称”)
返回一个集合，还是一个Nodelist（元素）的集合
事件
Onclick
事件的名称是click，on是事件的开头
事件的三要素：
事件源：触发事件的元素
事件名称：click
事件处理函数：触发事件之后做的事情
如果想取消后续内容的时候在代码后添加如下代码：
Return false；
EG1:实现单击按钮切换图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<body>
<input type="button" id="bu1" value="切换"><br>
<img src="./img/4.jpg" alt="" id="im1">
<script>
//1.获取超链接
var link = document.getElementById("bu1");
// flag=1 4.jpg flag=2 5.jpg
var flag = 1;
//2.给超链接注册图片
link.onclick = function (){
//3.切换图片
var im = document.getElementById("im1");
if (flag ==1){
flag=2;
im.src = "./img/5.jpg";
}else{
flag=1;
im.src = "./img/4.jpg";
};
//4.取消a标签的默认行为
return false;
}
</script>
</body>
</html>
属性操作
非表单元素的属性
Href,title.id,sec,className
注意:标签中有什么属性，使用document.getElementById后的对象就有相同名的属性，但是class除外，它的名是className，因为class是关键字
补充：
1.disabled 属性规定应该禁用 input 元素。
被禁用的 input 元素既不可用，也不可点击。可以设置 disabled 属性，直到满足某些其他的条件为止（比如选择了一个复选框等等）。然后，就需要通过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可用。
2.在事件处理函数中，this---事件源触发事件的对象。
函数中this--->window对象
Function fn(){
Console.log(this)
}
方法中this--->是调用该方法的对象
var obj ={
Name:”zs”,
Say:function (){
Console.log(this);
}
}
obj.say();
构造函数中this--->当前对象
事件处理函数中this--->触发事件的对象，事件源
补充：innerHTML 和innerTEXT的区别(innerHTML不是标准的DOM标准
使用innerHTML的时候一般当插入的内容中存在开始和结束标签。
获取内容：
InnerHTML 获取内容的时候，会把标签也获取到+
InnerTEXT 获取内容的时候，会把标签过滤掉
设置内容：
InnerHTML 设置内容的时候，会把标签进行解析
InnerTEXT 设置内容的时候，会把标签进行转义
另外：低版本浏览器不支持innerText，支持textContent
表单元素属性
value 用于大部分表单元素的内容获取（option除外）
type 可以获取input标签的类型（输入框或复选框等）
disabled 禁用属性
checked 复选框选中属性
selected下拉菜单选中属性
补充：禁用属性(disabled)
当标签的属性只有一个值的情况下，一般DOM元素对应的此属性的类型是布尔类型
自定义属性操作
样式操作
类名操作
Var btn = document.getElementById(“btn”);
btn.className = “current”