Web API学习笔记(一)各种获取文档对象的方法/注册事件(代码多注释)

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.类名点击一次 添加一次,一直点一直添加;

2. 如果现有类名: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跟着选中;