DOM学习笔记（pink）

什么是API？

​ 官方定义：一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。（联想到黑盒测试会用就行，不必纠结内部如何实现）

​ 简单理解：是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。

​ 举个例子：我们要实现充电这个功能：我们不关心手机内部变压器，内部怎么储存电，我们只知道拿着充电线插进充电接口就可以充电，这个充电接口就是一个API

什么是Web API?

Web API 是浏览器提供的一套操作 浏览器功能 和 页面元素 的API（BOM和DOM）

主要是针对浏览器提供的接口，主要针对于浏览器做交互效果

一般都有输入和输出（函数的传参和返回值），Web API 很多都是方法（函数）

DOM

1 DOM简介

1.1 什么是DOM

DOM就是一个接口，处理页面（HTML/XML），通过DOM接口可以改变页面的内容、结构和样式

1.2 DOM 树

​ 我们获取过来的DOM元素是一个对象（Object），所以称为文档对象模型。
​ 关于dom操作，我们主要针对于元素的操作。主要有创建，增，删，改，查、属性操作、事件操作。

2、获取页面元素

2.1 通过ID获取

document.getElementById()

        // 1、get 获取 element 元素 通过 id （驼峰命名法）
        // 2、参数 id 是大小写敏感的字符串
        // 3、返回的是一个元素对象
        timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);//object
        console.dir(timer)//console.dir 打印我们返回的元素对象

2.2 通过标签名获取

document.getElementsByTagName()

<ol>
    <li>sassss</li>
</ol>

var lis = document.getElementsByTagName('li');
console.log(lis[0]);
/*1、返回的是 获取过来元素对象的集合 以伪数组的形式存储;
 *2、即使只有一个li，返回的还是伪数组的形式；
 *3、如果一个li也没有，返回的是空的伪数组；
 *4、我们想要依次打印里面的元素对象，我们可以采取遍历的方式*/
for(var i=0;i<lis.length;i++){
   
	console.log(lis[i]);
}

如果页面上除了ol还有ul，只想要想要ol里面的li该怎么办呢?此时不能直接使用标签名获取

<ol>
    <li>sassss</li>
</ol>
<ul>
    <li>sassss</li>
</ul>

方法一：element.getElementsByTagName(‘标签名’);

var ol=document.getElementsByName('ol'));//[ol]
console.log(ol[0].getElementsByTagName('li'));

注意：伪数组形式不能作为父元素（获取的ol是为数组形式），父元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己只能获取子元素（ol[0]是指ol第一个元素）

方法二：给ol指定id

<ol id="ol">
    <li>sassss</li>
</ol>
<ul>
    <li>sassss</li>
</ul>

var ol = document.getElementById('ol');
console.log(ol.getElementsByTagName());

可以先对父元素，指定一个ID，然后var ol = document.getElementById(‘ol’);
然后再用ol.getElementsByTagName(‘li’);

通过HTML5新增的方法获取

2.3 通过类名获取

getElementsByClassName(‘类名’)；

//根据类名返回元素对象集合

var boxs=document.getElementsByClassName('box')；

2.4 返回指定选择器的第一个元素对象

document.querySelector(‘选择器’)；

//根据指定选择器返回第一个元素对象，不用再区分ID,类,…了
//里面的选择器需要加符号.#等等
var boxs = document.querySelector('.box');//类选择器
console.log(boxs);
var nav = document.querySelector('#nav');//ID选择器
console.log(nav);
var li = document.querySelector('li');//标签选择器
console.log(li);

2.5 返回指定选择器的所有元素对象

document.querySelectorAll(‘选择器’)；

//根据指定选择器返回所有的元素 
var allBox=document.querySelectorAll('.box')；
console.log(allbox);
var lis = document.querySelectorAll('li')；
console.log(lis);

2.6 获取特殊元素

1.获取body元素

document.body

var bodyEle=document.body
console.log(bodyEle);

2.获取Html元素
document.documentElement

var htmlEle=document.documentElement;

3.事件基础

3.1 事件概述：

js使我们有能力创建动态页面，而事件是js侦测到的行为

简单理解：触发-响应机制

<button id='btn'>唐伯虎</button>

var btn = document.getElementById('btn');事件源
btn.onclick = function(){
   
    alert('点秋香')；
}

3.2 事件三要素：

事件源 ：事件被触发的对象 谁?按钮
事件类型 如何触发，什么事件，比如鼠标点击，还是鼠标经过
事件处理程序：做一件事情，通过一个函数赋值的方式完成

3.3 执行事件的步骤：

获取事件源
注册事件（绑定事件）
添加事件处理程序（采用函数赋值的形式）

4 .操作元素

JS的DOM操作可以改变网页内容，结构和样式，我们可以利用Dom操作元素来改变里面的内容和属性，注意以下都是属性。

1.修改元素内容

element.innerText——非标准 (从起始位置到终止位置的内容，但它去除html标签（不识别html标签，非标准，会直接去除空格和换行)

element.innerHTML——W3C推荐 (从起始位置到终止位置的内容，但它包括html标签，同时保留空格和换行)

	<button>显示当前时间</button>
    <div>某个时间</div>
	<p>1232</p>

    //当我们点击了按钮，div里面文字发生改变
    // 1.获取元素
    var btn = document.querySelector('button')
    var div = document.querySelector('div')
    //我们元素可以不用添加事件
	var p = document.querySelector('p');
	p.innerHTML = getDate();

    //2.注册事件
    btn.onclick = function(){
   
        div.innerHTML = getDate();
    }
	function getDate(){
   
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var dates = date.getDate();
        var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        var day = date.getDay();
        return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];
    }
	

2.修改元素的属性

		//1.获取元素
        var pig = document.getElementById('pig');
        var dog = document.getElementById('dog');
        var img = document.querySelector('img');
        //2.注册事件
        dog.onclick = function () {
   
            img.src = "../images/dog.jpg";
        }
        pig.onclick = function () {
   
            img.src = "../images/pig.jpg";
        }

案例：分时问候案例

	<img src="./1.jpg" style="width: 100px;height: 100px;">
    <p>早上好</p>

        //获取元素
        var img = document.querySelector('img');
        var p = document.querySelector('p');
        //得到当前的时间
        var nowTime = new Date();
        var h = nowTime.getHours();
        // console.log(h)
        if (h < 12) {
   
            img.src = "./1.jpg";
            p.innerHTML = '早上好'
        } else if (h < 18) {
   
            img.src = "./2.jpg";
            p.innerHTML = '下午好'
        }

3.表单元素的元素操作

利用DOM可以操作如下表单元素的属性：
type, value, checked, selected, disabled

        <button>按钮</button>
        <input type="text" value="输入内容">

		//1、获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        //2、注册事件 处理程序
        btn.onclick = function () {
   、
        	//表单里面的值是通过 value 来修改的
            input.value = '点击了';
 			//如果想要某个表单被禁用 不能再点击 disabled
            // btn.disabled = true;
            this.disabled=true;
			//this指向的是事件函数的调用者 btn调用，this指向btn；
        }

案例分析：仿京东显示密码案例

1、核心思路：点击眼睛按钮，把密码框改为文本框就可以看见里面的密码
2、一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框
3、算法：利用一个flag变量，来判断flag的值，如果是1就切换为文本框，flag设置为0，如果是0就切换为密码框，flag设置为1。

<style>
        .box {
     
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }
		.box input {
     
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
 
    } 
        .box img {
     
            position: absolute;
            top: 10px;
            right: 30px;
            width: 24px;
        }
</style>

<div class="box">
        <label for="">
            <img src="