WebAPI（一）——DOM
JS组成：ECMAScript。Dom：文档对象模型。Bom：浏览器对象模型。
DOM：
概念：文档即html文件里所有标签都变成对象
文档树中的对象都是节点对象。节点对象分为文档、元素（标签变成的对象）、文本（标签里的内容）、属性（标签里的属性）、注释。
（一）获取元素
1.根据id值获取单个元素
语法：document.getElementById('id值');
代码举栗：
<button id="btn">delete</button>
<script>
var btn = document.getElementById('btn');
console.log(btn);
</script>
若id值有同名（相同），获取的是第一次出现的元素。
2.script标签位置
若在body上面，获取到的会是null空对象。因为浏览器加载（渲染和解析）网页的时候代码从上到下执行，在此位置还没有加载到按钮，文档树上还没有该元素。
3.根据标签名获取组元素
语法：documen.getElementsByTagName('标签名');
返回一组元素。（伪数组）
代码举栗：
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[1]); //通过索引获取某个特定位置上的元素，第二个lis。
伪数组和数组的区别：
相同：都有下标，有length，都能遍历
不同：
1）类型不一样。数组是Array，伪数组不是Array。
console.log(lis instanceof Array); //false
2）伪数组不能调用数组中提供的方法sort。
lis.sort(); //报错
4.缩小范围获取元素
//先根据id获取ul2
var ul2 = document.getElementsByTagName('ul2');
//再获取ul2中的所有值
var lis = ul2.getElementsByTagName('li');
5.根据选择器获取元素
1）根据选择器获取单个元素
语法：document.querySelector('选择器');
有兼容性问题，IE8以下不支持。
代码举栗：
<body>
<button id="btn">按钮</button>
<script>
var btn = document.querySelector('#btn');
var btn = document.querySelector('button');
//如果有两个button标签，获取到的是第一个button
console.dir(btn);
</script>
</body>
不能少了选择器的规则，比如加#和.等
2）根据选择器获取一组元素
语法：document.querySelectorAll('选择器');
有兼容问题，IE8以下不支持。
代码举栗：
<body>
<ul class="ul1">
<li>ul1中的li1</li>
<li>ul1中的li2</li>
<li>ul1中的li3</li>
<li>ul1中的li4</li>
<li>ul1中的li5</li>
</ul>
<ul class="ul2">
<li>ul2中的li1</li>
<li>ul2中的li2</li>
<li>ul2中的li3</li>
<li>ul2中的li4</li>
<li>ul2中的li5</li>
</ul>
<script>
var lis = document.querySelectorAll('.ul2 li');
console.log(lis); //返回的是一个伪数组
</script>
</body>
（二）事件基础
在浏览器中js所侦测到的操作行为。
1.事件三要素
事件源、事件类型、事件处理程序
注册事件语法：元素（事件源）.事件类型 = 事件处理程序;
代码举栗：
//获取按钮元素
var btn = document.getElementById('btn');
//事件类型：点击事件onclick
//事件处理程序：函数
btn.onclick = function() {
//事件处理程序
alert('shijian');
}
2.给一组按钮注册事件
注册事件：在原生js中不要给组注册事件，注册无效。应该给组中的每一个元素注册事件。
btns.onclick = function() {
alert('shijian'); //无效
}
代码举栗：
<body>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<script>
//通过标签名获取一组元素
var btns = document.getElementsByTagName('button');
//代码冗余，所以用循环给一组元素注册事件
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
alert('shijian'); //事件处理程序
};
}
</script>
</body>
循环在此仅仅是给按钮添加事件，但是事件处理程序中代码只有事件触发时（按钮被点击时）才会执行。
3.取消默认行为
1）加return false
<body>
<!-- 默认行为：a会改变原有的地址，并跳转 -->
<a id="link" href="#">按钮</a>
<script>
//获取a元素
var link = document.getElementById('link');
//注册点击事件
link.onclick = function() {
alert('nihao');
//取消默认行为。在事件最后加：
return false;
};
</script>
</body>
2）href="javascript:"
<!-- 告诉浏览器不要跳转，而是仅执行js代码 -->
<a id="link" href="javascript:">按钮</a>
4.事件处理程序中的this关键字
事件处理程序：就是元素的一个方法
方法：方法中this指向调用者。
调用：对象.方法名();
代码举栗：
<body>
<button id="btn">按钮</button>
<script>
//获取元素（对象）
var btn = document.getElementById('btn');
btn.onclick = function () {
// alert('hello');
console.log(this);
};
//若点击了按钮，浏览器会自动调用btn.onclick()
</script>
</body>
事件处理程序中的this指向事件源。
this指向的情况：
1）在构造函数中this指向当前创建的对象
2）在方法中this指向调用者
3）在事件处理程序中this指向事件源。（本质上指向调用者，但是浏览器调用的）
5.鼠标进入事件和鼠标离开事件
代码举栗：
<body>
<div></div>
<script>
//获取事件源div
var div = document.querySelector('div');
//鼠标进入事件
div.onmouseenter = function () {
console.log('鼠标进入');
};
//鼠标离开事件
div.onmouseleave = function () {
console.log('鼠标离开');
}
</script>
</body>
（三）操作元素的属性
1.常见属性id
<body>
<a id="link" href="https://www.baidu.com">点击</a>
<script>
//获取a元素
var link = document.getElementById('link');
//获取a元素的href值
console.dir(link);
//获取元素的属性
console.dir(link.href);
//设置
link.href = 'https://www.jd.com'
console.dir(link);
</script>
</body>
2.常见属性src
<script>
//获取a元素
var link = document.getElementById('link');
//获取图片元素
var photo = document.getElementById('photo');
//给a注册onclick事件
link.onclick = function () {
//在事件处理程序中更改图片元素的src属性值
// photo.scr = 'images/mm.gif';
//获取原有的图片地址，检测是否包含wc.jpg
if (photo.src.indexOf('wc.jpg') != -1) {
//说明当前展示的是wc
photo.src = "images/mm.gif"; //相对路径就可以。
}
else {
//说明当前展示的是mm，要更改为wc
photo.src = "images/wc.gif";
}
console.log(photo.src);
};
</script>
3.className
操作类名的目的就是操作样式。
4.操作div的内容（获取和设置内容）
innerText：仅获取文本内容，不包含子标签的标签名
//设置子标签时，标签会当作普通文本输出，不会渲染
console.dir(box.innerText);
innerHTML：获取文本的内容及标签
//设置子标签时，子标签会渲染展示
相同：都是操作文本
不同：innerText是非标准属性但兼容性好，textContent是标准的属性（官方）但有兼容性问题。
