810笔记（dom操作元素）

操作元素

javascript的DOM操作可以改变网页的内容、结构和样式。我们可以利用DOM操作元素来改变元素里面的内容、属性（这些操作都是通过元素对象的属性实现的）

1、改变元素内容（获取或设置）

element.innterText 从起始位置到终止位置的内容，但是去掉html标签，空格和换行也会去掉（操作普通盒子，如div标签里的内容。不能操作表单里的值，文本内容是通过value来修改的）

element.innerHTML 从起始位置到终止位置的全部内容，包括html标签，保留空格和换行（解析html标签）

    <button>显示系统时间</button>
    <div>某个时间</div>
    <script>
        //当我们点击按钮，div里面的文字会发生改变

        //1 获取元素
        var btn = document.querySelector('button')
        var oDiv = document.querySelector('div')
        btn.onclick = function () {
            oDiv.innerText = '2022-8-10'
            // oDiv.innerHTML='2022-8-10'

     /*        oDiv.innerText ="<a href='#'>超链接</a>"
            oDiv.innerHTML = "<a href='#'>超链接</a>" */

            //innerText 不识别html标签
            //innerHTML  识别html标签
        }
    </script>

2、常用的元素属性操作

src  href  id  alt  title

获取属性的值

元素对象.属性名

设置属性的值

元素对象.属性名=值

操作表单元素案例

    <button id="zs">张三</button>
    <button id="ls">李四</button>
    <img src="./20220810213133.png" alt="" title="张三">
    <script>
        //点击按钮 切换图片 更改img的src属性值 更改img的title属性
        //1 获取元素
        var zsBtn = document.getElementById('zs')
        var lsBtn = document.getElementById('ls')
        var imgEle = document.querySelector('img')

        //2 注册事件
        zsBtn.onclick = function () {
            imgEle.src = './20220810213133.png'
            imgEle.title = '张三'
        }
        lsBtn.onclick = function () {
            imgEle.src = './20220810213134.png'
            imgEle.title = '李四'
        }
    </script>

    <button>按钮</button>
    <input type="text" value="输入内容" />
    <script>
        //点击按钮，操作文本框的内容 控制禁用状态
        //1 获取元素
        var oBtn = document.querySelector('button')
        var oInput = document.querySelector('input')
        //2 注册事件
        oBtn.onclick = function () {
            //表单里面的值，文本内容通过value修改
            oInput.value = '我被点击了'
            //input的内容改变之后，btn按钮禁用，不能再点击
            oBtn.disabled = true
            // this.disabled=true   在这里this指向的是时间函数的调用者 oBtn
        }
    </script>

切换问题

    <div class="box">
        <img src="./img/close.png" alt="" id="eye">
        <input type="pwd" name="pwd" id="pwd">

        <script>
            //点击图片，密码显示隐藏，同时图片也跟着切换
            //1 获取元素
            var eyeEle = document.getElementById('eye')
            var pwdEle = document.getElementById('pwd')

            //定义一个变量 flag=0 / 1
            var flag = 0  //默认是密码框 close图片
            //2 注册事件
            eyeEle.onclick = function () {
                if (flag == 0) {
                    pwdEle.type = 'text'
                    eyeEle.src = './img/open.png'
                    flag = 1
                } else {
                    pwdEle.type = 'password'
                    eyeEle.src = './img/close.png'
                    flag = 0
                }
            }
        </script>

操作元素之修改样式属性

行内样式

element.style.样式属性  （采用驼峰命名法）
div.style.backgroundColor = 'red'

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

<body>
    <div></div>
    <script>
        //点击div更改背景颜色 更改宽度
        //1 获取元素
        var div = document.querySelector('div')
        //2 注册事件 处理程序
        div.onclick = function () {
            //修改样式属性 （行内样式style，类样式class）
            //div是事件函数的调用者，可以使用this，this指向的就是div
            //this.style里面的属性 采用驼峰命名法
            this.style.backgroundColor = 'red'
            this.style.width = '300px'
        }
    </script>
</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>
        //获取元素 所有的li 得到的是元素对象集合
        var lis = document.querySelectorAll('li')
        for (var i = 0; i < lis.length; i++) {
            //索引号 乘以44就是每个li的背景y坐标
            var index = i * 44
            lis[i].style.backgroundPosition = '0-' + index + 'px'
        }
    </script>

类样式

<head>
    <style>
        div {
            background-color: pink;
            width: 100px;
            height: 100px;
        }

        .change {
            font-size: 40px;
            background-color: red;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class="first">文本</div>
    <script>
        //使用element.style修改元素样式 写的比较多不好整理
        var oDiv = document.querySelector('div')
        oDiv.click = function () {
            this.style.backgroundColor = 'red'
            this.style.fontSize = '40px'
            this.style.marginTop = '100px'

            //可以通过修改元素的className更改元素的样式 适合样式多或者功能复杂的情况(必须先有一个新的样式才能用className切换)
            this.className = 'change'

            //我们想要保留原先的类名，可以使用多类名选择器.不保留的话之前的样式就无法生效了（变更的样式会覆盖）。
            this.className = 'change first'
        }
    </script>
</body>

密码验证问题

    <style>
        div {
            width: 600px;
            margin: 100px auto;
        }

        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url(./img/mess.png) no-repeat left center;
            padding-left: 20px;
        }

        .right {
            color: green;
            background-image: url(./img/right.png);
        }

        .err {
            color: red;
            background-image: url(./img/wrong.png);
        }
    </style>
</head>

<body>
    <div class="register">
        <input type="password" class="'ipt">
        <p class="message">请输入6~16位字符</p>
    </div>
    <script>
        /*         事件是失去焦点事件 onblur
                如果输入正确 就提示正确的信息 颜色为绿 小图标变化
                如果输入错误 就提示错误信息 颜色为红色 小图标变化 */

        //因为修改样式多，所以用类修改class
        //1 获取元素
        var ipt = document.querySelector('.ipt')
        var message = document.querySelector('.message')

        //2 注册事件 失去焦点
        ipt.onblur = function () {
            //判断文本框内容的长度（文本框的内容都是字符串） 
            if (this.value.length < 6 || this.value.length > 16) {
                message.innerText = '密码长度不符合'
                message.className = 'message err'
            } else {
                message.innerText = '密码正确'
                message.className = 'message right'
            }
        }
    </script>
 </body>