WebAPI
API的概念
API(Application Programming Interface 应用程序编程接口)是一些预先定义的函数；
目的是提供一些应用程序与开发人员基于软件或硬件得以访问一组例程的能力；
而又无需访问源码，或理解内部机制的细节
1.任何开发语言都有自己的API
2.API的特征输入和输出(I/O)
3.API的使用方法(console.log())
WebAPI 的概念
1.浏览器提供的一套操作浏览器功能和也页面元素的API(BOM和DOM)
2.此处的WebAPI特指浏览器提供的API(一组方法),WebAPI在后面的课程中有其他含义
DOM
1.DOM的作用：操作页面的元素
2.DOM树：把HTML页面或是xml文件看成是一个文档，文档就是一个对象，
这个文档中的标签都是元素，元素也可以看成是对象，标签(元素、对象)有很多，
还有嵌套的关系，组成的层次结构，可以模拟成属性结构图，简称：树状图，DOM树
获取元素的方式
1.根据id从整个文档中获取元素---返回的是一个元素对象
document.getElementById("id的属性值")；
2.根据标签的名字获取元素-----返回的是元素的对象组成的为数组
document.getElementsByTagName("标签的名字")；
操作基本标签的属性
src、title、alt、href、id属性; .innerText("")
操作表单标签的属性
name、value、type、checked、selected、disabled、readonly
元素的样式操作
对象.style.属性 = 值
对象.className = 值
事件
事件：就是一件事，有事件源、触发和响应
this关键字----如果在当前的事件中使用this关键字，那么this就是当前的对象
DOM对象
内置对象：系统自带的对象
自定义对象：自己写的对象
DOM对象： 通过DOM方式获取元素得到的对象
元素(element)：页面中的标签
节点(Node)：页面中的所有内容，标签，属性，文本
根元素：html标签
页面中的顶级对象：document
案例
1.点击按钮禁用文本框
<body>
<input type="button" value="禁用文本框" id="btn"/>
<input type="text" value="文本框" id="txt"/>
<script>
document.getElementById("btn").onclick=function(){
document.getElementById("txt").disabled = true;
};
</script>
</body>
2.阻止超链接跳转
在点击事件末尾写上return false；
<a href="http://www.baidu.com" onClick="alert('aaaaa'); return false;"></a>
3.点击小图，切换大图
4.美女相册
5.列表隔行变色
6.鼠标进入、离开事件
.onmouseout
.onmouseover
7.模拟搜索框
.onfocus //获取焦点
.onblur //失去焦点
<body>
<input type="text" id="txt"/>
<script>
function my$(id){
return document.getElementById(id);
};
my$("txt").value = "请输入搜索内容：";
my$("txt").style.color = "gray";
my$("txt").onfocus = function(){
if(this.value == "请输入搜索内容："){
this.value = "";
this.style.color = "black";
};
}
my$("txt").onblur = function () {
if(this.value.length == 0){
this.value = "请输入搜索内容："
this.style.color = "gray";
};
}
</script>
</body>
8. 验证文本框密码长度
9. 获取标签对之间的内容
<body>
<p>sdfghjkl;</p>
<script>
var p_value = document.getElementsByTagName("p")[0].innerText;
</script>
</body>
其它获取元素的方式
1.根据选择器方式
document.getquerySelector("同css选择器写法")
返回一个元素对象
2.根据选择器方式(多个)
document.getquerySelectorAll("同css选择器写法")
返回一个元素对象伪数组
获取元素方式总结
1.根据id属性的值获取元素，返回的是一个元素对象
document.getElementById("id属性的值")；
2.根据标签名字获取元素，返回来的是一个伪数组，里面保存了多个DOM对象
document,getElementsByTagName("标签名")；
//下面的有的浏览器不支持---------------------------------
3.根据name属性的值获取元素，返回来的是一个伪数组，里面保存了多个DOM对象
document.getElementsByName("name属性的值")
4.根据类样式的名字来获取元素，饭回来的是一个伪数组，里面保存了多个DOM 对象
document.getElementsByClassName("类样式的名字")；
5.根据选择器获取元素，返回来的是一个元素对象
document.querySelector("选择器的名字")；
6.根据选择器获取元素，返回来的是一个伪数组，里面保存了多个DOM对象
document.querySelectorAll("选择器的名字")；
封装innerText和textContent–浏览器兼容
设置标签中的文本内容，应该使用textContent属性，谷歌、火狐支持，IE8不支持
使用innerText，谷歌、火狐(高版本)、IE8都支持
如果某属性在浏览器中不支持，则该属性的类型是undefined；
//兼容代码
//设置任意标签中的任意文本内容
function setInnerText(element,text){
if(typeof element.TextContent == "undefined"){//不支持
element.innerText = text;
}else{
element.textContent = text;
}
}
//获取任意标签中的文本内容
function getInnerText(element){
if(typeof element.textContent == "undefined"){
return element.innerText;
}else{
return element.textContent;
}
}
innerText和innerHTML区别
如果使用innerText主要是设置文本的，设置标签内容的，是没有标签效果的
innerHTML是可以设置文本内容，也可以在标签中设置新的标签内容，具有标签效果的
设置内容总结：
设置标签内容：innerHTML
设置文本内容：innerHTML、innerText、textContent
innerText可以获取标签中间的文本内容，但是标签中如果还有标签，那么最里面的标签内文本内容也能获取，但标签对丢失
innerHTML可以真正的获取标签中间的所有内容，包括所含的标签对
获取内容总结：
获取标签及文本内容：innerHTML
仅获取文本内容：innerText
自定义属性
本身html没有的，程序员自己添加的属性
自定义属性的获取-.getAttribute("自定义属性名");
在html标签中添加的自定义属性，如果想要获取这个属性的值，
需要使用getAttribute("自定义属性的名字")才能获取这个属性的值
<body>
<ul id="uu">
<li score="10">李白</li>
<li score="20">韩信</li>
<li score="30">张良</li>
<li score="40">刘邦</li>
<li score="50">刘备</li>
</ul>
<script>
var li = document.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
li[i].onclick = function () {
alert(this.getAttribute("score")); //专门获取自定义属性的值
};
};
</script>
</body>
自定义属性的设置-.setAttribute("自定义属性名","自定义属性值");
<body>
<ul id="uu">
<li>李白</li>
<li>韩信</li>
<li>张良</li>
<li>刘邦</li>
<li>刘备</li>
</ul>
<script>
var li = document.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
li[i].setAttribute("score",(i+1)*10);
li[i].onclick = function () {
alert(this.getAttribute("score"));
};
};
</script>
</body>
属性的移除-.removeAttribute("属性名") //自定义、系统自带的属性
案例-响应列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>响应列表</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.all{
width: 300px;
height: 350px;
margin: 100px auto;
border: 1px solid gray;
box-sizing: content-box;
}
#header{
height: 50px;
}
#body{
height: 300px;
position: relative;
}
#body>div{
width: 300px;
height: 300px;
background-color: pink;
position: absolute;
top: 0;
left: 0;
}
#hu{
height: 50px;
}
#hu li{
float: left;
margin-right: 10px;
border: 1px solid gray;
border-top: 0;
height: 50px;
width: 52px;
list-style: none;
line-height: 50px;
text-align: center;
}
#hu li:last-child{
margin-right: 0;
border-right: 0;
}
#hu li:first-child{
border-left: 0;
}
.hc{
background-color: pink;
}
#body div{
display: none;
}
#body .current{
display: block;
}
</style>
</head>
<body>
<div class="all">
<div id="header">
<ul id="hu">
<li>体育</li>
<li>娱乐</li>
<li>新闻</li>
<li>综合</li>
<li>电竞</li>
</ul>
</div>
<div id="body">
<div class="current">我是体育栏</div>
<div>我是娱乐栏</div>
<div>我是新闻栏</div>
<div>我是综合栏</div>
<div>我是电竞栏</div>
</div>
</div>
<script>
function my$(id){
return document.getElementById(id);
}
var ulObj = my$("hu");
var liObj = ulObj.getElementsByTagName("li");
var divObj = my$("body").getElementsByTagName("div");
for(var i=0;i<liObj.length;i++){
liObj[i].setAttribute("index",i);
liObj[i].onmouseover = function () {
var num = this.getAttribute("index");
for(var j=0;j<liObj.length;j++){
liObj[j].removeAttribute("class");
liObj[j].style.borderBottom = "1px solid gray";
}
this.className = "hc"
this.style.borderBottom = "0";
for(var k=0;k<divObj.length;k++){
divObj[k].removeAttribute("class");
}
divObj[num].className = "current";
}
}
</script>
</body>
</html>