JavaScript学习笔记11

于 2022-09-01 17:42:03 发布
阅读量106 收藏
点赞数 1
分类专栏： JS 文章标签： 前端 servlet html
原文链接：https://www.bilibili.com/video/BV1Sy4y1C7ha?p=235&spm_id_from=333.1007.top_right_bar_window_history.content.click&vd_source=720efe45336d5eabd781d1ed31bafef8
版权
本文详细介绍了JavaScript中的DOM操作，包括表单全选取消全选的实现、元素属性的获取与设置、tab栏切换逻辑、自定义属性的使用以及节点操作如父节点、子节点、兄弟节点的获取和操作。还展示了动态创建和添加节点以及简单的发布留言功能。内容涵盖了DOM的基本操作和常见的交互实现。
摘要由CSDN通过智能技术生成

  • 目录

    表单全选和取消全选案例

    操作元素

    获得属性值

    设置属性值

    移除属性

    tab栏切换案例

    H5自定义属性

    节点操作

    父节点

    子节点

    parentNode.childNodes（标准）

    parentNode.children（非标准）（常用）

    获取第一子元素和最后一个子元素

    parentNode.firstChild第一个子节点，包含所有文本节点

    parentNode.lastChild最后一个子节点，包含所有文本节点

    parentNode.firstElementChild第一个元素节点

    parentNode.lastElementChild最后一个元素节点

    parentNode.children[0]  拿到第一个元素

    parentNode.children[parent.children.length-1]  拿到最后一个元素节点

    下拉菜单案例

    兄弟节点

    node.nextSibling

    node.previousSibling

    node.nextElementSibling

    node.previousElementSibling

    节点操作之创建和添加节点

    动态创建节点 document.createElement('tagName')'

    后面添加节点node.appendChild(Child)

    前面添加节点 node.insertBefore(children,指定元素)

    简单发布留言案例

  • 表单全选和取消全选案例

    • 上面按钮点下，下面所有按钮全选上：

      • 下面所有复选框的checked属性跟随全选按钮

      • 获取全选按钮和所有下面的复选按钮

      • this.checked获取上面复选框的选中状态，如果是true就是选中状态，false就是未选中状态。

    • 下面按钮全部选上，上面的按钮也跟着选上

      • 给下面所有按钮都绑定一个点击事件，每次点击，都循环查看下面所有的复选按钮是否有一个或者多个没有选上的

      • 思路：

        • 循环检查下面每个按钮是否被选中

        • 定义一个flag变量为真

        • 循环检查是否有小按钮没有被选中，如果真的有没有被选中的flag=false，

        • 最后把flag的值给大按钮来控制大按钮的值

        • 案例

        • 结果

  • 操作元素

    • 获得属性值

      • 1.element.属性  

        • 获取内置属性值，元素本身自带的属性值

      • 2.element.getAttribute('属性');

        • 获取自定义属性，主要针对程序员自定义的属性

    • 设置属性值

      • element.属性 = '值';

        • 设置内置属性

      • element.setAttribute('属性','值');

        • 主要针对自定义属性值得修改

        • class特殊，这里写的就是class，而不是className

    • 移除属性

      • element.removeAttribute('属性');

      • 案例

        <!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="demo" index="1" class="nav"></div>
    <script>
        var div = document.querySelector('div');
        //1.获取元素属性值 
        console.log(div.id);//element.属性值获取元素值
        console.log(div.getAttribute('id'));//element.getAttribute('属性'); 获取属性值
        console.log(div.getAttribute('index'));//element.getAttribute('属性'); 获取属性值

        //2.设置属性值
        div.id = 'test';//element.属性 = '值';
        div.className = 'navs';

        div.setAttribute('index', '2');//element.setAttribute('属性','值');
        div.setAttribute('class', 'footer');//class特殊，这里写的就是class，而不是className

        //3.移除属性
        div.removeAttribute('index');//element.removeAttribute('属性');
    </script>

</body>

</html>

      • 结果

         

    • tab栏切换案例

      • Tab栏切换的时候分为上list模块和下面的con模块

      • 上面的模块选项卡，点击某一个，当前底色会是红色，其余不变修改类名方式

      • 下面模块内容随着上面选项卡变化，所以下面模块变化写到点击事件中

      • 给上面的tab_list里面的所有小li添加自定义属性，属性值从0开始编号

      • 当我们点击tab_list里面的某个小li，让tab_con里面对应的序号的内容显示，其余隐藏（排他思想）

      • 案例

        <!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>
        .current {
            background-color: red;
        }
    </style>

</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品价格</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价</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">
                商品评价模块内容
            </div>
            <div class="item">
                手机社区内容
            </div>
        </div>
    </div>
    <script>
        //1.获取list元素
        var tab_list = document.querySelector('.tab_list');
        var lis = tab_list.querySelectorAll('li');
        var items = document.querySelectorAll('.item');//获取5个con里面的div

        //2.for循环绑定点击事件
        for (var i = 0; i < lis.length; i++) {
            //给5个li设置索引号
            lis[i].setAttribute('index', i);
            lis[i].onclick = function () {//点击lis当前这个lis添加current类
                //使用排他思想  其他的lis样式清空
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = '';
                }
                this.className = 'current';//留下自己的样式设置current样式

                //2.下面的显示内容模块  下面模块显示内容和上面选项卡一一对应，其余隐藏
                var index = this.getAttribute('index');//获取5个小li的索引号
                console.log(index);

                //排他思想 只显示点击的div模块
                for (var i = 0; i < lis.length; i++) {
                    items[i].style.display = 'none';//让没有点击的对应的div隐藏
                }
                items[index].style.display = 'block';//让点击的对应的序号的div显示出来
            }
        }
    </script>


</body>

</html>

      • 结果

         

  • H5自定义属性

    • 为了保存使用数据，用于保存在页面但是不用保存在数据库中

    • 规定自定义属性 data-开头作为属性名并且赋值

    • 使用getAttribute('属性名')获取属性

    • H5新增的获取自定义属性的方法

      • dataset是一个集合里面存放了所有以data开头的自定义属性，且只能获取data开头的属性

      • element.dataset.index或者element.dataset['index']  ie11以上才能兼容

      • 案例

        <!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>
    <!-- data-开头是自定义属性 -->
    <div getTime="20" data-index="2" data-list-name="andy"></div>
    <script>
        var div = document.querySelector('div');
        console.log(div.getAttribute('getTime'));//获取到getTime属性
        div.setAttribute('data-time', 2);//data-自定义属性time值为2

        //H5新增的获取自定属性的方法 只能获取data-开头的
        console.log(div.dataset);//dataset是一个集合，存放了所有以data开头自定义属性
        console.log(div.dataset.index);//打印dataset里面的index的值 为2
        console.log(div.dataset['index']);//打印dataset里面的index的值 为2

        //如果自定义属性里面有多个-链接的单次，我们获取的时候采用驼峰命名法
        console.log(div.dataset.listName);//获取时候直接去掉-，替换为驼峰命名法
        console.log(div.dataset['listName']);
    </script>
</body>

</html>

      • 结果

         

  • 节点操作

    • 利用父子兄节点关系获取元素，逻辑性强，但是兼容性差

    • 页面中所有的内容都是节点，节点使用node表示，可以创建和删除节点

    • 及诶单至少拥有node Type（节点类型）、nodeName（节点名称）、nodeValue（节点值）基本属性

    • 元素节点nodeType为1（主要操作元素节点）

    • 属性节点nodeType为2

    • 文本节点nodeType为3（文本节点包括文字、空格、换行）

    • 节点层次，常见的是父子兄层级关系

    • 案例

      <!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>我是div</div>
    <span>我是span</span>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <div class="box">
        <span class="erweima">x</span>
    </div>
    <script>
        var box = document.querySelector('.box');
        console.dir(box);//dir打印节点属性
    </script>

</body>

</html>

    • 结果

       

    • 父节点

      • node.parentNode得到当前元素的父亲节点，是离他最近的父亲节点，如果找不到父节点就返回null

      • 案例

        <!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>我是div</div>
    <span>我是span</span>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <div class="demo">
        <div class="box">
            <span class="erweima">x</span>
        </div>
    </div>

    <script>
        //1.父节点parentNode
        var erweima = document.querySelector('.erweima');
        erweima.parentNode;//拿到erweima的父节点
        console.log(erweima.parentNode);//得到erweima最近的父级元素box  
    </script>

</body>

</html>

      • 结果

         

    • 子节点

      • parentNode.childNodes（标准）

        • 得到节点的子节点集合

        • 返回值里面包含了所有的子节点，包含元素节点，文本节点等

        • 判断是否为元素节点的代码

        • parent.childNode[0].nodeType  获取父节点里面是元素的子节点（排除文本和换行自及诶单）

      • parentNode.children（非标准）（常用）

        • 直接得到所有的元素节点 

        • 例如ul.children：获取ul里面所有的元素子节点

        • 代码

          <!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>我是div</div>
    <span>我是span</span>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <div class="demo">
        <div class="box">
            <span class="erweima">x</span>
        </div>
    </div>
    <script>
        //获取ul里面的li
        //1.DOM提供的方法
        var ul = document.querySelector('ul');
        var lis = document.querySelector('li');
        //2.子节点操作 childNodes所有的子节点 包含元素节点和文本节点等等
        console.log(ul.childNodes);//拿到ul的子节点  结果为9 换行是文本节点 也包含在里面
        console.log(ul.childNodes[0].nodeType);//结果为1 说明为元素节点
        console.log(ul.childNodes[1].nodeType);//结果为3 说明为文本节点
        //3.获取元素节点的代码
        var ul = document.querySelector('ul');
        for (var i = 0; i < ul.childNodes.length; i++) {//拿到所有父节点的是元素节点的子节点 
            if (ul.childNodes[i].nodeType == 1) {//判断元素节点
                console.log(ul.childNodes[i]);
            }
        }
        //4.children 直接获取所有元素的子元素节点
        console.log(ul.children);
    </script>

</body>

</html>

        • 结果

           

    • 获取第一子元素和最后一个子元素

      • parentNode.firstChild第一个子节点，包含所有文本节点

      • parentNode.lastChild最后一个子节点，包含所有文本节点

      • parentNode.firstElementChild第一个元素节点

        • 例如ol.firstElementChild  得到ol里面第一个元素节点

      • parentNode.lastElementChild最后一个元素节点

        • 例如ol.lastElementChild  得到ol里面最后一个元素节点

      • 实际开发写法  解决兼容问题

        • parentNode.children[0]  拿到第一个元素

          • 例如ol.chidren[0]  

        • parentNode.children[parent.children.length-1]  拿到最后一个元素节点

          • 例如：ol.children[ol.childeren.length - 1];

          • 案例

            <!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>
    <ol>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
    </ol>
    <script>
        var ol = document.querySelector('ol');
        //1.firstChild 
        console.log(ol.firstChild);//获取了第一个子节点，得到了换行文本节点
        console.log(ol.lastChild);//获取了最后一个子节点，得到了换行文本节点

        //2.firstElementChild 
        console.log(ol.firstElementChild);
        console.log(ol.lastElementChild);

        //3.实际开发写法  没有兼容性问题
        console.log(ol.children[0]);//拿到第一元素
        console.log(ol.children[ol.children.length - 1]);//拿到最后一元素
    </script>

</body>

</html>

          • 结果

             

    • 下拉菜单案例

      • 导航栏里面的li都要有鼠标经过效果，所以需要循环注册鼠标事件

      • 核心原理：当鼠标经过li里面的第二个孩子ul显示，当鼠标离开，则ul隐藏

      • 案例

        <!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 class="nav">
        <li>
            <a href="#">新浪</a>
            <ul>
                <li><a href="">私信</a></li>
                <li><a href="">私信</a></li>
                <li><a href="">私信</a></li>
            </ul>
        </li>
        <li>
            <a href="#">新浪</a>
            <ul>
                <li><a href="">私信</a></li>
                <li><a href="">私信</a></li>
                <li><a href="">私信</a></li>
            </ul>
        </li>
        <li>
            <a href="#">新浪</a>
            <ul>
                <li><a href="">私信</a></li>
                <li><a href="">私信</a></li>
                <li><a href="">私信</a></li>
            </ul>
        </li>
        <li>
            <a href="#">新浪</a>
            <ul>
                <li><a href="">私信</a></li>
                <li><a href="">私信</a></li>
                <li><a href="">私信</a></li>
            </ul>
        </li>
    </ul>
    <script>
        var nav = document.querySelector('.nav');
        var lis = nav.children;//得到nav下面的额4四个小li
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function () {//鼠标经过四个小li发生的事件
                this.children[1].style.display = 'block';//四个小里面有a和ul 代码意思指鼠标经过nav里面的第二个子元素ul样式变化为出现
            }
            lis[i].onmouseout = function () {//鼠标离开四个小li发生的事件
                this.children[1].style.display = 'none';//鼠标离开nav里面的第二个子元素ul隐藏起来
            }
        }
    </script>

</body>

</html>

      • 鼠标移动上去的效果

         

    • 兄弟节点

      • node.nextSibling

        • 返回当前元素的下一个兄弟节点，包含所有节点

      • node.previousSibling

        • 返回当前元素的上一个兄弟节点，包含所有节点

      • node.nextElementSibling

        • 返回当前元素的下一个兄弟元素节点，找不到返回null

      • node.previousElementSibling

        • 返回当前元素的上一个兄弟元素节点，找不到返回null

      • 解决兼容性问题  封装一个兼容性函数

        • function getNextElementSibling(element){ var el = element; while (el = elnextSibling){ if (el.nodeType ==1){ return el;{}return null;}

        • 案例

          <!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>我是div</div>
    <span>我是span</span>
    <script>
        var div = document.querySelector('div');
        //1.nextSibling 得到下一个兄弟节点，包含元素节点，或者文本节点等等
        console.log(div.nextSibling);//得到div文本下一个兄弟节点 ：换行节点
        //2.previousSibling 得到上一个兄弟节点，包含元素节点，或者文本节点等等
        console.log(div.previousSibling);//得到div文本上一个兄弟节点 ：换行节点
        //3.nextElementSibling 返回当前元素的下一个兄弟元素节点
        console.log(div.nextElementSibling);//得到div下一个兄弟元素节点 结果为span
        //4.previousElementSibling 返回当前元素的下一个兄弟元素节点
        console.log(div.previousElementSibling);//得到div上一个兄弟元素节点 结果为null
    </script>

</body>

</html>

        • 结果

           

    • 节点操作之创建和添加节点

      • 如果想要在页面添加一个新的元素步骤：创建元素、添加元素（插入元素）

      • 动态创建节点 document.createElement('tagName')'

      • 后面添加节点node.appendChild(Child)

        • 添加一个节点到指定父节点末尾

        • node指父亲，children指孩子节点

        • 例如ul.appendChildren(li); 

      • 前面添加节点 node.insertBefore(children,指定元素)

        • 在指定元素的前面添加节点

        • 案例

          <!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>123</li>
    </ul>
    <script>
        //1.创建元素节点
        var li = document.createElement('li');
        //2.添加节点node.appendChildren(child)  node是父级 child是子级
        var ul = document.querySelector('ul');
        ul.appendChild(li);//创建的li孩子节点 放在ul父级节点里面去  里面默认内容默认为空
        //3.添加节点 node.appendChildren(child,指定元素)
        var lili = document.createElement('li');//创建一个lili元素节点
        ul.insertBefore(lili, ul.children[0]);//在ul第一个孩子前面插入一个lili元素节点
        //4.
    </script>

</body>

</html>

        • 结果

           

      • 简单发布留言案例

        • 核心思路：点击发布按钮之后动态创建一个li，添加到ul里面

        • 创建li的同时，会把文本域里面的值通过li.innerHTML赋值给li

        • 如果想要新的留言显示在后面就用appendChild 如果想要前面显示就用到insertBefore

        • 案例

          <!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>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>发布</button>
    <ul>

    </ul>
    <script>
        //1.获取button按钮 textarea域 ul标签
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        //2.btn点击注册事件
        btn.onclick = function () {
            if (text.value == '') {//判断输入内容是否为空
                alert('请输入内容');
                return false;
            } else {
                //3.创建li标签元素
                var li = document.createElement('li');
                //4.将text里面的值赋值给li
                li.innerHTML = text.value;
                //5.在前面插入li元素
                ul.insertBefore(li, ul.children[0]);
                /* //5.在后面插入li元素
                ul.appendChild(li); */
            }
        }
    </script>

</body>

</html>

        • 结果

           

    • JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts

正在加载jjj
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值