js篇--学习web-api第一天（DOM的学习）

Web API

1.API的概念
API(Application Programing Interface,应用程序编程接口)是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
任何开发语言都有自己的API
API的特征输入和输出（I/O）
API的使用方法（console.log()）
2.Web API的概念
浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
此处的Web API特指浏览器提供的API（一组方法），Web API在后面的课程中其他含义

3.掌握常见的浏览器提供的API的调用方式
MDN-Web API
4.JavaScript的组成

4-1.ECMAScript - JavaScript的核心

定义了javascript的语法规范

JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关

4-2.BOM - 浏览器对象模型

一套操作浏览器功能的API

通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

4-3. DOM - 文档对象模型

一套操作页面元素的API

DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

DOM

1.DOM的概念

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

文档：把一个html文件看成是一个文档，由于万物皆对象，所以把这个文档看成是一个对象
xml文件也可以看成是一个文档HTML:展示信息，展示数据的XML侧重于存储数据html文件看成是一个文档，那么这个文档看成是一个对象，文档中的所有的标签都可以看成是一个对象页面中的每个标签，都是一个元素（element），每个元素都可以看成是一个对象html页面中都有一个根标签--html--也叫根元素页面中的有一个根元素(标签--html),里面有很多的元素(有很多的标签,有很多的对象)文档:一个页面就是一个文档元素(element):页面中的所有的标签都是元素,元素可以看成是对象节点(node):页面中所有的内容都是节点:标签,属性,文本root:根页面就是文档--document,文档中有根元素:htmlhtml--->head------>body--->其他的标签由文档及文档中的所有的元素(标签)组成的一个树形结构图,叫树状图(DOM树)

2.DOM经常进行的操作
-获取元素
-动态创建元素
-对元素进行操作（设置其属性或调用其方法）
-事件（什么时候做相应的操作）
3.案例
1.点击按钮弹出对话框

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script>/***  点击操作:------>事件:就是一件事,有触发和响应,事件源*按钮被点击,弹出对话框*按钮---->事件源*点击---->事件名字*被点了--->触发了*弹框了--->响应*/</script>
</head>
<body><!--第一个版本-->
<!--html代码,点击按钮弹出对话框,对话框:alert()====>js的代码-->
<!--html代码中嵌入了js的代码,不方便后期的修改和维护-->
<input type="button" value="显示效果" onclick="alert('我被点了')" /><!--第二个版本: js代码很多,但是没有分离html和js该怎么做-->
<script>function f1() {//函数中可以写很多的代码alert("这是一个对话框");}
</script>
<input type="button" value="显示效果" onclick="f1()" /><!--开始分离html和js-->
<input type="button" value="开始分离代码" id="btn" />
<script>function f2() {alert("开发分离html和js代码");}function f3() {alert("嘎嘎");}//html标签中的id属性中存储的值是唯一的,//id属性就像人的身份证号码一样,不能重复,页面中的唯一的标识//从文档中找到id值为btn的这个标签(元素)//document.getElementById("id属性的值");======>返回的是一个元素对象//根据id获取这个标签(元素)var btnObj=document.getElementById("btn");//为按钮注册点击事件btnObj.onclick=f2;//不加括号
</script><!--最终的版本代码:-->
<input type="button" value="显示效果" id="btn1"/><script>//根据id属性的值从整个文档中获取这个元素(标签)var btnObj1=document.getElementById("btn1");//为当前的这个按钮元素(对象),注册点击事件,添加事件处理函数(匿名函数)btnObj1.onclick=function (){//响应做的事情alert("哈哈，我又变帅了");};
</script>
</body>
</html>

2.点击按钮显示图片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title></head>
<body>
<input type="button" value="显示图片" id="btn"/>
<img src="" alt="" id="im" />
<script>//点击按钮显示图片:点击按钮的时候设置img标签的src属性有一个图片的路径//根据id获取按钮,var btnObj=document.getElementById("btn");//为按钮注册点击事件,添加事件处理函数btnObj.onclick=function () {//根据id获取图片的标签,设置图片的src属性值var imObj=document.getElementById("im");imObj.src="data:images/liuyan.jpg";//设置图片的大小imObj.width="300";imObj.height="400";};</script>
</body>
</html>

3.点击按钮，修改p标签的显示内容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title></head>
<body>
<input type="button" value="设置p的内容" id="btn"/>
<p id="p1">我是一个p标签</p>
<script//凡是成对的标签,中间的文本内容,设置的时候,都使用innerText这个属性的方式//根据id获取按钮,为按钮注册点击事件,添加事件处理函数document.getElementById("btn").onclick=function () {//根据id获取p标签,设置内容document.getElementById("p1").innerText="这是一个p";};</script></body>
</html>

4.点击按钮修改a标签的地址和热点文字

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title></head>
<body>
<input type="button" value="显示效果" id="btn"/>
<a id="ak" href="https://www.jiumodiary.com/">鸠摩搜书</a>
<script>//根据id获取按钮,注册点击事件,添加事件处理函数//  document.getElementById("btn").onclick = function () {//    //根据id获取超链接,设置href属性//    document.getElementById("ak").href = "http://www.itcast.cn";//    //根据id获取超链接,设置文字内容//    document.getElementById("ak").innerText = "传智播客";//  };//优化后的:document.getElementById("btn").onclick = function () {//根据id获取超链接,设置href属性var aObj = document.getElementById("ak");aObj.href = "http://www.itcast.cn";//根据id获取超链接,设置文字内容aObj.innerText = "传智播客";};</script></body>
</html>

5.点击按钮，修改多个p标签的文字内容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title></head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv1"><p>哈哈,我又变帅了</p><p>哈哈,我又变帅了</p><p>哈哈,我又变帅了</p><p>哈哈,我又变帅了</p><p>哈哈,我又变帅了</p>
</div><div id="dv2"><p>嘎嘎</p><p>嘎嘎</p><p>嘎嘎</p><p>嘎嘎</p>
</div>
<script>//document.getElementsByTagName("标签的名字");返回的是一个伪数组,//无论获取的是一个标签,还是多个标签,最终都是在数组中存储的,这行代码的返回值就是一个数组//案例:点击按钮设置多个p标签的文字内容//根据id获取按钮,注册点击事件,添加事件处理函数document.getElementById("btn").onclick=function () {//根据标签名字获取标签var pObjs= document.getElementsByTagName("p");//var pObjs=document.getElementById("dv1").getElementsByTagName("p");//循环遍历这个数组for(var i=0;i<pObjs.length;i++){//每个p标签,设置文字pObjs[i].innerText="我们都是p";}};</script></body>
</html>

6.点击按钮，修改图片的alt和title属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title></head>
<body>
<input type="button" value="显示效果" id="btn"/>
<img src="data:images/cangjingkong.jpg" alt="哈哈" title="嘎嘎"/>
<script>document.getElementById("btn").onclick = function () {//返回的是一个伪数组var imgObjs = document.getElementsByTagName("img");imgObjs[0].alt = "改了";imgObjs[0].title = "现实吧";};
</script>
</body>
</html>

7.点击按钮，修改所有文本框的值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title></head>
<body>
<input type="button" value="修改文本框的值" id="btn"/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<script>//根据id获取按钮,为按钮注册点击事件,添加事件处理函数document.getElementById("btn").onclick = function () {//获取所有的文本框var inputs = document.getElementsByTagName("input");for (var i = 0; i < inputs.length; i++) {//判断这个元素是不是按钮if (inputs[i].type != "button") {inputs[i].value = "其实,助教喜欢小苏";}}};
</script>
</body>
</html>

8.点击每个图片，弹出对话框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title><style>img{width: 200px;height: 150px;}</style>
</head>
<body>
<img src="data:images/1.jpg" alt="" id="im1" />
<img src="data:images/2.jpg" alt="" id="im2" />
<img src="data:images/3.jpg" alt="" id="im3" />
<script>
//  document.getElementById("im1").onclick=function () {
//    alert("被点了");
//  };
//  document.getElementById("im2").onclick=function () {
//    alert("被点了");
//  };
//  document.getElementById("im3").onclick=function () {
//    alert("被点了");
//  };//根据标签的名字获取图片标签,分别注册点击事件var imgObjs=document.getElementsByTagName("img");//循环遍历数组,获取每个图片标签,注册点击事件,添加事件处理函数for(var i=0;i<imgObjs.length;i++){imgObjs[i].onclick=function () {alert("被点击了");};}
</script>
</body>
</html>

9.点击按钮，修改按钮的value属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title></head>
<body>
<input type="button" value="按钮" id="btn"/>
<script>//在某个元素的事件中,自己的事件中的this就是当前的这个元素对象var btnObj = document.getElementById("btn");btnObj.onclick = function () {//修改按钮的value属性this.value="我是按钮,谁咬我,我就咬谁";this.type="text";this.id="btn2";};
</script></body>
</html>

10.点击图片，修改自身的宽和高

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title></head>
<body>
<img src="data:images/liuyan.jpg" alt="" id="im"/>
<script>//点击图片,修改自身的宽和高var imgObj = document.getElementById("im");imgObj.onclick = function () {this.width = "200";this.height = "300";};
</script></body>
</html>

11.排他功能

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title></head>
<body>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<input type="button" value="没怀孕"/>
<script>//获取所有的按钮,分别注册点击事件var btnObjs = document.getElementsByTagName("input");//循环遍历所有的按钮for (var i = 0; i < btnObjs.length; i++) {//为每个按钮都要注册点击事件btnObjs[i].onclick = function () {//把所有的按钮的value值设置为默认的值:没怀孕for (var j = 0; j < btnObjs.length; j++) {btnObjs[j].value = "没怀孕";}//当前被点击的按钮设置为:怀孕了this.value = "怀孕了";};}//console.log(i);//6//for循环是在页面加载的时候,执行完毕了
//  for(var k=0;k<5;k++){
//
//  }
//  console.log(k);////事件是在触发的时候,执行的
</script>
</body>
</html>

12.点击超链接，切换图片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title></head>
<body>
<a id="ak" href="images/1.jpg"><img src="data:images/1-small.jpg" alt="" id="im"></a>
<script>//点击图片标签,设置图片标签的src路径为超链接中大图的路径document.getElementById("im").onclick=function () {this.src=document.getElementById("ak").href;return false;};</script>
</body>
</html>

13.点击按钮，修改图片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title></head>
<body>
<input type="button" value="显示大图" id="btn"/>
<img src="data:images/1-small.jpg" alt="" id="im">
<script>function my$(id) {return document.getElementById(id);}my$("btn").onclick=function () {my$("im").src="data:images/1.jpg";};
</script></body>
</html>

14.点击按钮，修改性别和兴趣

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title></head>
<body>
<input type="button" value="修改性别" id="btn1"/>
<input type="radio" value="1" name="sex"/>男
<input type="radio" value="2" name="sex" id="rad1"/>女
<input type="radio" value="3" name="sex"/>保密
<script>function my$(id) {return document.getElementById(id);}//规律:在表单标签中,如果属性和值只有一个,并且值是这个属性本身,那么//那么,那么,在写js代码,DOM操作的时候,这个属性值,是布尔类型就可以了my$("btn1").onclick = function () {my$("rad1").checked = true;};
</script>
<br /><input type="button" value="选择兴趣" id="btn2"/>
<input type="checkbox" value="1" name="xingqu" />吃饭
<input type="checkbox" value="2" name="xingqu" />睡觉
<input type="checkbox" value="3" name="xingqu" id="ck1" />打豆豆
<input type="checkbox" value="4" name="xingqu" />打篮球
<input type="checkbox" value="5" name="xingqu" />打足球
<input type="checkbox" value="6" name="xingqu" id="ck2" />打铅球
<script>my$("btn2").onclick=function () {my$("ck1").checked=true;my$("ck2").checked=true;};
</script>
</body>
</html>

15.点击按钮，选择菜单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title></head>
<body>
<input type="button" value="点菜" id="btn"/>
<select name="" id="ss"><option value="1">油炸榴莲</option><option value="2">爆炒臭豆腐</option><option value="3">清蒸助教</option><option value="4" id="op1">凉拌班主任</option><option value="5">红烧小苏</option>
</select>
<script>function my$(id) {return document.getElementById(id);}my$("btn").onclick=function () {//点击按钮选择菜my$("op1").selected=true;};
</script><textarea name="" id="tt" cols="30" rows="10" readonly="readonly" >注册用户的协议:某人问智者,大师:您觉得怎么做才是最快乐的?回答说:不要和愚者辩论这个人说:我不这么认为!大师说:您说的对,我就是这么帅</textarea>
<input type="button" value="注册" id="btn2"/>
<script>//disabled=====>这个属性是禁用的,//html中属性和值是自己的,并且只有一个的,其实,可以只写这个属性,不用赋值my$("btn2").onclick=function () {my$("tt").value="嘎嘎";//推荐用value,因为看成了是表单的标签//my$("tt").innerText="哈哈";};
</script>
</body>
</html>

16.点击按钮，设置div的宽和高和背景颜色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title></head>
<body>
<input type="button" value="设置样式" id="btn"/>
<div id="dv"></div>
<script>function my$(id) {return document.getElementById(id);}//凡是css中这个属性是多个单词的写法,在js代码中DOM操作的时候.把-干掉,后面的单词的首字母大写即可//点击按钮,修改div的宽,高,背景颜色my$("btn").onclick = function () {my$("dv").style.width = "300px";my$("dv").style.height = "200px";my$("dv").style.backgroundColor = "pink";};
</script></body>
</html>

17.点击按钮，设置div隐藏

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title><style>div{width: 300px;height: 200px;background-color: darkmagenta;}</style>
</head>
<body>
<input type="button" value="隐藏" id="btn"/>
<input type="button" value="显示" id="btn2"/>
<div id="dv"></div>
<script>function my$(id) {return document.getElementById(id);}//根据id获取按钮,注册点击事件,添加事件处理函数my$("btn").onclick=function () {my$("dv").style.display="none";};my$("btn2").onclick=function () {my$("dv").style.display="block";};
</script>
</body>
</html>

18.点击按钮显示和隐藏div

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title><style>div{width: 300px;height: 200px;background-color: darkmagenta;}</style>
</head>
<body>
<input type="button" value="隐藏" id="btn"/>
<div id="dv"></div>
<script>function my$(id) {return document.getElementById(id);}//根据id获取按钮,注册点击事件,添加事件处理函数my$("btn").onclick=function () {//判断当前点击的按钮的value属性值if(this.value=="隐藏"){my$("dv").style.display="none";//隐藏this.value="显示";}else if(this.value=="显示"){my$("dv").style.display="block";//显示this.value="隐藏";}};
</script>
</body>
</html>

19.点击按钮，设置div的样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title><style>.cls {width: 300px;height: 200px;background-color: yellow;border: 2px solid red;}</style>
</head>
<body>
<input type="button" value="设置样式" id="btn"/>
<div id="dv"></div>
<script>function my$(id) {return document.getElementById(id);}//设置div的样式my$("btn").onclick = function () {
//    var dvObj = my$("dv");
//    dvObj.style.width = "300px";
//    dvObj.style.height = "300px";
//    dvObj.style.backgroundColor = "yellow";
//    dvObj.style.border = "10px solid red";//在js代码中DOM操作的时候,设置元素的类样式,不用class关键字,应该使用,classNamemy$("dv").className="cls";};
</script></body>
</html>

20.点击按钮显示和隐藏div

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title><style>div {width: 300px;height: 200px;background-color: yellow;border: 2px solid red;}.cls {display: none;}</style>
</head>
<body>
<input type="button" value="隐藏" id="btn"/>
<div id="dv"></div>
<script>function my$(id) {return document.getElementById(id);}//点击按钮,通过类样式的方式设置div的显示和隐藏my$("btn").onclick = function () {// console.log(my$("dv").className);//判断的是div是否应用了类样式if (my$("dv").className != "cls") {//现在是显示的,应该隐藏my$("dv").className = "cls";this.value = "显示";} else {//隐藏的状态----立刻显示my$("dv").className = "";this.value = "隐藏";}};
</script></body>
</html>

21.网页开关灯

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title><style>.cls {background-color: black;}</style>
</head>
<body id="bd">
<input type="button" value="开/关灯" id="btn"/>
<script>function my$(id) {return document.getElementById(id);}my$("btn").onclick = function () {//获取body标签document.body.className = document.body.className != "cls" ? "cls" : "";};
</script>
</body>
</html>

js篇--学习web-api第一天（DOM的学习）相关推荐

web api、获取DOM元素的方式、事件理解、click事件在移动端300ms延时、事件对象、事件委托、常见事件类型
web api: API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力 ...
Node.js 全网最详细教程 (第一章：Node学习入门必看教程)
1:Node的学前必知: 1: 在学习node之前,想必你应该学习过HTML,CSS,JavaScript 2: 浏览器中的JavaScript由两部分组成:JS核心语法和WebAPI JS核心语法 ...
js篇--学习web-api第二天（DOM的学习）
案例 1.点击按钮,禁用文本框 <input type="button" value="点击" id="btn"/> <i ...
轻松学习JavaScript二十七：DOM编程学习之事件模型
在介绍事件模型之前,我们先来看什么是事件和什么是event对象. 一事件介绍 JavaScript事件是由访问Web页面的用户引起的一系列操作,使我们有能力创建动态页面,事件是可以被 JavaScri ...
学习web前端的免费12个学习网站,等你来撩
我相信很多人刚喜欢web前端或者刚刚接触web前端的时候,都不愿意去花钱去培训或者买资料去学习,因为不知道自己会不会学好,或者只是一时脑热,所以就选择免费的去学习基础. 编程学习很多人包括一些企业家 ...
轻松学习JavaScript二十：DOM编程学习之获取节点
我们这里所说的获取节点包含元素节点,属性节点和文本节点.通常,通过DOM我们就能够操作HTML元素.为了做到这件事情,您必须首先找到该元素.W3C提供了比较方便简单的定位节点的方法和属性,以便我们快 ...
提升对前端的认知，不得不了解Web API的DOM和BOM
了解Web API的DOM和BOM 引言正文一.DOM操作 1.DOM的本质 2.DOM节点操作 (1)property形式 (2)attribute形式 3.DOM结构操作 (1)新增/插入节点 ...
JavaScript--JavaScript和web API、JS（提供案例）
本文来自pink老师前端学习视频,作为自己的学习笔记文章目录引言一.组成部分二.API和Web API 三.DOM 1. DOM简介 2. 获取元素 3. 事件四.操作元素 1. 改变元素内 ...
Dynamics 365 JS调WEB API 报missing privilege ae5c41f0-e823-4cb9-b25a-8ef020201973
JS中调用web api报missing privilege ae5c41f0-e823-4cb9-b25a-8ef020201973的权限问题,是你的调用请求头部加了"MSCRMCalle ...
【ASP.NET Core Web API 6.0 基础学习】
ASP.NET Core Web API 6.0 基础学习半夏创建Web Api 6.0教程返回时间格式化 Swagger注释和版本控制使用appsetting.json的数据 IOC注入,使用 ...

js篇--学习web-api第一天（DOM的学习）

Web API

DOM

js篇--学习web-api第一天（DOM的学习）相关推荐

最新文章

热门文章