<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> webAPI </title>
<!--
什么是 webAPI;
web：网页
api：接口。一套别人封装好的方法和属性，我们只要来调用就能起到对应的功能
webAPI：就是一套专门用来操作网页的方法和属性
万物皆对象，webAPI里面可以体会到，把网页中所有的元素都当做对象来处理
目前我们的webAPI阶段把JS代码都写在body结束之前
1.能保证一定能找到我们想找的元素
2.符合规范
// 总结找元素的方法和细节;
document.getElementById：
通过id来找元素，找得到返回这个元素对象，找不到返回null
以下方法无论如何都会返回伪数组，哪怕找不到返回的也是长度为0的空数组
document.getElementsByClassName
通过类名找，有兼容的问题,IE8和之前的浏览器不支持
document.getElementsByTagName
通过标签名找
document.getElementsByName
通过name属性来找，IE8和以前的浏览器只能找到表单元素，新浏览器都能找到（了解一下）
onmouseover：鼠标移入事件
onmouseout: 鼠标移出事件
-->
<style>
.box {
width: 500px;
height: 500px;
border: 1px solid #000;
margin: 20px 0px;
}
.red {
background-color: rgb(241, 15, 15);
}
</style>
</head>
<body>
<h1 id="title">根据id去找到某个元素</h1>
<input type="button" value="获取它的类" id="btn1">
<input type="button" value="添加一个类变红色" id="btn2">
<input type="button" value="删除一个类：删掉颜色" id="btn3">
<div class="box">根据类名获取元素， 得到的是一个伪数组</div>
<input type="button" value="修改" id="ben">
<p>通过标签名找到元素</p>
<p>通过标签名找到元素</p>
<p>通过标签名找到元素</p>
<script>
/* document.getElementById
通过id找到某个元素， 当返回值返回
如果找到返回的就是这个元素， 找不到返回的是null
*/
// 根据id去找到某个元素
// 通过返回值返回元素
var res = document.getElementById('title');
console.log(res);
/* document.getElementsByClassName：
根据类名获取元素， 得到的是一个伪数组
它无论如何返回的都是伪数组， 哪怕找不到也是返回长度为0的空数组
后面加s返回的肯定是伪数组！ getElement(s)ByClassName
伪数组： 有下标、 元素、 长度， 但是没有数组提供的那些方法（ 例如： push等等方法）
如果想获取类名 // 元素.className
加一个类： += 但是注意新类名前面要写空格 // 删一个类： 重新赋值
*/
// 找按钮
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');
//找div
// 因为只找到这一个div，所以取下标0，因为下标0就是这个div
var box = document.getElementsByClassName('box')[0];
// 按钮1的点击事件, 获取 div 的类
btn1.onclick = function () {
alert(box.className);
}
// 按钮2的点击事件, 给div加一个类
btn2.onclick = function () {
//给div加一个类red,记得要把它原来的类也给写上，不然会覆盖掉
// box.className = "box red";
// box.className += "red"; //本质是 box.className = "box" + "red";
// 加一个类可以用+=,但是要记得新类名前面要加空格
box.className += " red";
}
// 按钮3的点击事件, 删掉一个类
btn3.onclick = function () {
// 字符串没有-，如果你用-相当于会把字符串尝试转换成数字，但是这里转换不成功得到NaN
// 所以说删掉一个类绝对不可能用-=
// box.className -= " green";
// 如果要删掉一个类，可以重新赋值，重新赋值的时候不要带被删的那个类就行了
box.className = "box";
}
// ---------------------------------------
//通过标签名找到元素
var pList = document.getElementsByTagName('p');
//找到按钮 ,修改双标签里面的文本 ：innerText
var ben = document.getElementById('ben').onclick = function () {
for (var i = 0; i < pList.length; i++) {
pList[i].innerText = "哈哈"
}
}
</script>
</body>
</html>
网友评论