DOM（一）：获取元素（查）、事件基础、操作元素（核心）

一、JavaScript概括，API和WebAPI

Js基础学习ECMAScript基础语法为后面作铺垫，Web APIs是Js的应用，大量使用Js基础语法做交互效果。

（1）API：

（2）Web API： 

（3）API与Web API总结 

二、DOM 

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

DOM主要是针对元素的操作：创建、增删改查、属性操作、事件操作。

DOM把下面这些东西都当作对象：

DOM树：

三、获取元素

（一）根据ID获取

注意： 

1.因为我们文档页面从上往下加载，所以先得有标签  所以我们script写到标签的下面。

2、返回的timer是一个元素对象

   <div id="time">2023-11-10</div>
    <script>
        //1.因为我们文档页面从上往下加载，所以先得有标签所以我们script写到标签的下面
        // 2.get获得 element 元素by 通过驼峰命名法
        //3.参数id是大小写敏感的字符串
        //4.返回的是一个元素对象
        var timer = document.getElementById('time');
        console.log(timer);//输出 <div id="time">2023-11-10</div>
        console.log(typeof timer);// 输出object
        console.dir(timer);//打印我们返回的元素对象，更好地查看里面的属性和方法

（二）根据标签名获取

使用 getElementsByTagName0方法可以返回带有指定标签名的对象的集合。

document.getElementsByTagName()

1、返回的是 获取过来元素对象的集合 以伪数组的形式存储的。

2、打印lis第一个li ： console.log(lis[0]);

        // 1、返回的是 获取过来元素对象的集合 以伪数组的形式存储的
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);//打印lis第一个li

 

3、如何依次打印里面的元素对象 我们可以采用遍历

// 2、如何依次打印里面的元素对象 我们可以采用遍历
        for ( var i = 0 ; i < lis.length ; i ++ ) {
            console.log(lis[i]);
        }

4、如果页面中只有一个li 返回的还是伪数组的形式

 

 5、如果页面中没有这个元素 返回的是空的伪数组的形式 

 

6、获取某个元素内部所有指定标签名的元素 element.getElementsByTagName('标签名'); 

要注意的是必须注明是哪一个父元素里面的元素对象，不能是父元素本身ol，不能是数组。

如果这样写，就会报错。

    <ul>
        <li>昨天李东了,好冷啊1</li>
        <li>昨天李东了,好冷啊2</li>
        <li>昨天李东了,好冷啊3</li>
        <li>昨天李东了,好冷啊4</li>
        <li>昨天李东了,好冷啊5</li>
    </ul>
    <ol>
        <li>好冷啊1</li>
        <li>好冷啊2</li>
        <li>好冷啊3</li>
        <li>好冷啊4</li>
        <li>好冷啊5</li>
    </ol>

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

但是换成父元素里面的具体一个元素对象就不会报错：

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

但是上面这种写法平常不用，我们可以换成这种：给ol加上id，document.getElementById

<ol id="ol">
        <li>好冷啊1</li>
        <li>好冷啊2</li>
        <li>好冷啊3</li>
        <li>好冷啊4</li>
        <li>好冷啊5</li>
    </ol>

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

 结果是一样的：

（三）通过HTML5新增的方法获取

1、document.getElementsByClassName根据类名获得某些元素集合

    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>

        // 1、document.getElementsByClassName根据类名获得某些元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);

2、document.querySelector 获取指定选择器的第一个元素对象

要注意的是：里面的选择器要加符号，比如.box ，#nav。

        // 2、document.querySelector 获取指定选择器的第一个元素对象
        var first = document.querySelector('.box');
        console.log(first);
        var firstnav = document.querySelector('#nav');
        console.log(firstnav);
        var li = document.querySelector('li');
        console.log(li);// 只打印第一个li

 3、querySelecterAll返回指定选择器的全部对象集合

        var boxs = document.querySelectorAll('.box');
        console.log(boxs);
        var lis = document.querySelectorAll('li');
        console.log(lis);

（四）特殊元素获取

1、获取body

2、获取html

四、事件基础 

1.事件三要素：事件源，事件类型，事件处理程序

1.事件源，事件出发的对象，我们要对谁操作？
2.事件类型，事件是如何出发的，是点击（onclick）？还是鼠标经过，还是键盘按下
3.事件处理程序，通过一个函数赋值，这个事件能实现什么功能

2、执行事件步骤

3、常见的鼠标事件

五、操作元素 （重要核心）

 1.修改元素内容

（1）innerText和innerHTML的区别：

innerHTML常用。 

innerText不识别html标签，但是innerHTML可以识别 

var ao = document.querySelector('div');
ao.innerText = '<strong>aoaoao</strong>嘻嘻嘻';
ao.innerHTML = '<strong>aoaoao</strong>嘻嘻嘻';

 

（2）修改元素内容

    <button>显示当前系统时间</button>
    <div>某个时间</div>
    <script>
        //当我们点击了按钮，
        //1.获取元素div里面的文字会发生变化
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        //2.注册事件
        btn.onclick = function () {
        div.innerText = getDate();
        }
        function getDate() { 
            var date = new Date();
            //我们写一个2019年5月1日星期三
            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、修改元素属性

元素.属性名 = ‘属性值’

点击按钮切换图片：

案例：根据不同时间，显示不同的图片和问候语

如果上午时间打开页面，显示上午好，显示上午的图片
如果下午时间打开页面，显示下午好，显示下午的图片
如果晚上时间打开页面，显示晚上好，显示晚上的图片

	<div>上午</div>
	<img src="./images/1.jpg" alt="">

	var time = document.querySelector('div');
	var img = document.querySelector('img');
	var date = new Date();
	var now = date.getHours();
	
	if (now >= 6 && now < 12) {
	    alert('上午好北鼻');
	    time.innerHTML = '上午';
	    img.src = './images/1.jpg';
	}
	else if (now >= 12 && now < 20) {
	    alert('下午好北鼻');
	    time.innerHTML = '下午';
	    img.src = './images/2.jpg';
	}
	else {
	    alert('晚上好北鼻');
	    time.innerHTML = '晚上';
	    img.src = './images/3.jpg';
	} 

3、修改表单属性

京东显示密码明文案例：

	.box {
	    position: relative;
	    margin: 100px auto;
	    width: 500px;
	    border-bottom: 1px solid #ccc;
	}
	
	.box input {
	    width: 400px;
	    height: 40px;
	    outline: none;
	    border: 0;
	}
	
	.box span {
	    display: block;
	    position: absolute;
	    top: 5px;
	    right: 10px;
	    width: 30px;
	    height: 30px;
	    background-color: pink;
	    border-radius: 15px;
	}

<div class="box" id="box">
    <label for="pwd"></label>
    <input type="password" name="" id="pwd">
    <span id="btn"></span>
</div>

<script>
    //获取元素
    var box = document.getElementById('box');
    var btn = document.getElementById('btn');
    var pwd = document.getElementById('pwd');
    var flag = 0;
    btn.onclick = function () {
        if (flag == 0) {
            pwd.type = 'text';
            flag = 1;
        } else {
            pwd.type = 'password';
            flag = 0;
        }
    }
</script>

4.修改CSS样式属性

（1）元素.style.属性名 = ‘属性值

1.第一步仍然是获取元素，然后element.style.属性名 = ‘修改后的’
2.这里this指向的是被调用者，也就是谁调用的事件
3.属性名都是驼峰命名法，这个要注意，容易出错
4.这些改变，都是放在了行内样式的style里（如下图），所以权重比较高，会优先执行，也就是说js里改样式权重比较高

比如：我们之前学的是鼠标经过变颜色，现在我们通过修改样式属性鼠标点击变颜色。

        // 1. 获取元素
        var div = document.querySelector('div');
        // 2.注册事件，处理程序
        div.onclick = function () {
            // div.style
            this.style.backgroundColor = 'blue';
        }

案例：点击×号关闭广告

思路：

   <style>
           * {
        box-sizing: border-box;
    }

    .box {
        position: relative;
        text-align: center;
        margin: 100px auto;
        width: 150px;
        height: 150px;
        border: 1px solid #ccc;
    }

    .close-btn {
        position: absolute;
        display: block;
        top: -1px;
        left: -20px;
        width: 20px;
        height: 20px;
        line-height: 20px;
        padding-left: 1px;
        border: 1px solid #ccc;
    }
    </style>

    <div class="box">
        <p>淘宝二维码</p>
        <img src="img/ewm.png" alt="">
        <i class="close-btn"> × </i>
    </div>
    <script>
        // 1.获取元素
        var btn = document.querySelector('.close-btn');
        var box = document.querySelector('.box');
        // 2.注册事件 程序处理
        btn.onclick = function () {
            // 注意这里不能用this 因为这里指向的是btn 我们要关掉的不是btn 而是box
            box.style.display = 'none';
        }
    </script>

（2）元素.className = '类名'

如果我们在一个事件中要同时更改多个样式，像上面那样写很麻烦，我们可以

var div = document.getElementById('div');
div.onclick = function () {
    this.className = 'change';
}

.change {
    width: 100px;
    color: black;
    font-size: 16px;
    background-color: red;
}

不过这里要注意，如果标签本来就有类名，那么这样写会把原类名直接覆盖，如果想保留原类名，要这么写：
this.className = ‘change 原类名’;
就是把原类名也添进去 。

5、案例

（1）.循环精灵图

思路：

前提是精灵图是竖着按照一定规律拍好的，x轴坐标为0，y轴按一定规律排列
这里写个大概的思路，这里要注意
变量要有，单位要有，负号要有，xy轴之间的空格也要有

 

（2）.密码框验证信息

实现一个密码框，输入密码长度不对的时候提示不对，颜色变红。输入密码长度正确时提示正确，颜色变绿。

 .box {
            padding-left: 20px;
            margin: 100px auto;
            width: 400px;
            height: 50px;
            border: 1px solid #ccc;
        }

        .check {
            display: inline-block;
            padding-left: 30px;
        }

        .wrong {
            color: red;
        }

        .correct {
            color: green;
        }

  <div class="box">
        <input type="password" class="pwd">
        <p class="check">请输入6~16位的密码</p>
    </div>

    <script>
        var pwd = document.querySelector('.pwd');
        var check = document.querySelector('.check');
        //出发离开焦点事件
        pwd.onblur = function () {
            //根据表单里内容的长度来判断 pwd.value.length
            var tag = pwd.value.length;
            if (tag < 6 || tag > 16) {
                check.className = 'check wrong';
                check.innerHTML = '你输入的密码长度不对！'
            } else {
                check.className = 'check correct';
                check.innerHTML = '密码格式正确'
            }
        }
    </script>

（3）显示隐藏文本框内容

思路;

    <style>
        input {
            color: #999;
        }
    </style>

    <input type="text" value="手机">
    <script>
    //1.获取元素
    var text = document.querySelector('input');
    //2.注册事件获得焦点事件
    text.onfocus =function(){
        // console.log（'得到了焦点'）；
        if (this.value ==='手机'){
            this.value ='';
            //获得焦点需要把文本框里面的文字颜色变黑
            this.style.color ='#333';
        }
        //3.注册事件失去焦点事件
        text.onblur = function(){
            // console.log（'失去了焦点'）;
            if (this.value === ''){
                this.value='手机';
            }
            //失去焦点需要把文本框里面的文字颜色变浅色
            this.style.color = '#999';
            }
        }
    </script>

 总结一下；