DOM ☞ 操作元素

第三章 ：操作元素

JS的DOM操作可以改变网页内容、结构、样式，我们可以利用DOM操作元素来改变元素里面的内容，属性等。

---

---

前言

---

一、改变元素内容

• element.innerText 从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉
• element.innerHTML 起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

示例1

```javascript
<button>显示当前的时间</button>
    <div>某个时间</div>
    <p>666</p>
    <script>
        // 当我们点击了按钮， div里面的文字会发生变化
        //1.获取元素
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.onclick = function() {
            div.innerText=getDate();
        }
        function getDate() {
            var date = new Date();
            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];
        }
        //我们元素不需要添加事件
        var p = document.querySelector('p');
        p.innerText = getDate();

        //innerText 和innerHTML的区别
        //innerText 不识别HTML标签 非标准 去除空格和换行
        //innerHTML  识别HTML标签 非标准 保留空格和换行
        //这两个属性是可以读写的，可以获取元素里面的内容
    </script>

2.修改元素属性

<button id="xiyan"> 夕颜</button>
    <button id="love"> love</button> <br>
      <img src="images/1.jpg" alt="" title="夕颜">
    <script>
        var xiyan = document.getElementById('xiyan');
        var love = document.getElementById('love');
        var img = document.querySelector('img');
         love.onclick = function() {
             img.src = 'images/2.jpg' ;
        }
        xiyan.onclick = function() {
            img.src = 'images/1.jpg';
        }
    </script>

3.操作元素

案例-分时系统

<img src="images/1.jpg" alt="">
    <div>夕颜</div>
    <script>
        //根据系统不同时间来判断，是否需要用到日期内置对象
        //利用一个多分支语句来设置不同的图片
        //需要一个图片，根据时间来修改图片，需要用到src属性
        //需要一个div，显示不同的问候语，修改元素内容即可
          var img = document.querySelector('img');
          var div = document.querySelector('div');
          //二，得到，当前小时数
          var date = new Date();
          var h = date.getHours();
          //判断小时数来改变图片和文字信息
          if (h<12) {
            img.src = 'images/2.jpg'
            div.innerHTML = '好好学习，天天向上'
          }  else if (h<18) {
            img.src = 'images/1.jpg'
            div.innerHTML = '到了玩耍的时间'
          }  else {
            img.src = 'images/1,jpg';
            div.innerHTML = '该吃大餐了'
          }
          
    </script>

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

<button>按钮</button>
    <input type="text" value="输入的内容">
    <script>
        var btn = document.querySelector('button');
        var ipt = document.querySelector('input');
        //注册事件
        btn.onclick = function() {
            //表单里面的值  文字内容是通过value 来修改的
            ipt.value = '被点击了';
            //如果想要表单被禁用  不能在点击 disabled 我们想要这个按钮 button禁用
            this.disabled = true;  //true禁用

        }
    </script>

案例 ☞ 登录界面

• CSS设置

- <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: 6px;
            right: 10px;
            width: 20px;
        }
    </style>

• HTML和JS设置

<div class="box">
        <label for="">
            <img src="images/open.png" alt="" id="eye">
        </label>
        <input type="password" name=""  id="pwd">
    </div>
    <script>
        //核心思路：点击按钮，把密码框类型改为文本框类型就可以看见里面的密码
        //一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框
        //算法 ：利用一个flag变量，来判断flag的值，如果是1就切换为文本框，flag设置为0，如果是0就切换为密码框，flag设置为1.
        //获取元素  
        var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        //注册事件
        var flag=0;
        eye.onclick = function() {
            if (flag == 0) {
                pwd.type = 'text';
                flag=1; 
            } else {
                pwd.type='password';
                flag = 0;
            }
           
        }
    </script>

4.样式属性操作

可以通过JS修改元素的大小、颜色、位置等样式

• element.style 行内样式操作
• element.className 类名样式操作

点击div盒子可以改变背景颜色
❤CSS设置

<style>
          div {
            width: 200px;
            height: 200px;
            background-color: pink;
          }
    </style>

❤HTML和JS设置

<div>
        666
    </div>
    <script>
        //一获取元素
        var div = document.querySelector('div');
         div.onclick = function() {
            this.style.backgroundColor = 'purple';
            this.style.width = '250px'; //要跟单位px
        }
    </script>

案例：淘宝关闭二维码
当鼠标点击二维码关闭按钮时候，则关闭整个二维码

❤CSS设置

<style>
        * {
            margin:0;
            padding:0;
        }
        .box {
            position: relative;
            width: 160px;
            height: 160px;
            margin: 100px auto;
            border: 1px solid #ccc;
        }


        .btnn {
            position:absolute;
            top: -1px;
            right: 160px;
            width: 14px;
            height: 14px;
            border: 1px solid #ccc;
            line-height:14px;
            cursor:pointer;
        }
    </style>

❤HTML和JS设置

<div class="box">
        <img src="images/code.png" alt="">
        <i class="btnn">x</i>

    </div>
    <script>
        //核心思路：利用样式的显示和隐藏完成，display:none 隐藏元素  display:block显示元素
        //获取元素
        var btn = document.querySelector('i');
        var div = document.querySelector('div');
        //注册事件
        btn.onclick = function() {
            div.style.display = 'none';
        }

    </script>

---

总结

操作元素结束