DOM的有关操作（上）

最新推荐文章于 2022-05-14 15:35:02 发布

有一只僵尸在你的草坪上

最新推荐文章于 2022-05-14 15:35:02 发布

阅读量197

点赞数

分类专栏：笔记文章标签： javascript

本文链接：https://blog.csdn.net/weixin_47406138/article/details/108419248

版权

笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

标签的获取

通过ID获取

 <div id="time">2020-09-05</div>
    <script>
        var timer = document.getElementById('time');
        console.log(timer);

在这里插入图片描述

通过标签名获取（以伪数组形式存储）

 <ul>
        <li>我就是我1</li>
        <li>我就是我2</li>
        <li>我就是我3</li>
        <li>我就是我4</li>
        <li>我就是我5</li>
    </ul>

    <script>
        var tag = document.getElementsByTagName('li');
        console.log(tag);
        //获取标签里的第一个元素
        console.log(tag[0]);
        // 一次打印元素对象可以采用遍历
        for (var i = 0; i < tag.length; i++) {
            console.log(tag[i]);
        }

在这里插入图片描述
获取父元素内部所有指定标签名的子元素。

 <ol id="baobao">
        <li>海绵宝宝1</li>
        <li>海绵宝宝2</li>
        <li>海绵宝宝3</li>
        <li>海绵宝宝4</li>
        <li>海绵宝宝5</li>
    </ol>

    <script>
        var ol = document.getElementById('baobao');
        var lis = ol.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);

在这里插入图片描述

H5新增方法—通过类名来获取

 <div class="box">盒子1</div>
    <div class="box">盒子2</div>

    <script>
        var boxes = document.getElementsByClassName('box');
        console.log(boxes);
        console.log(boxes[0]);
    </script>

在这里插入图片描述

H5新增方法—根据指定选择器返回第一个对象

注意：里面的选择器要加符号，如通过类名获取要加’.’ ，通过Id获取要加’#'

  <div class="box">盒子1</div>
    <div class="box">盒子2</div>

    <script>
        var box = document.querySelector('.box');
        console.log(box);
    </script>

在这里插入图片描述

 <ul id="nav">
        <li>结构</li>
        <li>产品</li>
    </ul>
    <script>
        var nav = document.querySelector('#nav');
        console.log(nav);
    </script>

在这里插入图片描述

 <ul>
        <li>产品</li>
        <li>结构</li>
    </ul>
</body>
<script>
    // 获取第一个li
    var li = document.querySelector('li');
    console.log(li);
</script>

在这里插入图片描述

H5新增方法—根据指定选择器返回全部对象

 <ul>
        <li>熊大</li>
        <li>熊二</li>
    </ul>
</body>
<script>
    // 获取全部li
    var lis = document.querySelectorAll('li');
    console.log(lis);
    console.log(lis[0]);
    console.log(lis[1]);
</script>

在这里插入图片描述

获取特殊元素

获取body元素

 <body>
    啦啦啦~~
</body>
<script>
    var bodyEle = document.body;
    console.log(bodyEle);
</script>

在这里插入图片描述

获取html元素

<script>
    var htmlEle = document.documentElement;
    console.log(htmlEle);
</script>

在这里插入图片描述

事件基础

操作元素

- 改变元素内容

通过事件来改变

 <button>显示当前系统时间</button>
    <div>某个时间</div>
    <script>
        var div = document.querySelector('div');
        var btn = document.querySelector('button');
        btn.onclick = function () {
            //设置一个固定的时间
            // div.innerHTML = '2020-09-06';
            //利用函数设置一个变化的时间
            div.innerHTML = getDate();
        }

        function getDate() {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var day = date.getDay();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            return '今天是' + year + '年' + month + '月' + dates + '日' + arr[day];
        }
    </script>

直接修改

  <p>直接修改内容</p>
    <script>
        var p = document.querySelector('p');
        //打开浏览器 p里面的内容直接被修改了
        p.innerHTML = getDate();

*innerText和innerHtml的区别：

innerText不识别html标签* 去除空格和换行
innerhtml识别html标签* 保留空格和换行

 <p>
        我是文字
        <span>123</span>
    </p>

    <script>
        var p = document.querySelector('p');
        console.log(p.innerText);
    </script>

在这里插入图片描述

- 修改元素属性
通过每一次点击不同的姓名按钮，改变图片的路径

<button id="zxy">张学友</button>
    <button id="ldh">刘德华</button>
    <img src="xueyou.jpg" alt="">

    <script>
        //获取元素
        var zxy = document.querySelector('#zxy');
        var ldh = document.querySelector('#ldh');
        var img = document.querySelector('img');
        //注册事件
        zxy.onclick = function () {
            img.src = 'xueyou.jpg';
        }
        ldh.onclick = function () {
            img.src = 'dehua.jpg';
        }
    </script>

案例:分时显示不同图片，显示不同问候语

  <div>早上好</div>
    <img src="morning.jpg" alt="">


    <script>
        var div = document.querySelector('div');
        var img = document.querySelector('img');
        var date = new Date();
        var H = date.getHours();
        if (H < 12) {
            div.innerHTML = '早上好';
            img.src = 'morning.jpg';
        } else if (12 < H < 18) {
            div.innerHTML = '下午好';
            img.src = 'afternoon.gif';
        } else {
            div.innerHTML = '晚上好';
            img.src = 'evening.jpg';
        }
    </script>

- 表单元素的属性操作

  <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        //获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        //注册事件
        btn.onclick = function () {
            //此处不能用innerHtml,value是表单元素特有的属性
            input.value = '您好呀';
            //按钮点击一次后失效
            // btn.disabled = true;
            //this指向事件函数的调用者button
            this.disabled = true;
        }
    </script>

案例：仿京东显示隐藏密码

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

        }

- 样式属性操作
JS修改style样式操作，产生的是行内样式，css权重比较高
JS里面的属性采用驼峰命名法。

行内修改样式

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

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

通过起类名，再引入的方式来修改

        div {
            width: 300px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
        }

        .change {
            background-color: cyan;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        var div = document.querySelector('div');

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

想要保留原先的类名，可以使用多类名选择器
如：this.className=‘first change’;

案例：仿淘宝关闭二维码

    <div class="box">
        <img src="icon_/二维码.png" alt="">
        <i class="close-code">×</i>
    </div>
    <script>
        //获取盒子和小×
        var box = document.querySelector('.box');
        var i = document.querySelector('.close-code');
        //注册事件：点击小×时，整个盒子隐藏
        i.onclick = function () {
            box.style.display = 'none';
        }

案例：循环精灵图

      .box {
            width: 298px;
            margin: 100px auto;
        }

        li {
            list-style: none;
        }

        ul li {
            float: left;
            width: 24px;
            height: 24px;
            background-color: pink;
            margin: 15px;
            background: url(icon_/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++) {
            //让索引号乘以44就是每个li的背景y坐标
            var index = i * 44;
            lis[i].style.backgroundPosition = '0 -' + index + 'px';
        }
    </script>

案例:显示隐藏文本框内容

获得焦点事件：onfocus
失去焦点事件：onblur

文本框默认文字颜色为#999，当鼠标获得焦点时，如果里面的内容为‘手机’，就清空文本框，同时将文字颜色改为蓝色。
当鼠标失去焦点时，里面的文本恢复为‘手机’，同时文字变为红色。

 input {
            border: 2px solid skyblue;
            width: 280px;
            height: 35px;
            outline: none;
            color: #999;
        }
    </style>
</head>

<body>
    <input type="text" value="手机">
    <script>
        var text = document.querySelector('input');
        text.onfocus = function () {
            if (this.value === '手机') {
                this.value = '';
                this.style.color = 'skyblue';
            }

        }

        text.onblur = function () {
            if (this.value === '') {
                this.value = '手机';
                this.style.color = 'red';
            }

        }
    </script>

案例：密码框验证信息

  div {
            width: 600px;
            margin: 100px auto;
        }

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

        .wrong {
            background: url(icon_/wrong.png) no-repeat;
            color: red;
        }

        .right {
            background: url(icon_/right.png)no-repeat;
        }
    </style>
</head>

<body>
    <div class="register">
        <input type="password" class="ipt">
        <p class="message">请输入6~16位密码</p>
    </div>
    <script>
        var ipt = document.querySelector('.ipt');
        var message = document.querySelector('.message');
        //注册事件
        ipt.onblur = function () {
            if (this.value.length < 6 || this.value.length > 16) {
                message.className = 'message wrong';
                message.innerHTML = '你输入的位数不对,要求6~16位';
            } else {
                message.className = 'message right';
                message.innerHTML = '您输入的正确';
            }
        }
    </script>

案例:排他思想

在点击按钮前将所有的元素遍历一遍，点击按钮之后再次遍历，将所有的元素颜色去掉，当前按钮改为粉色。

  //获取元素
        var btns = document.querySelectorAll('button');
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function () {
                //先把所有的按钮背景颜色去掉
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                //让当前元素的背景颜色为pink
                this.style.backgroundColor = 'pink';
            }
        }

案例：百度换肤效果

        /* 浏览器默认背景图 */
        body {
            background: url(1.jpg);
        }

        .baidu {
            margin: 100px 137px 0;
        }

        .baidu li {
            list-style: none;
            float: left;
            width: 160px;
            height: 100px;
            margin-left: 20px;
        }

        .baidu li img {
            width: 100%;
            height: 100%;
        }
    </style>

</head>

<body>
    <ul class="baidu">
        <li><img src="1.jpg"></li>
        <li><img src="2.jpg"> </li>
        <li><img src="3.jpg"> </li>
        <li><img src="4.jpg"> </li>
    </ul>
    <script>
        var imgs = document.querySelector('.baidu').querySelectorAll('img');
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function () {
                document.body.style.backgroundImage = 'url(' + this.src + ') ';
            }
        }

案例：表格隔行换色

鼠标经过当前行该行变为蓝色离开时颜色消失

      table,
        tr {
            border: 1px solid skyblue;
            border-collapse: collapse;
            text-align: center;
        }

        /* 表头背景颜色设置为粉色*/
        th {
            background-color: pink;
        }

        /* 设置表头和表体表格的内边距 */
        table th,
        td {
            padding: 8px 15px;
        }

        .bg {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
        </tbody>
    </table>


    <script>
        //获取表体里的行
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        for (var i = 0; i < trs.length; i++) {
            //鼠标经过时 当前行的背景变为天蓝色
            trs[i].onmouseover = function () {
                this.className = 'bg';
            }
            //鼠标离开时 去掉当前行的背景颜色
            trs[i].onmouseout = function () {
                this.className = '';
            }
        }

案例：表单全选取消

1.下面的复选框需要全部选中，上面全选才能选中做法:给下面所有的复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的。如果有一个没选中，上面的全选就不选中。
2.可以设置一个变量，来控制全选是否选中。
3.break跳出循环，可以提高执行效率

    thead {
            text-align: center;
            color: #fff;
            background-color: skyblue;
        }

        tbody {
            background-color: #f5f5f5;
        }

        table,
        th,
        td {
            border: 1px solid #999;
            border-collapse: collapse;
        }

        th,
        td {
            padding: 5px 50px;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" id="j_cbAll"></th>
                <th>商品</th>
                <th>价钱</th>
            </tr>
        </thead>
        <tbody id="j_body">
            <tr>
                <td><input type="checkbox"></td>
                <td>iphon8</td>
                <td>8000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>iPad Pro</td>
                <td>5000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>iPad Air</td>
                <td>2000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>Apple Watch</td>
                <td>2000</td>
            </tr>
    </table>

    </tbody>
    <script>
        var j_cbAll = document.getElementById('j_cbAll'); //获取全选按钮
        var j_tbs = document.getElementById('j_body').getElementsByTagName('input');//获取下面所有的复选框
        //全选按钮选中之后，下面的所有按钮都被选中
        j_cbAll.onclick = function () {
            for (i = 0; i < j_tbs.length; i++) {
                j_tbs[i].checked = this.checked;
            }
        }

        //下面的每一个按钮被选中之后，全选按钮被选中。否则全选按钮不被选中
        for (var i = 0; i < j_tbs.length; i++) {
            j_tbs[i].onclick = function () {
                var flag = true;
                //点击之后进行检查，看是否全部被选上了
                for (var i = 0; i < j_tbs.length; i++) {
                    if (!j_tbs[i].checked) {
                        flag = false;
                        break;
                    }
                }
                j_cbAll.checked = flag;
            }
        }

自定义属性的操作

获取属性值

 <div id="demo">1</div>
    <script>
        var div = document.querySelector('div');
        // 获取属性值
        console.log(div.id);
        console.log(div.getAttribute('id'));

设置属性值

 //设置属性值
        div.className = 'pre';
        div.setAttribute('data', '2');

移除属性

  //移除属性
        div.removeAttribute('class');

案例：tab栏切换

考察排他思想以及自定义属性的操作（获取属性值）

 <style>
        .tab_list {
            width: 1000px;
            height: 50px;
            margin: 0 auto;
            background-color: #ddd;
        }

        .tab_list ul {
            padding-left: 0;
        }

        .tab_list li {
            list-style: none;
            float: left;
            padding: 15px 20px;
        }

        .current {
            background-color: red;
        }

        .tab_con {
            margin-top: 8px;
            margin-left: 131px;
        }
    </style>
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价(50000)模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>
        </div>
    </div>

    <script>
        //获取小li
        var tab_list = document.querySelector('.tab_list')
        var lis = tab_list.querySelectorAll('li');
        //获取tab_icon里的小盒子
        var items = document.querySelectorAll('.item');

        for (var i = 0; i < lis.length; i++) {
            //为每一个li设置属性及属性值（在点击之前）
            lis[i].setAttribute('index', i);
            lis[i].onclick = function () {
                for (var i = 0; i < lis.length; i++) {
                    //干掉其他人
                    lis[i].className = '';
                }
                //留下我自己
                this.className = 'current';
                //下面的部分 也是在点击事件里面
                //获取当前按钮的索引号，让对应索引号的模块显示
                其余的隐藏
                var index = this.getAttribute('index');
                //console.log(index);
                for (var i = 0; i < items.length; i++) {
                    items[i].style.display = 'none';
                }
                items[index].style.display = 'block';
            }
        }
    </script>

节点操作

一般来说，节点至少拥有nodeType(节点类型）、nodeName（节点名称）、nodeValue(节点值）这三个基本属性。

- 节点层级
常见的是父子兄层级关系。

1. 父级节点

node.parentNode
 <div class="demo">
        <div class="box">
            <span class="erweima">×</span>
        </div>
    </div>
    <script>
        //父级节点
        var erweima = document.querySelector('.erweima');
        console.log(erweima.parentNode);

2. 子节点

parentNode.children(标准）
IE9以上才支持—>
parentNode.firstElementChild
parentNode.lastElementChild

3. 兄弟节点

IE9以上才支持—>
node.nextElementSibling //得到下一个元素节点
node.previousElementSibling //得到上一个元素节点

- 创建节点

  <ul>
        <li>123</li>
    </ul>
    <script>
        //获取
        var ul = document.querySelector('ul');
        //创建节点
        var li = document.createElement('li');

- 添加节点

在ul里添加li 相当于数组中的push 在后面追加元素

 //添加节点
        ul.appendChild(li);

指定元素，在前面加

  //创建节点
        var lili = document.createElement('li')
        //添加节点
        ul.insertBefore(lili, ul.children[0])

- 删除节点

在下面的案例中可以看到删除节点的操作。

案例：简单版发布留言

 <style>
        .box {
            margin: auto;
            width: 500px;
            height: 300px;
        }

        textarea {
            resize: none;
        }

        ul {
            margin-top: 50px;
        }

        li {
            list-style: none;
            width: 300px;
            height: 25px;
            margin: 15px 0;
            background-color: pink;
        }

        li a {
            float: right;
            text-decoration: none;
        }

        button {
            margin-bottom: 3px;
        }
    </style>
</head>

<body>
    <div class="box">
        <textarea name="" id="" cols="43 " rows="10" autofocus="autofocus">
        </textarea>
        <button>发布</button>
        <ul>
        </ul>
    </div>
    <script>
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        btn.onclick = function () {
            console.log(text.value);
            if (text.value == '') {
                alert('您没有输入内容哦');
                //阻止默认行为和冒泡
                return false;
            } else {
                //创建节点
                var li = document.createElement('li');
                li.innerHTML = text.value + '<a href="javascript:;">删除</a>';
                //将每次的留言追加到第一条
                ul.insertBefore(li, ul.children[0]);

                //获取所有的链接a
                var as = document.querySelectorAll('a');
                // 当点击某一个a时 就将该链接所在的父元素li删除
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function () {
                        ul.removeChild(this.parentNode);
                    }
                }
            }
        }
    </script>

- 复制节点

node.cloneNode(),如果括号参数为空或false,则是浅拷贝，只复制节点本身，不复制节点里的子节点

<ul>
        <li>1</li>
    </ul>
    <script>
        //获取元素
        var ul = document.querySelector('ul');
        //将ul的第一个孩子克隆，名字叫lili
        var lili = ul.children[0].cloneNode(true);
        //将lili追加到ul的最后面
        ul.appendChild(lili);
    </script>

效果：
在这里插入图片描述

案例：动态生成表格

   <style>
        table,
        td,
        th {
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            /* 让表格里的文本居中 */
            text-align: center;
            border: 1px solid #333;
        }

        thead tr {
            height: 40px;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <!-- < tbody里的值需要我们用程序去追加，这里先不写 -->
        <tbody>

        </tbody>
    </table>
    <script>
        //数据用对象来存储，多个对象可以用数组来存储 中间用逗号隔开
        var dates = [{
            name: '熊大',
            subject: 'JavaScript',
            score: 100
        }, {
            name: '熊二',
            subject: 'JavaScript',
            score: 99
        }, {
            name: '光头强',
            subject: 'JavaScript',
            score: 98
        }, {
            name: '吉吉国王',
            subject: 'JavaScript',
            score: 97
        }, {
            name: '大猪蹄子',
            subject: 'JavaScript',
            score: 0
        }];

        //创建tr行
        var tbody = document.querySelector('tbody');
        for (var i = 0; i < dates.length; i++) { //外层的for管tr-->人数
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            //单元格的数量取决于每个对象里面的属性个数  for循环遍历对象
            for (var k in dates[i]) {//里层的for管td
                //创建单元格
                var td = document.createElement('td')
                td.innerHTML = dates[i][k];//属性值
                tr.appendChild(td);
            }
            //创建带'删除'的单元格
            var td = document.createElement('td');
            td.innerHTML = '<a href="javascript:;">删除</a>';
            tr.appendChild(td);
        }
        //删除操作开始
        var as = document.querySelectorAll('a');
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function () {
                //点击a删除当前链接所在的行a<td<tr(他爸爸的爸爸)
                tbody.removeChild(this.parentNode.parentNode);
            }
        }

在这里插入图片描述

有一只僵尸在你的草坪上

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM的有关操作（上）

标签的获取通过ID获取 <div id="time">2020-09-05</div> <script> var timer = document.getElementById('time'); console.log(timer);通过标签名获取（以伪数组形式存储） <ul> <li>我就是我1</li> <li>我就是我2<
复制链接

扫一扫