Web API
- 应用编程接口
- JavaScript组成
- ECAMAScript:js的语法规范;简称ES;
- DOM-document object model-文档对象模型-把整个页面看成一个对象;
- BOM - browser object model-浏览器对象模型:把浏览器看成一个对象;
DOM
-
在js里标body每个签被称为节点,也叫DOM节点
-
我们现在认知的节点包括:标签本身.标签上的属性(src id class style等) 标签内文本;
获取元素对象Byld
-
元素对象:DOM节点;
-
语法:**document.getElementById(‘btn’);**括号内传入元素的ID的字符串;
-
返回标签节点对象,也是页面上看到的节点;没有这个标签返回为null
document.body 返回:body这个DOM节点
注册事件 click
- 注册给谁:元素对象(DOM节点);
- 事件:作用:用于指定的dom节点交互动作,尤其是鼠标的点击,键盘输入回车等;本质是为浏览器里面触发-响应机制
- 方法名:onclick,用户去点击的时候,函数才会执行[!!!]
//用户点击一次,响应的代码就会执行一次
btn.onclick = function(){
alert(1);
}
DOM节点上的属性,标准属性 style
-
标准属性:标签内内置好的属性:src(img) id class style
-
btn.style 背后:DOM设置CSS组成属性的对象(返回CSS设置的行内的样式值);内嵌式返回空null
-
obj.width = ‘360px’;作用:可以通过js控制页面中已经存在的HTML节点样式
-
一般格式:btn.style.width = ‘400px’;
//需求:点击按钮,让页面背景色发生改变 //分析:1.谁?按钮 2. 谁发生什么行为? 用户点击按钮 3.行为之后发生了什么? 页面背景色发生改变; var btn = document.getElementById("btn"); var body = document.body; btn.onclick = function(){ btn.style.backgroundColor = ’red‘; }
//需求:body开关灯 两个按钮
//分析:获取开关灯按钮 注册点击事件 id.onclick =f() 点击之后函数内些属性
// 获取关灯按钮
var closeBtn = document.getElementById('close');
// 注册点击事件
closeBtn.onclick = function(){
// 修改背景颜色
document.body.style.backgroundColor = '#000';
};
梳理:DOM:onclick DOM.style
新知识:DOM节点:标准属性 value;有value属性的标签;
var btn = document.getElementById("btn");
//需求:一个按钮控制开关灯
//1.谁?
var btn = document.getElementById('btn');
var body = document.body;
//2.注册点击事件
btn.onclick = function(){
if (btn.value=="开灯"){
body.style.backgroundColor = "#fff";//背景色变白,本身按钮关灯
btn.value="关灯"
}else{
body.style.backgroundColor = "#000";//背景色变黑
btn.value="开灯"
}
事件 focus blur
- focus:聚焦;blur :模糊
- DOM事件.onfocus 作用:用户让input聚焦的时候,执行函数里面的代码
- 语法:
var ipt = document.getElementById('search');
//鼠标点击文本框聚焦时,打印1
ipt.onfocus = function (){console.log(1)}
//鼠标点击外面,int框没有光标,打印2
ipt.onblur = function (){console.log(2)}
//需求:有光标的时候,下面的图片显示;没有光标的时候,下面图片隐藏
//分析:1获取那些DOM节点:
var search = document.getElementById('search');
var list = document.getElementById('list');
//聚焦时显示:
search.onfocus = function(){
list.style.display = 'block';
};
//光标消失时消失:
search.onblur = function(){
list.style.display = 'none';
};
- 属性:DOM.className 作用:可以直接控制已有的类名
- 获取值:HTML DOM节点 行内class 属性的值;(字符串)
var div = document.getElementById("box");
div.className = div.className + "bg-red";
//需求:点集盒子添加类名
var btn = document.getElementById('btn');
//注册事件
//点击之后给box添加类名
遗留问题:1.类名点击一次 添加一次,一直点一直添加;
- 如果现有类名:aa bb cc 要删除一个 不好做
解决:属性 类样式对象-classList
- DOM元素属性值的一个对象
- DOM.classList 属性名 作用:直接方便的操作类名,解决上面2个问题;
//解决问题1
var box = document.getElementById("box")
//.add() 参数:新的类名(多个不同的类名,逗号隔开)
box.classList.add()
//如果这个东西多次执行添加相同的类名,,,进去的类名不会变多
- .remove() 参数 :指定的类名被删除(一个或多个)
//解决问题2
box.classList.remove('要删除的类名')
- .boggle() 参数:切换类名. 没有类名,加类名.有添加的类名,删除
box.classList.boggle('要添加的类名,有则删除')
//可以用做开关
- 建议:以后操作类名就用DOM.classList
ByTagName
-
document.getElementById() 参数TagName 标签名 字符串
-
返回:拥有这个标签名的伪数组,成员是DOM节点;
-
document.getElementByClassName(); 参数:ClassName 类名 字符串
-
返回:拥有类名名的伪数组,成员是DOM节点:
[!!!]onclick() 后面的函数 用户点击的时候才会调用 用户决定
引申: 工作:我们一般习惯,把一一对应的关系写在标签内;
自定义属性:开发人员,往标签上写任何我们想写的属性名:名字自己起,值自己设置;
<img src= "" abc = "">
约定:自定义属性 data-自己命名 = 值;
-
对标签来说,自定义属性没有任何影响,对我们的意义:一一对应
-
获取:DOM节点.dataset 返回是一个对象,对象上有刚才在定义的属性和值;DOM节点.dataset.abc 返回对象上abc 的属性值
-
意义:一般要标签btn和某个数据图片地址 形参一一对应关系,放在自定义属性里;
//获取Dom.dataset
btn.dataset.自定义名字(必须小写)
this
- this 关键字, 自身 在函数内部,谁调用就是谁
btn_3.onclick = function () {
// 点击之后做什么? 替换图片路径
img.src = this.dataset.dizhi;
console.log(this)//此时this代表btn_3
};
//全部拿到所有按钮
var btns = document.getElementByTagName("input");
var img = document.getElementById("img");
//2.给每一个注册事件 点击
for (var i = 0;i < btns.lenght)
checked 开关属性(标准属性)
- 开关属性: checked/selected/disabled ,这种只有两种状态的属性;
- 赋值:两个状态的值,布尔类型;
- 什么DOM节点时有这样的属性:
<input type="checkbox" name="check" class="ck" />
disabled //按钮禁用状态
checked//获取
var ck = document.getElementById('ck');
ck.checked = true;
ck.checked = false;
- 全选/全不选
//需求:点击全选或全不选,子项跟着动;
//步骤:1获取谁?
var all = document.getElementById("checkAll");
var cks = document.getElementClassName("ck");
//2.给谁注册什么事件
all.onclick = function(){
//3.点击之后,子项ck 跟着all状态 动起来,
//
var status = ckAll.checked;
for (var i = 0; i < cks.length; i++) {
cks[i].checked = status;
}
}
小结
-
获取页面HTML节点:DOM节点(对象:属性和方法的集合体)
- document.getElementById:一个,没有拿到就是null
- document.getElementTagName:伪数组;for
- document.getElementClassName
-
事件:对象上的一个方法
- 名称不是我们定的;JS内置定;
- 交互功能:[!!!]用户在触发事件,相当于在调用对象上的方法;DOM.onclick();
- inclick onfocus onblur
-
对象上的属性:
-
标准属性:
- style:值是对象,css样式的对象,行内样式;
- value:input 文本框类,
- className:值是类名字符串,新增(和原来的字符串形成拼接);删除(不好做)
- classList:值是对象,很多方法;
- add:新增类名(多个),解决className不好删除类名
- toggle:切换类名(一个)
-
自定义属性:
- 意义
- HTML格式 data-自定义属性名 = 属性值
- JS如何获取:DOM.dataset.自定义属性名;
-
-
案例:
-
图片:
- this:看函数属于谁,this就是那个谁;如果在函数内部,你要使用注册给哪个DOM节点.用this;
-
全选与反选:
-
1.获取全选all
-
2.给all注册点击事件;
-
3点击之后:
- 获取自己all状态;
- 给每一个子项都是all一样状态;
-
反选:
- 1.子项都要获取
- 2.每一个子项都要注册点击事件
- 3.点击之后
- 看子项兄弟们的状态,如果没有选中,all不能选;
- 如果三个兄弟全选中,all跟着选中;
-
-