我终于要学DOM了

Dn_wh

已于 2022-03-19 15:59:08 修改

阅读量848

点赞数

分类专栏： # js 文章标签： javascript 前端 html

于 2022-03-17 23:55:46 首次发布

本文链接：https://blog.csdn.net/m0_51045721/article/details/123553481

版权

js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

target

DOM是啥
获取页面元素
给元素注册事件
操作DOM 元素的属性
创建元素
操作DOM节点( 下一篇)

DOM

文档对象模型—就是一个接口，处理文档的接口

可以改变页面的内容、结构、样式等等

DOM树
文档：一个页面就是一个文档
元素：页面的所有标签都是元素
节点：网页中所有的内容都是节点（标签、属性、文本、注释等等）------------用node 表示

DOM把这些内容都当作对象

获取元素

ID 获取
标签名获取
HTML 5 新增的方法获取
特殊元素获取

-------ID获取

<!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>
</head>

<body>
    <div id="time">2022-2-2</div>
    <script>
        // 1. 因为我们的文档从上往下加载，所以先要有标签，所以 script 要写在 标签的下面
        // 2. 参数 id 是大小写敏感的一个元素对象
        // 3.返回的是一个 元素对象
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        // 4.console.dir 打印返回的元素对象，更好的查看里面的属性和方法
    </script>
</body>

</html>

在这里插入图片描述
----------标签名获取

getElementsByTagName('li')

获取得到是元素对象的集合，以伪数组的形式存储

<!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>
</head>

<body>
    <ul>
        <li>717</li>
        <li>717</li>
        <li>717</li>
        <li>717</li>
        <li>717</li>
        <li>717</li>
        <li>717</li>

        <script>
            // 返回的是 获取过来数组对象的集合，以伪数组的形式存储的
            var lis = document.getElementsByTagName('li')
            console.log(lis);
        </script>
    </ul>
</body>

</html>

在这里插入图片描述

想要依次打印里面的元素，采取遍历的方式
得到的元素对象是动态的，就是说，li 里面的内容换了的话，js是不需要换的

选择父元素里面的内容

如果有两个 li 的话—

要获取一个li
–两种方法①ol 选择其中的一个对象 ②给父元素指定标签名，通过id 来获取
可以获取某个元素（父元素）内部所有指定标签名的子元素
element 指的是父级元素

父元素必须是单个对象，获取的时候不包括父元素自己

element.getElementsByTagNamee('标签名');

<!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>
</head>

<body>
    <ul>
        <li>717.</li>
        <li>717..</li>
        <li>717...</li>
        <li>717.....</li>
        <li>717......</li>
        <li>717;;;</li>
        <li>717;;</li>
    </ul>
    <ol id='A'>
        <li>55555717.</li>
        <li>8888717..</li>
        <li>8888717...</li>
        <li>8888717.....</li>
        <li>8888717.8.....</li>
        <li>8888717;;;</li>
        <li>677865434717;;</li>

    </ol>
    <script>
        // 返回的是 获取过来数组对象的集合，以伪数组的形式存储的
        var lis = document.getElementsByTagName('li')
        console.log(lis);
        console.log(lis[0]);

        // 想要依次打印里面的元素对象，采用遍历的方式
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
        // 如果页面中只有一个 li ，返回的还是 伪数组 的形式
        // 如果页面中没有这个元素，还是会返回一个伪数组---空的伪数组


        //  此时，页面里有两个 li ，想要打印其中的元素需要这样操作
        // element.getElementsByTagName('标签名');  父元素必须是指定的单个元素 
        // 比如
        // var ol = =document.getElementsByTagName('ol);//[ol]   这是伪数组，不能当作父元素，父元素必须指明那个元素，所以可以任选一个对象，就是下面的代码
        // console.log(ol[0].getElementsByTagName('li));
        //指定 id 获取其中的 li
        var A = document.getElementById('ol')
        console.log(A.getElementsByTagName);
    </script>

</body>

</html>

在这里插入图片描述

要获取两个li 可以采用html 5 新增的方法、

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

通过html5 新增的方法获取

getElementsByClassName 根据类名获得某些元素的集合
querySelector 返回指定选择器的第一个元素对象，，切记里面的选择器需要加符号。选择器加 . ——–标签加#
querySelectorAll() 返回指定选择器的所有的元素对象集合

不考虑兼容性的话，querySelector 是一个最好的选择

div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id='nav'>
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>

    <script>
        // 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'); //这里是 id 标签，所有前面应该是 #
        console.log(nav);

        var li = document.querySelector('li');
        console.log(li); // 打印出第一个 li


        // 3.querySelectorAll()  返回指定选择器的所有的元素对象集合
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);
    </script>

获取body 和html元素

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

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

事件三要素

事件：触发响应的机制
三要素

事件源
事件类型
事件处理程序

    <button id="btn">唐伯虎</button>
    <script>
        // 点击一个按钮，弹出一个对话框
        // 1. 事件由三部分组成，  事件源 事件类型 事件处理程序 ----就是事件的三要素

        // 事件源--事件被触发的对象，，，就是谁被触发--按钮
        var btn = document.getElementById('btn');

        // 事件类型--如何触发 什么事件 ，比如鼠标点击 onclick，还是鼠标经过，还是键盘按下，或者滚动滚轮等等
        // 事件处理程序 --通过一个函数(function)赋值的方式 完成

        btn.onclick = function () {
            alert('点秋香');
        }

    </script>

在这里插入图片描述

执行事件过程

    <div>123333</div>
    <script>
        // 执行事件步骤
        // 点击 div 控制台输出 我被选中了
        // 1.获取事件源
        var div = document.querySelector('div');

        // 2.绑定事件 注册事件
        // div.onclick
        // 3.添加事件处理程序
        div.onclick = function () {
            console.log('选中了');
        }


    </script>

操作元素----修改元素内容

JavaScript的DOM 操作可以改变网页内容、结构、样式，我们可以利用DOM操作元素来改变李安的内容，属性等等，注意，改变的都是属性

element.innerText

<button>显示当前系统时间</button>
    <div>某个时间</div>
    <p>717</p>

    <script>
        // 当我们点击了 按钮，div 里面的文字会发生变化
        // 1. 事件源----button
        // 2. 事件类型----鼠标点击
        // 3. 事件处理程序----文字变化
        var bu = document.querySelector('button');
        var div = document.querySelector('div');
        bu.onclick = function () {
            // div.innerText = '2019.7.17'

            // 显示当前时间
            div.innerText = getDate();
        }

        function getDate() {
            var date = new Date();//这里的知识点我竟然忘了，Date，是一个构造函数，必须通过 new 来调用，
            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();   
    </script>

innerText 和 innerHTML的区别

innerHtml常用

    <div></div>
    <p>1111
        <span>666</span>
    </p>
    <script>
        // innerText 和innerHtml的区别
        // 1.innerText  不识别 html 标签，去除空格和换行
        var div = document.querySelector('div');
        div.innerText = '<strong> 今天是： <strong>2019';

        // 2.innerHTML 识别html 标签  W3C标准  保留空格和内容
        div.innerHTML = '<strong> 今天是： <strong>2019';


        // 这两个属性是可读写的，可以获取元素里面的内容
        var p = document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);
    </script>

innerHTML 保留标签，识别标签，能把标签转换为想转换的意思
在这里插入图片描述

操作元素------改变元素属性

<button id="ldh">刘德华</button>
    <button id="zxy">张学友</button>
    <img src="images/ldh.jpg" alt="" title="刘德华">
    <!--title 是鼠标经过时候悬停显示的东西--->
    <img src="images'zxy.jpg" alt="" title='张学友'>

    <script>
        // 修改元素属性  src
        //    1.获取元素
        var ldh = document.getElementById('ldh');
        var zxy = document.getElementById('zxy');
        var img = document.querySelector('img');

        // 2.注册事件
        zxy.onclick = function () {
            img.src = 'images/zxy.jpg';
            img.title = 'zxy666';
        }

        ldh.onclick = function () {
            img.src = 'images/ldh.jpg';
            img.title = 'ldh66'
        }
    </script>

分时问候案例


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img {
            width: 300px;
        }
    </style>
</head>

<body>
    <img src="images/s.gif" alt="">
    <div>上午好</div>
    <script>
        // 根据系统不同时间来判断，所以需要用到日期内置对象
        // 利用多分支语句来设置不同的图片
        // 需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性
        // 需要一个div元素，显示不同问候语，修改元素内容即可
        // 1.获取元素
        var img = document.querySelector('img');
        var div = document.querySelector('div');
        // 2. 得到当前的小时数
        var date = new Date();
        var h = date.getHours();
        // 3. 判断小时数改变图片和文字信息
        if (h < 12) {
            img.src = 'images/s.gif';
            div.innerHTML = '亲，上午好，好好写代码';
        } else if (h < 18) {
            img.src = 'images/x.gif';
            div.innerHTML = '亲，下午好，好好写代码';
        } else {
            img.src = 'images/w.gif';
            div.innerHTML = '亲，晚上好，好好写代码';

        }
    </script>
</body>

</html>

操作元素----修改表单元素

表单的一些概念
在这里插入图片描述

通过 value 来修改、

利用DOM 可以操作下面这些表单属性
type
value
checked
selected
disabled--------实现某个表单被禁用，不能再点击，就用这个

    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        // 1.获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        // 2.注册事件，处理程序
        btn.onclick = function () {
            // input.innerHTML = '点击了';  这个是 普通盒子，比如div 标签里面的内容的修改方法
            // 表单里面的值，是通过 value 来修改的
            input.value = '被电啦啦啦啦啦';

            // disabled--------实现某个表单被禁用，不能再点击，就用这个
            // 禁用按钮
            // btn.disabled = 'true';
            this.disabled = 'true'; // 和上面的效果一样
            // this 指向的是事件函数的调用者 btn
        }
   </script>

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

分析：点击眼睛按钮，把密码框改成文本框就能看见里面的密码
一个按钮两个状态，点击依次，切换为文本框，继续点击切换为密码框
算法：利用一个 flag变量，来判断flag 的值，如果是 1 就切换为文本框，flag设置为0；如果师0 就切换为密码框，flag 设置为1


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <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: 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" name="" id="pwd">
    </div>
     
    <script>
        // 1. 获取元素
        var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        // 2. 注册事件 处理程序
        var flag = 0;
        eye.onclick = function() {
            // 点击一次之后， flag 一定要变化
            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>

</html>

操作元素–修改样式属性

如果修改的样式比较少，可以用以下方法进行修改

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

    <div></div>
    <script>
        // 1.获取元素
        var div = document.querySelector('div');
        // 2. 注册事件 处理程序
        div.onclick = function () {
            // div.style 里面的属性，采取驼峰命名法
            this.style.backgroundColor = 'orange';
            this.style.width = '200px';
            // JS 修改 style 样式操作，产生的是行内样式，CSS权重比较高----所以点击了之后就会被覆盖，内嵌和行内冲突了的话，保留行内
        }
    </script>

仿淘宝关闭二维码案例

思路：利用样式的显示和隐藏， display:none 隐藏元素 display:block 显示元素
点击按钮，就让这个二维码盒子隐藏起来


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <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>
        // 1. 获取元素 
        var btn = document.querySelector('.close-btn');
        var box = document.querySelector('.box');
        // 2.注册事件 程序处理
        btn.onclick = function() {
            box.style.display = 'none';
            //  这里不能用this ,因为 this 指向的是函数的调用者，函数的调用者是 btn，但是现在需要关闭的是 box，所以不能用
        }
    </script>
</body>

</html>

在这里插入图片描述

操作元素----循环精灵图

<!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>循环精灵图</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;
            /* 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++) {
            // 让索引号*44 就是每个 li 的y 坐标
            var index = i * 44;
            lis[i].style.backgroundPosition = '0 -' + index + 'px';
        }
    </script>
</body>

</html>

显示隐藏文本框–知识点：获得焦点onfocous 失去焦点 onblur

当鼠标点击文本框时，里面的默认文字隐藏，当鼠标里开文本框时，里面文字显示

使用 placeholder 就不需要 if 判断语句，但是 placeholder 的值不能作为搜索内容上传至服务器，
value只要输入内容后即使失去焦点也不会被清除

解决思路：

表单需要两个新事件，获得焦点 onfocus ，失去焦点 onblur
如果获得焦点，判断表单里面的内容是否为默认文字，如果是默认文字，就清空表单内容
如果失去焦点，判断表单内容是否为空，如果为空，则表单内容改为默认文字

<!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>
        input {
            color: #999;
        }
    </style>
</head>

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

        // 注册事件 失去焦点事件 onblur
        text.onblur = function () {
            // console.log('失去焦点');
            if (this.value === '') {
                this.value = '手机'
            }
            // 失去焦点需要把文本框里面的颜色文字变浅色
            this.style.color = '#999';
        }
    </script>
</body>

</html>

使用className 修改样式属性

<!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">
        <p class="message">请输入6-16位密码</p>
    </div>
    <script>
        // 首先判断事件是 表单失去焦点 onblur
        // 如果输入正确，提示正确的信息，颜色位绿色小图标变化
        // 如果不是6-16位，则提示错误信息，颜色位红色，小图标变化
        // 因为里面变化样式多，采取 className
        // 1.获取元素
        var ipt = document.querySelector('.ipt');
        var message = document.querySelector('.message');
        // 注册事件---失去焦点
        ipt.onblur = function () {
            // 根据表单的值（value)的长度length  ipt.value.length

            if (this.value.length < 6 || this.value.length > 16) {
                // console.log('错误');
                // 修改样式
                message.className = 'message wrong';
                message.innerHTML = '输入的位数不对，要求6-16位';


            } else {
                message.className = 'message right';
                message.innerHTML = '输入正确';
            }
        }
    </script>
</body>

</html>

操作元素总结

操作元素内容—innerText innerHTML
操作常见元素属性----src href title alt
操作表单元素属性 type value disabled
操作元素样式 element.style className

Dn_wh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我终于要学DOM了

文章目录targetDOM获取元素targetDOM是啥获取页面元素给元素注册事件操作DOM 元素的属性创建元素操作DOM节点DOM文档对象模型—就是一个接口，处理文档的接口可以改变页面的内容、结构、样式等等DOM树文档：一个页面就是一个文档元素：页面的所有标签都是元素节点：网页中所有的内容都是节点（标签、属性、文本、注释等等）------------用node 表示DOM把这些内容都当作对象获取元素ID 获取标签名获取HTML 5 新增的方法获取特殊元素
复制链接

扫一扫