JavaScript (2) DOM总结

已于 2022-02-09 21:10:07 修改
阅读量844 收藏 1
点赞数
分类专栏： 笔记 文章标签： javascript 前端 开发语言
于 2022-01-23 20:37:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63339948/article/details/122656413
版权

一 . 第一部分
1.在这里插入图片描述
在这里插入图片描述
2.DOM 树
在这里插入图片描述
3.在这里插入图片描述
4.在这里插入图片描述
5.在这里插入图片描述
在这里插入图片描述
案列 1 ：
操作元素之表单属性设置

<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 我们想要这个按钮 button禁用
            // btn.disabled = true;
            this.disabled = true;
            // this 指向的是事件函数的调用者 btn

        }
    </script>

案例 2 ：
操作元素之修改样式属性

<div></div>
    <script>
        // 1.获取元素
        var div = document.querySelector('div');
        // 2.注册事件 处理程序
        div.onclick = function() {
            // div.style里面的属性 采取驼峰命名法
            this.style.backgroundColor = 'purple';
            this.style.width = '250px';
        }
    </script>

案例 3 ：
通过className 更改元素

<div class="first">文本</div>
    <script>
        // 1.使用 element.style 获得修改元素样式 如果样式比较少 或者 功能简单的情况下使用
        var test = document.querySelector('div');
        test.onclick = function() {
            // this.style.backgroundColor = 'purple';
            // this.style.color = '#fff';
            // this.style.fontSize = "25px";
            // this.style.marginTop = '100px';
            // 让我们当前元素的类名改为了 change 

            // 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
            // 3.如果想要保留原先的类名，我们可以这么做 多类名选择器
            // this.className = 'change';
            this.className = 'first change';
        }
    </script>

案例 4 ：
仿新浪注册页面

 <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');
        // 2.注册事件 失去焦点
        ipt.onblur = function() {
            // 根据表单里面值的长度 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>

二 第二部分

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  1. 排他思想
 <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <button>按钮6</button>
    <script>
        // 1.获取所有按钮元素
        var btns = document.getElementsByTagName('button');
        // btns 得到的是伪数组 里面的每一个元素 btns[i]
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                // (1) 我们先把所有的按钮背景颜色去掉
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                // (2) 然后才让当前的元素背景颜色为pink;
                this.style.backgroundColor = 'pink';
            }
        }
        // 2.首先先排除其他人 然后才设置自己的样式 这种排除其他人的思想我们称为排他思想
    </script>

2.自定义属性操作

<div id="demo" index="1" class="nav"></div>
    <script>
        var div = document.querySelector('div');
        // 1. 获取元素的属性值
        // (1) element.属性
        console.log(div.id);
        //(2) element.getAttribute('属性')  get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
        // 2. 设置元素属性值
        // (1) element.属性= '值'
        div.id = 'test';
        div.className = 'navs';
        // (2) element.setAttribute('属性', '值');  主要针对于自定义属性
        div.setAttribute('index', 2);
        div.setAttribute('class', 'footer'); // class 特殊  这里面写的就是class 不是className
        // 3 移除属性 removeAttribute(属性)    
        div.removeAttribute('index');
    </script>

  <div getTime="20" data-index="2" data-list-name="andy"></div>
    <script>
        var div = document.querySelector('div');
        // console.log(div.getTime);
        console.log(div.getAttribute('getTime'));
        div.setAttribute('data-time', 20);
        console.log(div.getAttribute('data-index'));
        console.log(div.getAttribute('data-list-name'));
        // h5新增的获取自定义属性的方法 它只能获取data-开头的
        // dataset 是一个集合里面存放了所有以data开头的自定义属性
        console.log(div.dataset);
        console.log(div.dataset.index);
        console.log(div.dataset['index']);
        // 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
        console.log(div.dataset.listName);
        console.log(div.dataset['listName']);
    </script>

3.节点
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  1. 父节点 parentNode
   var erweima = document.querySelector('.erweima');
        // var box = document.querySelector('.box');
        // 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
        console.log(erweima.parentNode);

2.子节点 children

// DOM 提供的方法（API）获取
    var ul = document.querySelector('ul');
    var lis = ul.querySelectorAll('li');
    // 1. 子节点  childNodes 所有的子节点 包含 元素节点 文本节点等等
    console.log(ul.childNodes);
    console.log(ul.childNodes[0].nodeType);
    console.log(ul.childNodes[1].nodeType);
    // 2. children 获取所有的子元素节点 也是我们实际开发常用的
    console.log(ul.children);
  1. 第一个节点与最后一个
  var ol = document.querySelector('ol');
        // 1. firstChild 第一个子节点 不管是文本节点还是元素节点
        console.log(ol.firstChild);
        console.log(ol.lastChild);
        // 2. firstElementChild 返回第一个子元素节点 ie9才支持
        console.log(ol.firstElementChild);
        console.log(ol.lastElementChild);
        // 3. 实际开发的写法  既没有兼容性问题又返回第一个子元素
        console.log(ol.children[0]);
        console.log(ol.children[ol.children.length - 1]);
  1. 兄弟节点
    <div>我是div</div>
    <span>我是span</span>
    <script>
        var div = document.querySelector('div');
        // 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
        console.log(div.nextSibling);
        console.log(div.previousSibling);
        // 2. nextElementSibling 得到下一个兄弟元素节点
        console.log(div.nextElementSibling);
        console.log(div.previousElementSibling);
    </script>

5.创建和添加节点

  <ul>
        <li>123</li>
    </ul>
    <script>
        // 1. 创建节点元素节点
        var li = document.createElement('li');
        // 2. 添加节点 node.appendChild(child)  node 父级  child 是子级 后面追加元素  类似于数组中的push
        var ul = document.querySelector('ul');
        ul.appendChild(li);
        // 3. 添加节点 node.insertBefore(child, 指定元素);
        var lili = document.createElement('li');
        ul.insertBefore(lili, ul.children[0]);
        // 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素
    </script>

6.删除节点

<button>删除</button>
    <ul>
        <li>熊大</li>
        <li>熊二</li>
        <li>光头强</li>
    </ul>
    <script>
        // 1.获取元素
        var ul = document.querySelector('ul');
        var btn = document.querySelector('button');
        // 2. 删除元素  node.removeChild(child)
        // ul.removeChild(ul.children[0]);
        // 3. 点击按钮依次删除里面的孩子
        btn.onclick = function() {
            if (ul.children.length == 0) {
                this.disabled = true;
            } else {
                ul.removeChild(ul.children[0]);
            }
        }
    </script>

7.克隆节点

 <ul>
        <li>1111</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        // 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
        // 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
        var lili = ul.children[0].cloneNode(true);
        ul.appendChild(lili);
    </script>

4 . DOM 重点核心
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
三 . 第三部分
1.注册事件
在这里插入图片描述
在这里插入图片描述
2. 删除事件：

 <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function() {
                alert(11);
                // 1. 传统方式删除事件
                divs[0].onclick = null;
            }
            // 2. removeEventListener 删除事件
        divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号

        function fn() {
            alert(22);
            divs[1].removeEventListener('click', fn);
        }
        // 3. detachEvent
        divs[2].attachEvent('onclick', fn1);

        function fn1() {
            alert(33);
            divs[2].detachEvent('onclick', fn1);
        }
    </script>

3.DOM事件流
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
四 . 第四部分
1.事件对象
在这里插入图片描述
在这里插入图片描述
特殊常见鼠标事件：

 我是一段不愿意分享的文字
    <script>
        // 1. contextmenu 我们可以禁用右键菜单
        document.addEventListener('contextmenu', function(e) {
                e.preventDefault();
            })
            // 2. 禁止选中文字 selectstart
        document.addEventListener('selectstart', function(e) {
            e.preventDefault();

        })
    </script>

2 . 鼠标事件对象

  **<script>
        // 鼠标事件对象 MouseEvent
        document.addEventListener('click', function(e) {
            // 1. client 鼠标在可视区的x和y坐标
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('---------------------');
            // 2. page 鼠标在页面文档的x和y坐标
            console.log(e.pageX);
            console.log(e.pageY);
            console.log('---------------------');
            // 3. screen 鼠标在电脑屏幕的x和y坐标
            console.log(e.screenX);
            console.log(e.screenY);
        })
    </script>**

跟随鼠标的天使案例：

  <img src="images/angel.gif" alt="">
    <script>
        var pic = document.querySelector('img');
        document.addEventListener('mousemove', function(e) {
            // 1. mousemove只要我们鼠标移动1px 就会触发这个事件
            // console.log(1);
            // 2.核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标， 把这个x和y坐标做为图片的top和left 值就可以移动图片
            var x = e.pageX;
            var y = e.pageY;
            console.log('x坐标是' + x, 'y坐标是' + y);
            //3 . 千万不要忘记给left 和top 添加px 单位
            pic.style.left = x - 50 + 'px';
            pic.style.top = y - 40 + 'px';


        });
    </script>

3.键盘事件对象
在这里插入图片描述
在这里插入图片描述
案例 ：模拟京东快递单号查询案例：

 <div class="search">
        <div class="con">123</div>
        <input type="text" placeholder="请输入您的快递单号" class="jd">
    </div>
    <script>
        // 快递单号输入内容时， 上面的大号字体盒子（con）显示(这里面的字号更大）
        // 表单检测用户输入： 给表单添加键盘事件
        // 同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容
        // 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子
        var con = document.querySelector('.con');
        var jd_input = document.querySelector('.jd');
        jd_input.addEventListener('keyup', function() {
                // console.log('输入内容啦');
                if (this.value == '') {
                    con.style.display = 'none';
                } else {
                    con.style.display = 'block';
                    con.innerText = this.value;
                }
            })
            // 当我们失去焦点，就隐藏这个con盒子
        jd_input.addEventListener('blur', function() {
                con.style.display = 'none';
            })
            // 当我们获得焦点，就显示这个con盒子
        jd_input.addEventListener('focus', function() {
            if (this.value !== '') {
                con.style.display = 'block';
            }
        })
    </script>
人生苦若如初见
关注
专栏目录
操作元素排他算法以及三个实用的例子
shen_yk的博客
11-21 861
操作元素 排他算法 如果有同一组元素,我们想要某一个元素实现某种样式 ,需要用到循环的排他思想算法: 1.所有元素全部清除样式(干掉其他人) 2.给当前元素设置样式( 留下我自己) 3.注意顺序不能颠倒,首先干掉其他人,再设置自己 例子 点击按钮 按钮背景颜色改变 再次点击其他的 再次改变 并且之前点击的按钮变回原来的颜色 var btns = document.getElementsByTag...
WebApi之排他思想(3种方法)
weixin_45786584的博客
05-22 344
WebApi——排他思想(3种方法) 排他思想的3种方式(由易到难，js效率逐渐提高，拖拽自己的思路) ​ 第一种思路 ： 好理解，代码效率不高 (存在重复设置) <body> <button>哼哼</button> <button>哼哼</button> <button>哼哼</button> <button>哼哼</button> <button&gt
webApi02
qq_36343904的博客
05-19 475
day02 - Web APIs 1.1. 排他操作 1.1.1 排他思想 如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法： 所有元素全部清除样式（干掉其他人） 给当前元素设置样式 （留下我自己） 注意顺序不能颠倒，首先干掉其他人，再设置自己 <button>按钮1</button> <button&g...
排他操作简介
最新发布
LiXin_07的博客
04-14 569
上诉代码中,第3行代码获取所有按钮元素,存储在btns为数组中.第5~14行代码使用for循环遍历为数组中的每一个元素btns[i].第6行代码给每一个元素添加单击事件.第8~10行代码利用for循环首先吧所有的按钮背景颜色去掉,然后在第12行给当前元素设置背景颜色为pink.例如，在开发中，有统一组元素，如果只允许其中一个元素拥有特定样式，这时就可以使用排他操作来实现。（2）编写JavaScript代码，实现单击按钮，改变当前按钮背景效果，示例代码如下.(1)编写HTML结构代码，示例代码如下。
WebAPI(part5)--排他操作
小山羊的学习日志
11-11 252
学习笔记，仅供参考，有错必究 文章目录Web API排他操作排他思想百度换肤案例表格隔行变色 Web API 排他操作 排他思想 如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法： 所有元素全部清除样式（干掉其他人） 给当前元素设置样式 （留下我自己） 注意：顺序不能颠倒，首先干掉其他人，再设置自己 举个例子 代码： <!DOCTYPE html> <html lang="en"> <head> <meta cha
JavaScript(四)：JavaScript版的DOM总结
01-08
2、DOM节点 a、节点分类：主要有元素节点（Element Node）、属性节点（Attribute Node）、文本节点（Text Node）、注释节点（Comment Node）和文档节点（Document Node）等。 b、节点之间的关系：节点之间有父子、...
Javascript入门学习第九篇 Javascript DOM 总结第1/2页
12-08
1， 创建节点。 createElement(): var a = document.createElement(“p”); 它创建的是一个元素节点，所以 nodeType 等于 1 。 a.nodeName 将返回 p ; 注意；createElement()方法创建出来的新元素节点...
JavaScript获取DOM元素的11种方法总结
10-24
本文总结了11种常见的JavaScript获取DOM元素的方法，并将它们分为四大类。这些方法可以帮助开发者高效准确地选取DOM元素。 首先，我们可以根据顶层document节点来获取元素。这类方法通常用于直接根据元素的某些属性...
操作元素（排他思想）-算法
weixin_50119334的博客
10-02 262
排他思想 如果由同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想： 所有元素全部清除样式（干掉其他人） 给当前元素设置样式（留下自己） 顺序不能颠倒（先干掉其他人，再设置自己） 例：点击哪个按钮，哪个就变成粉红色 <body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button
Java编程实现排他锁代码详解
08-29
主要介绍了Java编程实现排他锁的相关内容，叙述了实现此代码锁所需要的功能，以及作者的解决方案，然后向大家分享了设计源码，需要的朋友可以参考下。
如何做数据库操作的排他操作？（个人小结）
anmo的专栏
10-10 4537
在现在的很多系统开发中，都会有或多或少的数据库操作。对于单机的数据库系统，对数据的并发存取基本上不存在会产生冲突的问题；但在当今的网络环境中，单机系统几乎已经不复存在。在网络数据库环境中，时刻都会有并发的存取操作，对于一个完善的数据库系统来说，它们本身就提供了数据完整性以及并发操作的设计，但对于一个非纯粹的数据库管理系统来说，很多时候是通过程序来控制数据的存取权限与存取控制（更有效和直接）
一个简单排他锁的原理与实现
qq_25956141的博客
04-26 2455
介绍 本文将介绍如何应用AbstractQueuedSynchronizer实现一个简单的Lock锁。至于AbstractQueuedSynchronizer的原理在博主其他文章中有介绍，本文重点讲述其应用。AbstractQueuedSynchronizer使用一个队列维护所有的等待锁释放的线程，队列中的每个结点通过自旋的方式来争抢锁，当同步结点释放锁，唤醒next结点。在自旋中，该线程序判断当...
简单清晰的排他锁AQS流程示意图
hepei120的专栏
04-20 381
JS - Web-APIs-day02 排他思想、自定义属性、节点
weixin_45734686的博客
10-22 234
JS - Web-APIs-day02 1.1. 排他操作 1.1.1 排他思想 如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法： 所有元素全部清除样式（干掉其他人） 给当前元素设置样式 （留下我自己） 注意顺序不能颠倒，首先干掉其他人，再设置自己 <button>按钮1</button> <button>按钮...
JavaScript(DOM)排他和属性
Han_Zhou_Z的博客
12-02 2178
目录 一、排他思想 1、鼠标事件 二、属性操作 1、获取属性值 2、设置属性值 （1）固有属性值的设置 （2）对于用户自定义的属性值的设置 3、移出属性值 三、HTML5中自定义属性 1、自定义属性规范：data-属性名 2、实现方式 3、获取自定义属性值： 一、排他思想 定义：简单理解就是排除掉其他的（包括自己），然后再给自己设置想要实现的效果。总而言之，排他思想的实现步骤就是所有元素全部清除与设置当前元素。 案例：点击任意一个按钮，其他按钮不被选择，背景颜色变回原来的颜..
用简单的“排他思想”实现简单的标签点击事件
Null_Robot的博客
07-13 397
1用简单的排他思想 先去掉所有的样式，再给要点击的对象添加样式 <script> var btn = document.querySelectorAll('button'); //btn得到的是伪数组，里面的每一个元素 btn[i]; for(var i = 0;i < btn.length;i++){ btn[i].onclick = function(){
排他思想做法
m0_46978034的博客
05-22 948
排他思想分为俩步骤 1.先给所有的元素绑定事件，而在吧所有的元素样式设置为同一种样式 要使用到双for循环 2.在给当前自己设置样式，总结就是先干掉所有人除了自己 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
JS-DOM（二）排他思想 获取元素属性 自定义属性 节点操作 创建元素 事件监听器
qq_44143906的博客
10-23 288
按钮点击显示按钮颜色（排他思想） 点击时先去掉所有按钮颜色，再给点击的按钮上色。 ->首先排除其他人，再单独设置自己的样式——排他思想 鼠标经过事件： onmouseover：鼠标经过元素 onmouseout：鼠标离开 获取元素属性值（二） 1.element.属性：获取元素内置属性 2.element.getAtrribute(‘属性’)：获取程序猿自己添加的属性（index="1"添加自定义属性） 设置元素属性值 1.element.属性=‘值’：设置内置属性值 2.element.setAtt
JavaScript数组与DOM操作总结
"这篇学习笔记主要涵盖了JavaScript中的数组操作、DOM操作和BOM浏览器对象模型的基础知识。通过本文，你可以了解如何使用JavaScript进行数组的增删改查，DOM节点的创建、删除和查找，以及BOM中的一些常用方法，如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值