重拾JS-17-DOM（part1）

---

目标：解决以下问题：

• 说出什么是DOM

文档对象模型，是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准程序接口。

W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式。

DOM树：

• 文档：一个页面就是一个文档，DOM中使用document表示
• 元素：页面中的所有标签都是元素，DOM中使用element表示
• 节点：网页中所有的内容都是节点（标签，属性，文本，注释等），DOM中使用node表示
• DOM把以上内容都看作是对象

• 如何获取页面元素

1.getElementById获取元素

    <div id="time">2021-6-1</div>
    <script>
        //1.参数id是大小写敏感的字符串
        //2.返回的是一个元素对象
        var timer=document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        //打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(timer);
    </script>

2.根据标签名获取：getElementsByTagName（'标签名'）

还可以获取某个元素（父元素）内部所有指定标签名的子元素：element.getElementsByTagName('标签名')/父元素必须是单个对象，获取的时候不包括父元素自己

   <ul>
        <li>你是来干嘛的啊1</li>
        <li>你是来干嘛的啊2</li>
        <li>你是来干嘛的啊3</li>
        <li>你是来干嘛的啊4</li>
        <li>你是来干嘛的啊5</li>
    </ul>
    <ol id="ol">
        <li>你是猪吗</li>
        <li>你是猪吗</li>
        <li>你是猪吗</li>
    </ol>
    <script>
        //获取过来元素对象的集合，以伪数组的形式存储
        var lis=document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        
        var ol=document.getElementById('ol')
        console.log(ol.getElementsByTagName('li'));

3.H5新增

 //1.getElementsByClassName根据类名活的某些元素集合
        var boxs=document.getElementsByClassName('box');
        console.log(boxs);
        //2.querySelector 返回指定选择器的第一个元素对象
        var firstBox=document.querySelector('.box');
        console.log(firstBox);
        var nav=document.querySelector('#nav');
        console.log(nav);
        var li=document.querySelector('li');
        console.log(li);
        //3.querySelectorAll()返回指定选择器的所有元素对象的集合
        var allBox=document.querySelectorAll('.box');
        console.log(allBox);
        var lis=document.querySelectorAll('li');
        console.log(lis);

4.获取body元素和html元素

        //1.获取body元素
        var bodyEle=document.body;
        console.log(bodyEle);
        console.dir(bodyEle);
        //获取html元素
        var htmlEle=document.documentElement;
        console.log(htmlEle);
    </script>

 

• 如何给元素注册事件

事件是由三部分组成 事件源 事件类型 事件处理程序 也称为事件的三要素

    <button id="btn">唐伯虎</button>
    <script>
        //1.事件源
        var btn=document.getElementById('btn');
        //2.事件类型 如何触发
        //3.事件处理程序 通过一个函数赋值完成
        btn.onclick =function(){
            alert('点秋香');
        }
    </script>

 

• 如何操作DOM元素的属性

1.使用innerText

   <button>给文明以时间</button>
    <div>系统当前时间</div>
    <p>111</p>
    <script>
        //1.获取元素
        var btn=document.querySelector('button');
        var div=document.querySelector('div');
        //2.注册事件
        btn.onclick=function(){
            div.innerText=getDate();
        }
        function getDate(){
            var date=new Date();
            var year =date.getFullYear();
            var month=date.getMonth();
            var dates=date.getDate();
            var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
            var days=date.getDay();
            return '今天是'+year+'年'+month+'月'+dates+'日'+arr[days];
        }
        //不用点击直接展示时间
        var p=document.querySelector('p');
        p.innerText=getDate();
    </script>

innerText和innerHTML的区别

1.innerText不识别html标签 非标准 去除空格和换行

2.innerHTNL识别html标签 W3C标准 保留空格和换行

   <div></div>
    <p>
        我是文字
        <span>1234</span>
    </p>
    <script>
        //1.innerText不识别html标签 非标准 去除空格和换行
        var div = document.querySelector('div');
        div.innerHTMl = '<strong>现在是：</strong>2021';
        //2.两个属性都是可读写的  可以获取元素里面的内容
        var p = document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);
    </script>

 

• 操作元素

1.操作元素：修改元素属性

    <button id="tu1">图片1</button>
    <button id="tu2">图片2</button>
    <img src="images/backimg.jpg" alt="" title="小屁孩">
    <script>
        var tu1 = document.getElementById('tu1');
        var tu2 = document.getElementById('tu2');
        var img = document.querySelector('img');
        tu1.onclick = function() {
            img.src = 'images/backimg.jpg';
            img.title = '小屁孩';
        }
        tu2.onclick = function() {
            img.src = 'images/favicon.jpg';
            img.title = '男生';
        }
    </script>

操作元素案例：分时问候

   <div id="tu1">上午好，加油学习吧</div>
    <img src="images/backimg.jpg" alt="" title="小屁孩">
    <script>
        var tu1 = document.getElementById('tu1');
        var img = document.querySelector('img');
        var date = new Date();
        var h = date.getHours();
        if (h < 12) {
            img.src = "images/backing.jpg"
            tu1.innerHTML = "上午好,好好学习吧"
        } else {
            img.src = "images/favicon.jpg";
            tu1.innerHTML = "下午好,今天也要努力生活哦"
        }
    </script>
​

2.操作元素：修改表单属性

    <button>按钮</button>
    <input type="text" value="请输入内容">
    <script>
        //获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        //注册事件，处理程序
        btn.onclick = function() {
            //表单里面的值，通过value来修改
            input.value = "点击我就变";
            //想要按钮点击之后被禁用，可以用disable
            //this指向事件函数的调用者
            this.disabled = true;
        }
    </script>

仿京东显示隐藏密码明文案例

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }
        
        .box input {
            width: 370px;
            height: 30px;
            border: 0px;
            outline: none;
        }
        
        .box img {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 24px;
        }
    </style>
</head>

<body>
    <div class="box">
        <label for="">
            <img src="images/close.png" alt="" id="eye">
        </label>
        <input type="password" id="pwd">
    </div>
        <script>
            //获取元素
            var eye = document.getElementById('eye');
            var pwd = document.getElementById('pwd');
            //注册事件  处理程序
            var flag = 0;
            eye.onclick = function() {
                if (flag == 0) {
                    pwd.type = 'text';
                    eye.src = "images/open.png";
                    flag = 1;
                } else {
                    pwd.type = 'password';
                    eye.src = "images/close.png";
                    flag = 0;
                }
            }
        </script>
    
</body>

3.操作元素：修改样式属性

JS里面的样式采用驼峰命名法 比如fontSize,backgroundColor

JS修改style样式操作，产生的是行内样式，css权重比较高

1.通过element.style来修改样式属性（样式比较少，功能比较简单的时候使用）

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        div.onclick = function() {
            this.style.backgroundColor = "green";
            this.style.width = "250px";
        }
    </script>
    </div>
</body>

仿淘宝关闭二维码案例：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 74px;
            height: 88px;
            border: 1px solid #ccc;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            color: #f40;
            /* display: block; */
        }
        
        .box img {
            width: 60px;
            margin-top: 5px;
        }
        
        .close-btn {
            position: absolute;
            top: -1px;
            left: -16px;
            width: 14px;
            height: 14px;
            border: 1px solid #ccc;
            line-height: 14px;
            font-family: Arial, Helvetica, sans-serif;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        淘宝二维码
        <img src="images/tao.png" alt="">
        <i class="close-btn">×</i>
    </div>
    <script>
        var box = document.querySelector('.box');
        var closes = document.querySelector('.close-btn');
        closes.onclick = function() {
            box.style.display = 'none';
        }
    </script>
    </div>
</body>

循环精灵图案例：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        .box {
            width: 250px;
            margin: 100px auto;
        }
        
        .box li {
            float: left;
            width: 24px;
            height: 24px;
            background-color: pink;
            margin: 15px;
            background: url(images/sprite.png) no-repeat;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            var index = i * 44;
            lis[i].style.backgroundPosition = '0 -' + index + 'px';
        }
    </script>
    </div>
</body>

显示隐藏文本框案例：

  <input type="text" value="手机">
    <script>
        var input = document.querySelector('input');
        input.onfocus = function() {
            if (this.value == '手机') {
                this.value = '';
            }
            this.style.color = '#333';
        }
        input.onblur = function() {
            if (this.value == '') {
                this.value = '手机'
            }
            this.style.color = '#999'
        }
    </script>

2.使用className来修改样式属性

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            color: #fff;
            background-color: pink;
        }
        
        .change {
            width: 200px;
            height: 250px;
            margin-top: 50px;
            color: red;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="first">团结</div>
    <script>
        var div = document.querySelector('div');
        div.onclick = function() {
            // div.className = 'change';
            //如果想要保留原来的类名，可以这么做
            div.className = 'change first'
        }
    </script>
</body>

密码框验证信息案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 600px;
            margin: 100px auto;
        }
        
        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url(images/mess.png) no-repeat left center;
            padding-left: 20px;
        }
        
        .wrong {
            color: red;
            background-image: url(images/wrong.png);
        }
        
        .right {
            color: green;
            background-image: url(images/right.png);
        }
    </style>
</head>

<body>
    <div class="register">
        <input type="password" class="ipt" value="">
        <p class="message">输入6~16位数的密码</p>
    </div>
    <script>
        var ipt = document.querySelector('.ipt');
        var message = document.querySelector('.message');

        ipt.onblur = function() {
            if (ipt.value.length < 6 || ipt.value.length > 16) {
                message.className = 'message wrong'
                message.innerHTML = '输入错误，请重新输入符合要求的密码';
            } else {
                message.className = 'message right';
                message.innerHTML = '输入正确';
            }
        }
    </script>
</body>

</html>