【复习 自用】JavaScript知识汇总（DOM）

news2024/11/16 11:27:18

注：之前学过JavaScript，本贴仅用于复习(自用)，建议没基础的朋友先学基础。会混入typescript！

更新中~~~~~

Dom核心内容

  1. 创建节点
    ① document.write() 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
    ② innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘
    ③ innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
var arr = [];
for (var i = 0; i <= 100; i++) {
      arr.push('<a href="#">百度</a>');
}
inner.innerHTML = arr.join('');
  1. 增
    ①node.appendChild(child) 将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的 after 伪元素。
    ②node.insertBefore(child,指定元素)
    将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before 伪元素。
  2. 删
    node.removeChild(child)
    从 DOM 中删除一个子节点，返回删除的节点
  3. 改
    ①修改元素属性：src、href、title 等
    ②修改普通元素内容：innerHTML、innerText
    ③修改表单元素：value、type、disabled
    ④修改元素样式：style、className
  4. 查
    ①DOM提供的API方法：getElementById
    ②H5提供的新方法：querySelector、querySelectorAll (提倡)
    ③利用节点操作获取元素：父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling) 提倡
  5. 属性操作
    setAttribute：设置dom的属性值
    getAttribute：得到dom的属性值
    removeAttribute：移除属性
  • 如何获取页面元素
  1. 根据id获取： doucument.getElementByld(‘id名’)
<div id="time">2023-1-19</div>
<script>
    // 1.因为我们文档页面从上往下加载，所以得先有标签，所以script写在标签下面
    // 2.get 获得 element 元素 by 通过 驼峰命名法
    // 3.参数 id是大小写敏感的字符串
    // 4.返回的是一个元素对象
    var timer = document.getElementById('time');
    console.log(timer);
    // 5. console.dir 打印我们的元素对象，更好的查看里面的属性和方法
    console.dir(timer);
</script>
  1. 根据标签名获取：doucument.getElementsByTagName(‘标签名’);
<ul>
    <li>知否知否，应是等你好久</li>
    <li>知否知否，应是等你好久</li>
    <li>知否知否，应是等你好久</li>
    <li>知否知否，应是等你好久</li>
    <li>知否知否，应是等你好久</li>
</ul>
<script>
    // 1.返回的是获取过来元素对象的集合 以伪数组的形式存储
    var lis = document.getElementsByTagName('li');
    console.log(lis);
    console.log(lis[0]);
    // 2.依次打印,遍历
    for (var i = 0; i < lis.length; i++) {
        console.log(lis[i]);
    }
    // 3.如果页面中只有 1 个 li，返回的还是伪数组的形式
    // 4.如果页面中没有这个元素，返回的是空伪数组
</script>
  1. 根据标签名获取：还可以根据标签名获取某个元素（父元素）内部所有指定标签名的子元素,获取的时候不包括父元素自己。父元素必须是单个对象(必须指明是哪一个元素对象)，获取的时候不包括父元素自己
<script>
	//element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素
    var ol = document.getElementById('ol');
    console.log(ol.getElementsByTagName('li'));
</script>
  1. 通过H5新增方法获取
    document.getElementsByClassName(‘类名’)
    根据类名返回元素对象合集
    document.querySelector(‘选择器’)
document.querySelector('选择器');

// 切记里面的选择器需要加符号 
// 类选择器.box 
// id选择器 #nav
var firstBox = document.querySelector('.box');

document.querySelectorAll(‘选择器’)

  • 返回特殊元素
  • 返回body元素对象 document.body;
  • 返回html元素对象 document.documentElement;
  • 事件三要素
<script>
    // 点击一个按钮，弹出对话框
    // 1. 事件是有三部分组成  事件源  事件类型  事件处理程序   我们也称为事件三要素
    //(1) 事件源 事件被触发的对象   谁  按钮
    var btn = document.getElementById('btn');
    //(2) 事件类型  如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
    //(3) 事件处理程序  通过一个函数赋值的方式 完成
    btn.onclick = function() {
        alert('点秋香');
    }
</script>
  • 执行事件的步骤
<script>
    // 执行事件步骤
    // 点击div 控制台输出 我被选中了
    // 1. 获取事件源
    var div = document.querySelector('div');
    // 2.绑定事件 注册事件
    // div.onclick 
    // 3.添加事件处理程序 
    div.onclick = function() {
        console.log('我被选中了');
    }
</script>
  • 鼠标事件
    在这里插入图片描述
  • 改变元素内容：从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉。
<body>
    <div></div>
    <p>
        我是文字
        <span>123</span>
    </p>

    <script>
        // innerText 和 innerHTML的区别 
        // 1. innerText 不识别html标签,去除空格和换行
        var div = document.querySelector('div');
        div.innerText = '<strong>今天是：</strong> 2019';
        // 2. innerHTML 识别html标签 保留空格和换行的
        div.innerHTML = '<strong>今天是：</strong> 2019';
        // 这两个属性是可读写的  可以获取元素里面的内容
        var p = document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);
    </script>
</body>

在这里插入图片描述

  • 改变元素属性
// img.属性
img.src = "xxx";

input.value = "xxx";
input.type = "xxx";
input.checked = "xxx";
input.selected = true / false;
input.disabled = true / false;
  • 改变样式属性
  1. 行内样式操作
// element.style
div.style.backgroundColor = 'pink';
div.style.width = '250px';
  1. 类名样式操作
<body>
    <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>
</body>

在这里插入图片描述

  • 排他思想
<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</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>
</body>

在这里插入图片描述

  • 获取/设置/移除属性
<body>
    <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>
</body>
  • 设置H5自定义属性
<div data-index = "1"></>
// 或者使用JavaScript设置
div.setAttribute('data-index',1);
  • 获取H5自定义属性
<body>
    <div getTime="20" data-index="2" data-list-name="andy"></div>
    <script>
        var div = document.querySelector('div');
        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>
</body>
  • dom树节点
    元素节点：nodeType 为1
    属性节点：nodeType 为2
    文本节点：nodeType 为3(文本节点包括文字、空格、换行等)
  • dom树——父节点
<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">×</span>
        </div>
    </div>

    <script>
        // 1. 父节点 parentNode
        var erweima = document.querySelector('.erweima');
        // var box = document.querySelector('.box');
        // 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
        console.log(erweima.parentNode);
    </script>
</body>
  • 子节点
<body>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <ol>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ol>
    <script>
        // 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);
    </script>
</body>
  • 第一个子节点
    如果想要第一个子元素节点，可以使用 parentNode.chilren[0]
  • 最后一个子节点
    如果想要最后一个子元素节点，可以使用
    parentNode.chilren[parentNode.chilren.length - 1]
  • 兄弟结点
<body>
    <div>我是div</div>
    <span>我是span</span>
    <script>
        var div = document.querySelector('div');
        // 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
        console.log(div.nextSibling);		// #text
        console.log(div.previousSibling);	// #text
        // 2. nextElementSibling 得到下一个兄弟元素节点
        console.log(div.nextElementSibling);	//<span>我是span</span>
        console.log(div.previousElementSibling);//null
    </script>
</body>

为了解决兼容性问题可以自己封装一个兼容性函数

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

参考资料

  • https://blog.csdn.net/Augenstern_QXL/article/details/115416921

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/173607.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

云原生技能树-docker caontainer 操作

云原生技能树-docker caontainer 操作

运行 一个Docker镜像(image)运行后&#xff0c;就是一个容器实例&#xff0c;称为container 以镜像hello-world为例&#xff0c;启动容器&#xff1a; docker container run -it hello-world 可以看到输出了Hello World 信息&#xff1a; 以下描述错误的是&#xff1f; 答…
阅读更多...
数字逻辑理论——从卡诺图到门电路

数字逻辑理论——从卡诺图到门电路

卡诺图化简 卡诺图化简 第一步&#xff1a;在卡诺图中圈出相邻为1的小方格&#xff08;方格的个数为2m2^{m}2m&#xff09;&#xff0c;圈里面的1越多越好&#xff0c;并且这个小方格可以重复使用。 第二步&#xff1a;上一步中的方格或者圈出来的方框——每一个都代表一个与…
阅读更多...
Linux软件安装及管理程序

Linux软件安装及管理程序

Linux安装及管理程序Linux软件安装及管理程序一、Linux应用程序基础二、RPM软件包管理工具2.1、RPM介绍2.2、RPM命令三、源码编译安装四、yum安装Linux软件安装及管理程序 一、Linux应用程序基础 应用程序与系统命令的关系 角色系统命令应用程序文件位置般在/bin和/sbin目录…
阅读更多...
linux系统中实现智能家居的基本方法

linux系统中实现智能家居的基本方法

大家好&#xff0c;今天主要和大家分享一下&#xff0c;智能家居物联网的基本实现与操作方法。 目录 第一&#xff1a;智能家居基本简介 第二&#xff1a;测试WIFI模块功能 第三&#xff1a;智能家居物联UI界面开发 第四&#xff1a;核心代码的具体实现 第五&#xff1a;最…
阅读更多...
【阅读笔记】《重构》 第三四章

【阅读笔记】《重构》 第三四章

第三章 代码的味道 DuplicatedCode(重复代码) 同一个类的两个函数含有相同的表达式两个互为兄弟的子类含有相同表达式两个毫不相干的类出现重复代码 LongMethod(过长函数) 函数不宜过长&#xff0c;函数越长越难理解如果想利用单个类做太多事情&#xff0c;其内往往就会出现…
阅读更多...
联合证券|港股再融资“春江水暖” 资本争购热门赛道企业

联合证券|港股再融资“春江水暖” 资本争购热门赛道企业

进入2023年&#xff0c;港股再融资商场有所回暖。到1月18日&#xff0c;已有27家港股上市公司发布拟配售股份&#xff08;简称“配股”&#xff09;再融资&#xff0c;募资总额164.01亿港元&#xff0c;较上一年同期增加148.16%。其间&#xff0c;微盟集团的配股再融资吸引了众…
阅读更多...
fpga实操训练（lcd测试）

fpga实操训练（lcd测试）

【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】 前面我们测试过vga输出，当时是找了一个老式的显示器来完成的，也就是本身自带vga接口的显示器。但是，现在市面上大部分显示器都是默认支持hdmi接口的。所以说，如果真的想用fpga测…
阅读更多...
都说InnoDB好，那还要不要使用Memory引擎？

都说InnoDB好，那还要不要使用Memory引擎？

我在上一篇文章末尾留给你的问题是：两个 group by 语句都用了 order by null，为什么使用内存临时表得到的语句结果里，0 这个值在最后一行；而使用磁盘临时表得到的结果里，0 这个值在第一行？ 今天我们就来看看，出现这个问题的原因吧。 内存表的数据组织结构 为了便于分…
阅读更多...
如何在SpringBoot项目中访问静态资源

如何在SpringBoot项目中访问静态资源

在springboot项目中如果要在不集成templates的情况下访问静态资源需要做以下配置 1.在项目的application.yml文件中做如下配置 spring:profiles:active: devmvc:view:prefix: /suffix: .html 重点在 配置后生成为WebMvcProperties 配置类。该配置类中有一个内部类View Conf…
阅读更多...
各式各样图标的特点

各式各样图标的特点

笔者近期在翻看各种样式的图标&#xff0c;逛了下 Iconfont、IconFinder 等图标网站&#xff0c;现根据自己的经验&#xff0c;总结了一些图标特点的描述用语 线性/面性/线面组合平面/立体无层次感&#xff08;或阴影&#xff09;/有层次感&#xff08;或阴影&#xff09;无填…
阅读更多...
Oracle强制加了hint实效三种连接方式使用场合判断

Oracle强制加了hint实效三种连接方式使用场合判断

开发写了一个语句使用了connect by level函数 SELECT DISTINCT CTMID FROM ( SELECT CTMID, REGEXP_SUBSTR(FLTUSERIDSTR, ‘[^;]’, 1, l) AS userid FROM s_userinfo,(SELECT LEVEL l FROM DUAL CONNECT BY LEVEL<300) b WHERE l < LENGTH(FLTUSERIDSTR) - LENGTH(rege…
阅读更多...
链表的算法题

链表的算法题

目录 题型一、克隆含有rand指针的链表 笔试&#xff1a;哈希表 面试&#xff1a;不用容器&#xff0c;模拟哈希表的功能 题型二、给一个单链表头节点Head&#xff0c;判断是否构成回文 题型三、将单链表按某值划分为左边小&#xff0c;中间相等&#xff0c;右边大 6个变量…
阅读更多...
Allegro如何设置创建Pin Pair的快捷键操作指导

Allegro如何设置创建Pin Pair的快捷键操作指导

Allegro如何设置创建Pin Pair的快捷键操作指导 在做PCB设计的时候需要做一组信号的等长，需要使用到创建Pin Pair的功能，如下图，如果每个网络都右键去选择添加比较浪费时间，如下图 Allegro支持给创建一个Create Pin Pair的快捷键位 具体操作如下 打开规则管理器选择Tools
阅读更多...
单调栈与单调队列

单调栈与单调队列

单调栈与单调队列一、单调栈1.1 思路1.2 例题&#xff1a;单调栈二、单调队列2.1 思路2.2 例题&#xff1a;滑动窗口一、单调栈 1.1 思路 单调栈主要解决以下问题&#xff1a; 1️⃣ 寻找下一个更大元素 2️⃣ 寻找前一个更大元素 3️⃣ 寻找下一个更小元素 4️⃣ 寻找前一个…
阅读更多...
理性和感性 - 如何对待错误

理性和感性 - 如何对待错误

上次的博客&#xff0c; 我写了一些关于 软件开发中的理性和感性决定 的故事。 不论是感性还是理性&#xff0c;我们的目的就是要把软件交给用户去用&#xff0c; 在软件行业中有这样一句俗话&#xff1a; 当你把产品交给用户的时候&#xff0c;你的学习才刚刚开始。 当然每个团…
阅读更多...
【设计模式】结构型模式·桥接模式

【设计模式】结构型模式·桥接模式

学习汇总入口【23种设计模式】学习汇总(数万字讲解体系思维导图) 写作不易&#xff0c;如果您觉得写的不错&#xff0c;欢迎给博主来一波点赞、收藏~让博主更有动力吧&#xff01; 一.概述 将抽象与实现分离&#xff0c;使它们可以独立变化。用组合关系代替继承关系&#xff0c…
阅读更多...
华为数字化转型之道 结语 数字化转型的8个成功要素

华为数字化转型之道 结语 数字化转型的8个成功要素

结语 数字化转型的8个成功要素 华为开展数字化转型的过程中，积累了一些经验和教训，总结起来有如下成功要素。 1. 一把手担责 要做好数字化转型，企业家就要有战略决心、信心、耐心。数字化转型一定是企业“一把手工程”，需要企业家自上而下地推动并在企业内达成广泛共识。…
阅读更多...
免费开题报告|基于SpringBoot+Vue的校内跑腿平台

免费开题报告|基于SpringBoot+Vue的校内跑腿平台

作者主页&#xff1a;编程指南针 作者简介&#xff1a;Java领域优质创作者、CSDN博客专家 、掘金特邀作者、多年架构师设计经验、腾讯课堂常驻讲师 主要内容&#xff1a;Java项目、毕业设计、简历模板、学习资料、面试题库、技术互助 收藏点赞不迷路 关注作者有好处 文末获取源…
阅读更多...
Android 深入系统完全讲解（29）

Android 深入系统完全讲解（29）

MediaMuxer 封装器 MediaMuxer 最多仅支持一个视频 track 和一个音频 track&#xff0c;所以如果有多个音频 track 可以先 把它们混合成为一个音频 track 然后再使用 MediaMuxer 封装到 mp4 容器中。 MediaMuxer 支持输出格式为 MP4&#xff0c;webm 和 3gp. 默认我们就用 mp4.…
阅读更多...
产生聚类数据集sklearn.datasets.make_blobs()

产生聚类数据集sklearn.datasets.make_blobs()

【小白从小学Python、C、Java】 【计算机等级考试500强双证书】 【Python-数据分析】 产生聚类数据集 sklearn.datasets.make_blobs() [太阳]选择题 以下python代码结果错误的一项是? import matplotlib.pyplot as plt from sklearn.datasets import make_blobs data,labelmak…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023