JavaScript (2) DOM总结

已于 2022-02-09 21:10:07 修改
阅读量770 收藏 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>
人生苦若如初见
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM 动态创建节点
知来者犹可追
11-17 2171
1、创建一个节点 createElement(“标签名”): 按照给定的标签名创建一个新的元素节点. 方法只有一个参数：被创建的元素节点的名字, 是一个字符串. 方法的返回值：是一个指向新建节点的引用指针. 返回值是一个元素节点, 所以它的 nodeType 属性值等于 1，新元素节点不会自动添加到文档里, 它只是一个存在于 JavaScript 上下文的对象。 //1.创建一个li元素节点...
jQuery(简介、特点、使用方法、【重点】jQuery的选择器：是jQuery的灵魂、jQuery的属性：操作标签的属性)
weixin_44892365的博客
11-03 468
jQuery(简介、特点、使用方法、【重点】jQuery的选择器：是jQuery的灵魂)
JavaScript DOM节点操作方法总结
10-21
下面小编就为大家带来一篇JavaScript DOM节点操作方法总结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JavaScript DOM 学习总结(五)
10-23
当页面加载时，浏览器会创建页面的文档对象模型（Document Object Model）。文档对象模型定义访问和处理HTML文档的标准方法，本篇文章给大家介绍javascript dom 学习总结(五)，感兴趣的朋友一起学习吧
Javascript基础知识（三）BOM，DOM总结
10-25
本文是基础知识系列的第三篇文章，主要介绍javascript中BOM,DOM的一些心得总结，非常实用，有需要的朋友可以参考下
webApi02
qq_36343904的博客
05-19 422
day02 - Web APIs 1.1. 排他操作 1.1.1 排他思想 如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法： 所有元素全部清除样式（干掉其他人） 给当前元素设置样式 （留下我自己） 注意顺序不能颠倒，首先干掉其他人，再设置自己 <button>按钮1</button> <button&g...
H5技巧
Wecho的博客
04-03 369
html5-ajax页面回退-说的很详细http://www.cnblogs.com/51kata/p/5144773.html
JavaScript(DOM)排他和属性
Han_Zhou_Z的博客
12-02 1716
目录 一、排他思想 1、鼠标事件 二、属性操作 1、获取属性值 2、设置属性值 （1）固有属性值的设置 （2）对于用户自定义的属性值的设置 3、移出属性值 三、HTML5中自定义属性 1、自定义属性规范：data-属性名 2、实现方式 3、获取自定义属性值： 一、排他思想 定义：简单理解就是排除掉其他的（包括自己），然后再给自己设置想要实现的效果。总而言之，排他思想的实现步骤就是所有元素全部清除与设置当前元素。 案例：点击任意一个按钮，其他按钮不被选择，背景颜色变回原来的颜..
使用xpath实现document.querySelector样式选择器进行html解析（三）：实现样式选择器
文盲的专栏
06-30 4007
使用xpath实现document.querySelector样式选择器进行html解析（一）：将html转成xml使用xpath实现document.querySelector样式选择器进行html解析（二）：扩展一下xpath以便支持正则使用xpath实现document.querySelector样式选择器进行html解析（三）：实现样式选择器------------------------...
document.querySelector()方法
热门推荐
qq_44885775的博客
04-26 6万+
javascript dom 查找匹配
javascript 常用DomAPI总结
07-28
javascript 常用DomAPI总结
JavaScript获取DOM元素的11种方法总结
10-24
主要介绍了JavaScript获取DOM元素的11种方法总结,本文用分4大类11个方法总结如何获取DOM元素,需要的朋友可以参考下
innerText修改querySelector和getElementsByClassName所获取元素的文本
weixin_45545395的博客
07-08 1308
innerText修改querySelector和getElementsByClassName所获取元素的文本 写一个网页的JS时，innerText修改通过querySelector和getElementsByClassName所获取得的DOM元素中的文本时，遇到了一些问题。 利用querySelector和getElementsByClassName获取DOM元素会返回不同的值，但返回的数据类型都是对象。 <body> <div class="test1">手在键盘敲很轻
HTML DOM querySelector() 方法的使用与示例
debugtoday的博客
03-03 2250
HTML DOM querySelector() 方法的使用与示例
document.querySelector()选择器的用法
qq_36465515的博客
12-10 3600
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="myId"></div> <div class="myClass"></div> </body> <script type="text/javascript"> var d
介绍函数用法：document.querySelector
m0_57236802的博客
04-21 1万+
是一个 JavaScript 函数，它允许你通过提供一个 CSS 选择器来选择文档中的第一个匹配的元素。这个函数返回匹配的元素（如果找到了匹配项），否则返回。是一个非常有用的方法，因为它让你可以通过多种选择器轻松地选择和操作 DOM 元素。只返回第一个匹配的元素。如果你想选择文档中的所有匹配的元素，可以使用。这个函数返回一个包含所有匹配元素的 NodeList。是一个包含 CSS 选择器的字符串，用于查找和选择元素。这将选择文档中第一个类型为。这将选择文档中的第一个。
第二天 - Web APIs
weixin_39202130的博客
11-28 540
学习目标： 能够说出排他操作的一般实现步骤 能够使用html5中的dataset方式操作自定义属性 能够根据提示完成百度换肤的案例 能够根据提示完成全选案例 能够根据提示完成tab栏切换案例 能够区分元素节点、文本节点、属性节点 能够获取指定元素的父元素 能够获取指定元素的所有子元素 能够说出childNodes和children的区别 能够使用createElement创建页面元素 1.1. 排他操作 1.1.1 排他思想 如果有同一组元素，我们想要某一个元素实...
openlayers绘制经纬网格，有添加或者移除功能
最新发布
qq_52959651的博客
05-21 119
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
html2canvas 动态创建dom 转图片
07-16
总结来说，使用html2canvas库动态创建DOM并转换为图像的过程包括：引入库、创建canvas元素、动态创建DOM元素、将DOM元素添加到文档中、调用html2canvas函数进行转换、获取canvas数据并展示生成的图像。这样就可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值