JS基础-浏览器API
第0章 API介绍
HTML：用来存储网页内容;
CSS：用来定义这些内容的显示样式；
JavaScript：用来创造丰富的页面效果或者网页应用。
0.1 API 介绍
API（ApplicationProgramming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
· 任何开发语言都可以有自己的API
· API的特征输入和输出(I/O)
· API的使用方法
0.2 Web API 接口的概念
浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
此处的Web API特指浏览器给JS提供的API(一组方法)，Web API在后面的课程中有其它含义
前面我们说过，浏览器的API一共提供了三种类型；
分别是浏览器操控类(BOM)、页面文档操控类(DOM)、网络控制类；
但实际上，浏览器提供的API并不只有这三类，而是有很多类：
文档对象模型、设备API、通信API、数据管理API、特权API、已认证应用程序的私有API；
第1章文档对象模型 (DOM)
1.1 基本概念
DOM是JavaScript操作网页的接口，全称为“文档对象模型”(DocumentObject Model)。它的作用是将网页转为一个JavaScript对象，从而可以用脚本进行各种操作(增删改查)。
浏览器会根据DOM模型，将结构化文档(比如HTML和XML)解析成一系列的节点，再由这些节点组成一个树状结构(DOM Tree)。所有的节点和最终的树状结构，都有规范的对外接口。
JavaScript是一门编程语言，而DOM是浏览器对HTML文档结构化后的一个模型;
严格地说，DOM不属于JavaScript，但是我们最常用的就是使用JavaScript操作DOM;
1.2 节点的概念
DOM的最小组成单位叫做节点(node)。文档的树形结构(DOM树)，就是由各种不同类型的节点组成。
每个节点都可以看作是文档树的一片叶子。
最顶层的节点就是document节点，它代表了整个文档；是文档的根节点。
每张网页都有自己的document节点，window.document属性就指向这个节点的。
只要浏览器开始载入HTML文档，这个节点对象就存在了，可以直接调用。
每一个HTML标签元素，在DOM树上都会转化成一个Element节点对象;
文档里面最高一层一般是HTML标签，其他HTML标签节点都是它的下级。
除了根节点以外，其他节点对于周围的节点都存在三种关系:
父节点关系(parentNode):直接的那个上级节点
子节点关系(childNodes):直接的下级节点
同级节点关系(sibling):拥有同一个父节点的节点
1.3 查找节点
上一节我们知道，整个文档的节点就是document节点，那么想要具体找到某个节点，我们可以使用document提供的一系列方法：
<div>
<pid="p1">1111111111</p>
<i>2222222222</i>
<pclass='p'>1111111111</p>
<i>2222222222</i>
<pclass="p">1111111111</p>
<i>2222222222</i>
<divid="p">
<pname="p">3333333333</p>
</div>
</div>
getElementsByTagName()返回所有指定HTML标签的元素，返回值是一个类似数组的HTMLCollection对象；匹配失败，返回[]参数是想要获取节点的具体节点名称，就是标签名；
varp=document.getElementsByTagName('p');
p[3].style.background='red';
getElementsByClassName()返回所有class名字符合指定条件的元素,返回值是一个类似数组的HTMLCollection对象；匹配失败，返回[]参数为标签的class属性的值
varp=document.getElementsByClassName('p');
p[1].style.background='yellow';
getElementsByName()选择拥有name属性的HTML元素，返回值是一个类似数组的HTMLCollection对象；匹配失败，返回[]参数为标签的name属性的值;注意，使用时，最好选择原生具有name属性的元素；
varp=document.getElementsByName('p');
p[0].style.background='yellow';
getElementById()返回匹配指定id属性的元素节点;没有发现匹配的节点，则返回null参数为标签的id属性的值,参数大小写敏感;
varp=document.getElementById('p');
p.style.background='yellow';
querySelector()、querySelectorAll()document.querySelector方法接受一个CSS选择器作为参数，返回匹配该选择器的元素节点；如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null；
document.querySelectorAll方法与querySelector用法类似，区别是返回一个类似数组的HTMLCollection对象，包含所有匹配给定选择器的节点。
varp=document.querySelector('.p');
p.style.background='yellow';
varp=document.querySelectorAll('.p');
p[1].style.background='yellow';
多个参数值，使用,（英文逗号）隔开，而querySelector()返回第一个选中的节点；
varp=document.querySelectorAll('i,.p');
for(vari=0;i<p.length;i++){
p[i].style.background='yellow';
}
这两个方法都支持复杂的CSS选择器。
//选中 id 属性值为p1的元素
// var p = document.querySelectorAll('[id="p1"]');
//选中div元素的class属相值为p的元素
// var p = document.querySelectorAll('div.p');
//选中所有的p标签，但是class值为p的除外
varp=document.querySelectorAll('p:not(.p)');
for(vari=0;i<p.length;i++){
p[i].style.background='yellow';
}
但是，它们不支持CSS伪元素的选择器（比如:first-line和:first-letter）和伪类的选择器（比如:link和:visited），即无法选中伪元素和伪类。
1.4 案例
为选中的的元素绑定事件
<body>
<inputtype="button"value="按钮"id="btn"/>
<script>
//根据id获取元素
document.getElementById("btn").onclick=function () {
alert("清风陪你");
};
</script>
</body>
点击按钮显示一个图片
<body>
<inputtype="button"value="显示图片"id="btn"/>
<imgsrc=""alt="清风"id="im"width="300"height="400"/>
<script>
//根据id获取按钮,注册点击事件,添加事件处理函数
document.getElementById("btn").onclick=function () {
//根据id获取图片标签,设置src属性即可
varimgObj=document.getElementById("im");
//设置路径src属性
imgObj.src="images/liuyan.jpg";
};
</script>
</body>
案例点击按钮修改p标签内容
<body>
<inputtype="button"value="设置p的内容"id="btn"/>
<pid="p1">这是一个p</p>
<script>
//点击按钮,设置p的内容
//根据id获取按钮,注册点击事件,添加事件处理函数
document.getElementById("btn").onclick=function () {
//var pObj =document.getElementById("p1");
document.getElementById("p1").innerText="今天天气不错啊";
};
</script>
</body>
点击按钮设置a标签的地址和热点文字
<inputtype="button"value="显示效果"id="btn"/>
<ahref="http://www.baidu.com"id="ak">百度</a>
<script>
//案例:点击按钮修改a的地址和热点文字
//根据id获取按钮,注册点击事件,添加事件处理函数
document.getElementById("btn").onclick=function () {
varaObj=document.getElementById("ak");
aObj.href="https://blog.csdn.net/Spirit_Breeze";
aObj.innerText="晟世清风";
};
</script>
</body>
点击按钮设置所有的p的内容
<body>
<inputtype="button"value="改变内容"id="btn"/>
<p>技术</p>
<p>想法</p>
<p>思维</p>
<p>逻辑</p>
<p>成功</p>
<script>
//document.getElementsByTagName("标签的名字");
//点击按钮,修改所有的p的内容
//根据id获取按钮,注册点击事件,添加事件处理函数
document.getElementById("btn").onclick=function () {
//获取所有的p标签---根据标签名字来获取---伪数组
varpObjs=document.getElementsByTagName("p");
//循环遍历这个伪数组
for (vari=0; i<pObjs.length; i++) {
pObjs[i].innerText="我们都是努力的人";
}
};
</script>
</body>
点击按钮修改图片的alt和title
<body>
<inputtype="button"value="显示效果"id="btn"/>
<imgid="im"src="images/qqqqqq.jpg"alt=""title=""/>
<script>
//点击按钮,修改图片的宽和高,alt和title属性值
//根据id获取按钮,注册点击事件,添加事件处理函数
document.getElementById("btn").onclick=function () {
//根据id获取图片标签
varimgObj=document.getElementById("im");
//设置属性
imgObj.width="500";
imgObj.height="600";
imgObj.alt="qq";
imgObj.title="ww";
};
</script>
</body>
点击按钮修改按钮的值
<body>
<inputtype="button"value="按钮"id="btn"/>
<script>
//案例:点击按钮修改按钮的value属性值
//根据id获取按钮,注册点击事件,添加事件处理函数
// document.getElementById("btn").οnclick=function () {
// document.getElementById("btn").value="改变吧";
// };
//在某个元素的自己的事件中,this就是当前的这个元素
document.getElementById("btn").onclick=function () {
//当前对象
this.value="改变吧";
};
</script>
</body>
点击每个图片弹出对话框
<body>
<imgsrc="images/1-small.jpg"alt=""/>
<imgsrc="images/2-small.jpg"alt=""/>
<imgsrc="images/3-small.jpg"alt=""/>
<script>
//点击每个图片都可以弹出对话框
//根据标签名字获取元素,分别注册点击事件,分别添加事件处理函数
varimgObjs=document.getElementsByTagName("img");
//遍历
for(vari=0;i<imgObjs.length;i++){
//为每个图片元素注册点击事件,添加事件处理函数
imgObjs[i].onclick=function () {
alert("今天天气真好");
};
}
</script>
</body>
点击图片修改自身的宽和高
<body>
<imgsrc="images/boduo.jpg"alt=""id="im"/>
<script>
//点击图片,修改自身的宽和高
//根据id获取图片,注册点击事件,添加事件处理函数
document.getElementById("im").onclick=function () {
this.width="300";
this.height="400";
};
</script>
</body>
点击按钮修改所有的文本框的值
<body>
<inputtype="button"value="显示效果"id="btn"/><br/>
<inputtype="text"value=""/><br/>
<inputtype="text"value=""/><br/>
<inputtype="text"value=""/><br/>
<inputtype="text"value=""/><br/>
<inputtype="text"value=""/><br/>
<script>
//根据id获取按钮,注册点击事件,添加事件处理函数
document.getElementById("btn").onclick=function () {
//根据标签名字获取文本框,所有的input标签
varinputs=document.getElementsByTagName("input");
for(vari=0;i<inputs.length;i++){
//判断当前input是不是文本框
if(inputs[i].type=="text"){
inputs[i].value="我是文本框";
}
}
};
</script>
排他功能
<body>
<inputtype="button"value="没怀孕"/>
<inputtype="button"value="没怀孕"/>
<inputtype="button"value="没怀孕"/>
<inputtype="button"value="没怀孕"/>
<inputtype="button"value="没怀孕"/>
<script>
//获取所有的按钮
varbtnObjs=document.getElementsByTagName("input");
//循环,为每个按钮注册点击事件,添加事件处理函数
for (vari=0; i<btnObjs.length; i++) {
//每个按钮注册点击事件
btnObjs[i].onclick=function () {
//把所有的按钮的value值还原
for (varj=0; j<btnObjs.length; j++) {
btnObjs[j].value="晴天";
}
//设置当前的这个按钮的value
this.value="阴天";
};
}
</script>
点击小图显示大图
<body>
<aid="ak"href="images/1.jpg"><imgsrc="images/1-small.jpg"alt=""id="im"></a>
<script>
//点击小图片,显示大图---修改了这个图片标签的src的属性值
//根据id获取小图,注册点击事件,添加事件处理函数
document.getElementById("im").onclick=function () {
//根据id获取超链接
varaObj=document.getElementById("ak");
this.src=aObj.href;
//阻止超链接的默认跳转事件
returnfalse;
};
</script>
点击按钮选中性别和兴趣
<body>
<inputtype="button"value="选择"id="btn"/>
<inputtype="radio"value="1"name="sex"/>男
<inputtype="radio"value="2"name="sex"id="rad1"/>女
<inputtype="radio"value="3"name="sex"/>保密
<br/>
<inputtype="button"value="选择兴趣"id="btn2"/>
<inputtype="checkbox"value="1"name="xingqu"/>吃饭
<inputtype="checkbox"value="2"name="xingqu"/>睡觉
<inputtype="checkbox"value="3"name="xingqu"id="ck1"/>打豆豆
<inputtype="checkbox"value="4"name="xingqu"/>打篮球
<inputtype="checkbox"value="5"name="xingqu"/>打足球
<inputtype="checkbox"value="6"name="xingqu"id="ck2"/>打铅球
<script>
//点击按钮选择性别
//如果一个标签的属性和值是一样的,并且只有一个值的,一般值可以省略,只写属性
//html代码中如果这个标签的这个属性和值是一样,并且只有一个的值(一般是选中的相关属性),在写js代码操作的时候,一般是true或者是false
// document.getElementById("btn").οnclick=function () {
// //获取单选
// document.getElementById("rad1").checked="checked";
// };
document.getElementById("btn2").onclick=function () {
document.getElementById("ck1").checked=true;
document.getElementById("ck2").checked=true;
};
</script>
阻止超链接默认跳转
<body>
<!--第1种写法-->
<ahref="http://www.baidu.com"onclick="alert('哈哈'); return false;">百度</a>
<!--第2种写法-->
<script>
functionf1() {
alert("嘎嘎");
returnfalse;
}
</script>
<ahref="http://www.baidu.com"onclick="returnf1();">百度</a>
<!--第3种写法-->
<ahref="http://www.baidu.com"id="ak">百度</a>
<script>
document.getElementById("ak").onclick=function () {
alert("哈哈");
returnfalse;
};
</script>
选择下拉菜单
<body>
<inputtype="button"value="选择"id="btn"/>
<selectname="s1"id="ss">
<optionvalue="1">北京</option>
<optionvalue="2">上海</option>
<optionvalue="3">重庆</option>
<optionvalue="4"id="op1">天津</option>
<optionvalue="5">首尔</option>
<optionvalue="6">东京</option>
</select>
<script>
//点击按钮设置天津被选中
document.getElementById("btn").onclick=function () {
document.getElementById("op1").selected=true;
};
</script>
<!--文本域-->
<textareaname="text"id="tt"cols="30"rows="10">
</textarea>
<inputtype="button"value="改变一下"id="btn2"/>
<script>
//根据id获取按钮,注册点击事件,添加事件处理函数
document.getElementById("btn2").onclick=function () {
document.getElementById("tt").value="qq";
//推荐使用innerText属性设置textarea的文本内容
//document.getElementById("tt").innerText="qq";
};
</script>
点击按钮设置div的宽和高及背景颜色
<head>
<metacharset="UTF-8">
<title>title</title>
<style>
div{
width: 100px;
height: 50px;
background-color: yellow;
}
</style>
</head>
<body>
<inputtype="button"value="显示效果"id="btn"/>
<divid="dv"></div>
<scriptsrc="common.js"></script>
<script>
//点击按钮,设置div的宽和高,及背景颜色
//根据id获取按钮,注册点击事件,添加事件处理函数
my$("btn").onclick=function () {
//获取div
vardvObj=my$("dv");
dvObj.style.width="300px";
dvObj.style.height="200px";
//css中的属性如果是多个单词连接的,在js代码DOM操作中多个单词中间的-干掉,后面单词的首字母变大写
dvObj.style.backgroundColor="pink";
};
</script>
点击按钮隐藏div
<style>
div{
width: 200px;
height: 100px;
background-color: orangered;
}
</style>
</head>
<body>
<inputtype="button"value="隐藏"id="btn"/>
<inputtype="button"value="显示"id="btn2"/>
<divid="dv"></div>
<scriptsrc="common.js"></script>
<script>
//点击按钮隐藏div
my$("btn").onclick=function () {
//获取div,隐藏
my$("dv").style.display="none";
};
my$("btn2").onclick=function () {
my$("dv").style.display="block";
};
</script>
网页开关灯效果实现
<style>
.cls {
background-color: black;
}
</style>
</head>
<body>
<inputtype="button"value="开/关灯"id="btn"/>
<script>
document.getElementById("btn").onclick=function () {
//document.body.className="cls";
//console.log(document.body.className);
//判断body标签是否应用了cls类样式,同时设置body标签的类样式
document.body.className=document.body.className=="cls"?"" : "cls";
};
</script>
点击按钮设置文本框的值改变
<inputtype="button"value="显示效果"id="btn"/>
<inputtype="text"value=""name="name1"/>
<inputtype="text"value=""name="name2"/>
<inputtype="text"value=""name="name1"/>
<inputtype="text"value=""name="name"/>
<scriptsrc="common.js"></script>
<script>
//点击按钮,设置name属性值为name1的文本框的值
//documment.getElementsByName("name属性的值");返回的是一个伪数组
document.getElementById("btn").onclick=function () {
//根据name属性值的方式来获取元素
varinputs=document.getElementsByName("name1");
for(vari=0;i<inputs.length;i++){
inputs[i].value="我们都是文本框";
}
};
</script>
点击按钮禁用文本框
<inputtype="button"value="禁用文本框"id="btn"/>
<inputtype="text"value=""id="txt"/>
<scriptsrc="common.js"></script>
<script>
//点击按钮禁用这个文本框
document.getElementById("btn").onclick=function () {
document.getElementById("txt").disabled=true;
};
</script>
点击按钮改变列表的背景颜色
<inputtype="button"value="改变颜色"id="btn"/>
<ulid="uu">
<li>qq</li>
<li>ww</li>
<li>ee</li>
<li>rr</li>
<li>tt</li>
<li>yy</li>
<li>uu</li>
</ul>
<scriptsrc="common.js"></script>
<script>
//获取按钮,注册点击事件,添加事件处理函数
document.getElementById("btn").onclick=function () {
document.getElementById("uu").style.backgroundColor="pink";
};
</script>
点击按钮列表隔行变色
<inputtype="button"value="隔行变色"id="btn"/>
<ulid="uu">
<li>qq</li>
<li>ww</li>
<li>ee</li>
<li>rr</li>
<li>tt</li>
<li>yy</li>
<li>uu</li>
<li>ii</li>
</ul>
<script>
//点击按钮,li隔行变色:奇红偶黄
//获取按钮,添加点击事件
document.getElementById("btn").onclick=function () {
//获取id为uu的ul中所有的li
varlist=getElementsByTagName("li");
//遍历
for (vari=0; i<list.length; i++) {
// if (i % 2 == 0) {
// list[i].style.backgroundColor= "red";
// } else {
// list[i].style.backgroundColor = "yellow";
// }
list[i].style.backgroundColor=i%2==0?"red" : "yellow";
}
};
</script>
https://developer.mozilla.org/zh-CN/docs/Web/Reference/API
4486
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
