文章标题

一、排他操作
- 1.排他思想
- 2.案例：百度换肤
- 3.案例：表格隔行变色
- 4.案例：全选
二、自定义属性操作
- 1.获取属性值
- 2.设置属性值
- 3.移出属性
- 4.案例：tab栏
- 5.H5自定义属性
三、节点操作
- 1.节点概述
- 2.节点层级
- 3.父级节点
- 4.子节点
- 5.兄弟节点
- 6.创建节点
- 7.添加节点
- 8.删除节点
- 9.复制（克隆）节点
- 案例新浪下拉菜单
- 案例简易留言板

一、排他操作

1.排他思想

在这里插入图片描述

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：

所有元素全部清除样式（干掉其他人）
给当前元素设置样式（留下我自己）
注意顺序不能颠倒，首先干掉其他人，再设置自己

案例代码：

    <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';}}</script>

2.案例：百度换肤

案例分析：

这个案例是给一组元素注册事件
给4张图片利用循环注册事件点击事件
当点击图片使，页面背景也相应改为当前图片
核心算法：把当前图片的src路径去过来，给body做为背景即可

案例代码：

<body><ul class="baidu"><li><img src="images/1.jpg"></li><li><img src="images/2.jpg"></li><li><img src="images/3.jpg"></li><li><img src="images/4.jpg"></li></ul><script>// 1. 获取元素 var imgs = document.querySelector('.baidu').querySelectorAll('img');// console.log(imgs);// 2. 循环注册事件 for (var i = 0; i < imgs.length; i++) {imgs[i].onclick = function() {// this.src 就是我们点击图片的路径   images/2.jpg// console.log(this.src);// 把这个路径 this.src 给body 就可以了document.body.style.backgroundImage = 'url(' + this.src + ')';}}</script>
</body>

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

3.案例：表格隔行变色

案例分析：

1.用到鼠标事件鼠标经过onmouseover 鼠标离开onmouseout
2. 核心思路：鼠标经过tr行，当前的行变背景颜色，鼠标离开去掉当前的背景颜色
3. 注意：第一行不需要变换颜色，因此我们获取的使tbody里面的行

案例代码：

<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>// 1.获取元素 获取的是 tbody 里面所有的行var trs = document.querySelector('tbody').querySelectorAll('tr');// 2. 利用循环绑定注册事件for (var i = 0; i < trs.length; i++) {// 3. 鼠标经过事件 onmouseovertrs[i].onmouseover = function() {// console.log(11);this.className = 'bg';}// 4. 鼠标离开事件 onmouseouttrs[i].onmouseout = function() {this.className = '';}}</script>
</body>

4.案例：全选

在这里插入图片描述案例分析：

全选和取消全选做法：让下面所有复选框的checked属性（选中状态）跟随全选按钮即可
下面复选
框需要全部选中，上面全选才能选中做法：给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没有选中的，如果有一个没有选中，上面全选就不选中
可以设置一个变量，来控制全选是否选中

<body><div class="wrap"><table><thead><tr><th><input type="checkbox" id="j_cbAll" /></th><th>商品</th><th>价钱</th></tr></thead><tbody id="j_tb"><tr><td><input type="checkbox" /></td><td>iPhone8</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></tbody></table></div><script>// 1. 全选和取消全选做法：  让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可// 获取元素var j_cbAll = document.getElementById('j_cbAll');var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');// 全选按钮注册事件j_cbAll.onclick = function() {// this.checked 当前复选框的选中状态console.log(this.checked);for (var 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() {// flag 控制全选按钮是否选中var flag = true;// 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中for (var i = 0; i < j_tbs.length; i++) {if (!j_tbs[i].checked) {flag = false;break;}}// 设置全选按钮的状态j_cbAll.checked = flag;}}</script>
</body>

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

二、自定义属性操作

1.获取属性值

在这里插入图片描述
案例代码：

    <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 属性的意思 我们程序员自己添加的属性我们称为自定义属性 indexconsole.log(div.getAttribute('id'));console.log(div.getAttribute('index'));</script>

2.设置属性值

在这里插入图片描述
案例代码：

<body><script>// 2. 设置元素属性值// (1) element.属性= '值'div.id = 'test';div.className = 'navs';// (2) element.setAttribute('属性', '值');  主要针对于自定义属性div.setAttribute('index', 2);div.setAttribute('class', 'footer'); // class 特殊  这里面写的就是</script>
</body>

3.移出属性

在这里插入图片描述

		// class 不是className// 3 移除属性 removeAttribute(属性)    div.removeAttribute('index');

4.案例：tab栏

在这里插入图片描述
案例代码：

<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>// 获取元素var tab_list = document.querySelector('.tab_list');var lis = tab_list.querySelectorAll('li');var items = document.querySelectorAll('.item');// for循环，给选项卡绑定点击事件for (var i = 0; i < lis.length; i++) {// 开始给5个小li 设置索引号 lis[i].setAttribute('index', i);lis[i].onclick = function() {// 1. 上的模块选项卡，当前这一个底色会是红色，其余不变（排他思想）// 干掉所有人 其余的li清除 class 这个类for (var i = 0; i < lis.length; i++) {lis[i].className = '';}// 留下我自己 this.className = 'current';// 2. 下面的显示内容模块var index = this.getAttribute('index');console.log(index);// 干掉所有人 让其余的item 这些div 隐藏for (var i = 0; i < items.length; i++) {items[i].style.display = 'none';}// 留下我自己 让对应的item 显示出来items[index].style.display = 'block';}}</script></body>

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

5.H5自定义属性

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

自定义属性获取是通过getAttribute(‘属性’) 获取。

但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。

H5给我们新增了自定义属性：
在这里插入图片描述
案例代码：

    <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>

三、节点操作

1.节点概述

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。

HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。
在这里插入图片描述
一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。

2.节点层级

利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。
在这里插入图片描述

3.父级节点

在这里插入图片描述
案例代码：

    <div class="demo"><div class="box"><span class="erweima">×</span></div></div><script>// 1. 父节点 parentNodevar erweima = document.querySelector('.erweima');// var box = document.querySelector('.box');// 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 nullconsole.log(erweima.parentNode);</script>

4.子节点

所有子节点
在这里插入图片描述 子元素节点

案例代码：

    <ul><li>我是li</li><li>我是li</li><li>我是li</li><li>我是li</li></ul><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>

第一个子节点
在这里插入图片描述
最后一个子节点

第一个元素节点

最后一个子元素节点
在这里插入图片描述

案例代码：

    <ol><li>我是li1</li><li>我是li2</li><li>我是li3</li><li>我是li4</li><li>我是li5</li></ol><script>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]);</script>

5.兄弟节点

在这里插入图片描述
案例代码：

    <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>

在这里插入图片描述
案例代码：

<body>
<script>function getNextElementSibling(element) {var el = element;while (el = el.nextSibling) {if (el.nodeType === 1) {return el;}}return null;}  </script>
</body>

6.创建节点

在这里插入图片描述

7.添加节点

在这里插入图片描述
案例代码：

    <ul><li>123</li></ul><script>// 1. 创建节点元素节点var li = document.createElement('li');// 2. 添加节点 node.appendChild(child)  node 父级  child 是子级 后面追加元素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>

8.删除节点

在这里插入图片描述
案例代码：

    <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>

9.复制（克隆）节点

在这里插入图片描述
案例代码：

    <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>

案例新浪下拉菜单

在这里插入图片描述

<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>// 1. 获取元素var nav = document.querySelector('.nav');var lis = nav.children; // 得到4个小li// 2.循环注册事件for (var i = 0; i < lis.length; i++) {lis[i].onmouseover = function() {this.children[1].style.display = 'block';}lis[i].onmouseout = function() {this.children[1].style.display = 'none';}}</script>
</body>

效果展示
在这里插入图片描述

案例简易留言板

在这里插入图片描述
案例代码：

<body><textarea name="" id=""></textarea><button>发布</button><ul></ul><script>// 1. 获取元素var btn = document.querySelector('button');var text = document.querySelector('textarea');var ul = document.querySelector('ul');// 2. 注册事件btn.onclick = function() {if (text.value == '') {alert('您没有输入内容');return false;} else {// console.log(text.value);// (1) 创建元素var li = document.createElement('li');// 先有li 才能赋值li.innerHTML = text.value;li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";// (2) 添加元素// ul.appendChild(li);ul.insertBefore(li, ul.children[0]);//删除留言var a = document.querySelectorAll('a');for (var i = 0; i < a.length; i++) {a[i].onclick = function() {ul.removeChild(this.parentNode);}}}}</script>
</body>

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

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

用户代码和操作系统代码是如何在cup上面运行的（用户态和内核态）
1.CPU的四种状态与操作系统的两种状态(用户态和内核态) 首先我们要知道CPU有四种状态，分别为编号为0(特权最大)到3(特权最小)，以及3个受保护的主要资源：内存、I/O端口和执行某些机器指令的能力。操作系统它基于CPU之上，只用到了C…...
2024/4/27 22:47:06
Android开发【社招】MS、TX 一点总结
普通本科毕业2年，从事Android开发，年后有看机会打算，最近投递并且面了两家公司，分享下一共做了这些准备： 1 ： leetcode刷几十道找找感觉 2 ： 准备英文自我介绍 3 ： 项目整理 4…...
2024/4/28 7:35:47
【面霸系列 - 3】初级java如何挖掘自身的优势
文章目录背景初级开发的自身价值1、自学能力2、团队协作能力、沟通能力3、适应能力、吃苦耐劳4、干一行、爱一行最后贴几个面试官选人的方式那么初级菜鸟如何选择公司呢？技术风口马上就金三银四，一个初级的菜鸟，刚刚入行，经常会有…...
2024/4/28 4:22:48
在Python中如何优雅地创建表格
1. 引言如果能够将我们的无序数据快速组织成更易读的格式，对于数据分析非常有帮助。 Python 提供了将某些表格数据类型轻松转换为格式良好的纯文本表格的能力，这就是 tabulate 库。闲话少说，我们直接开始吧。 ：） …...
2024/4/28 16:10:27
[每日一题][leetcode篇] 1395. 统计作战单位数
leetcode 1395. 统计作战单位数题目链接：1395. 统计作战单位数原题： n 名士兵站成一排。每个士兵都有一个独一无二的评分 rating 。每 3 个士兵可以组成一个作战单位，分组规则如下： 从队伍中选出下标分别为 i、j、k 的 3…...
2024/4/7 5:38:48
数字集成电路-电路、系统与设计（第二版）第8章数字集成电路的实现策略
第8章数字集成电路的实现策略 8.2从定制到半定制以及结构化阵列的设计方法数字电路实现方法：定制半定制半定制：1.基于单元：1).标准单元编译单元 2).宏单元 2.基于阵列：1).预扩散（门阵列） 2).预布线…...
2024/4/26 22:07:52
Prometheus+Grafana学习(八)部署AlertManager
文章目录前言一、安装AlertManager1、下载2、安装AlertManager二、配置AlertManager1、配置Prometheus2、配置通知路由和接收器2.1、global2.2、templates2.3、route2.4、receivers2.5、inhibit_rules2.6、配置示例(邮件告警)2.6.1配置alertmanager2.6.2配置prometheus的rule_f…...
2024/4/5 4:48:37
流处理系统简介
主要内容来自 DDIA 第十一章流处理系统，还有自己关于 Golang 流计算的一些调研背景计算服务可按以下方式分为三类： 在线服务：当收到请求时，服务尽可能快的处理并且发挥一个响应，如常见 Web 服务。批处理(离线)系…...
2024/4/27 7:52:55
Unity技术-模型规范
物是人非，可我依旧穿着嫁衣，在黑夜中寻找你的身影。本文约2.5千字，新手阅读需要7分钟，复习需要3分钟【收藏随时查阅不再迷路】 👉关于作者众所周知，人生是一个漫长的流程，不断克服困难&#…...
2024/4/27 21:25:31
三、Spring Boot 整合Filter
三、Spring Boot 整合Filter（一）、方式一（注解扫描）1、启动类(Application)2、创建拦截器（Filter）3、启动（二）、方式二1、创建过滤器（Filter）2、创建servlet3…...
2024/4/28 13:51:37
B+Tree详解
二叉查找树： 二叉树具有以下性质：左子树的键值小于根的键值，右子树的键值大于根的键值。但是当二叉查找树在极端情况下如果编程这样： 查询效率就低了所谓查询效率：由树的深度决定，每深入一层&#xff0…...
2024/4/14 11:31:00
[Nodejs] 8. 认识req和res-----获取和使用
接上代码，回调函数中加入参数如下，并调end()给前端传信息 const http require(http);// req: request, res: response const server http.createServer((req, res) > {console.log(已经收到http请求);res.end(hello world) // res返回信息给前端 …...
2024/4/28 3:20:32
【自动驾驶】Eigen变换矩阵的几种用法Matrix4f、Affine3f、
方法1： /* 提示: 变换矩阵工作原理 :|-------> 变换矩阵列| 1 0 0 x | \| 0 1 0 y | }-> 左边是一个3阶的单位阵(无旋转)| 0 0 1 z | /| 0 0 0 1 | -> 这一行用不到 (这一行保持 0,0,0,1)方法一 #1: 使用 Matrix4f这个是“手工方法”，可…...
2024/4/19 21:08:41
MAC 安装和连接 mongodb 数据库
最近在学习数据库，学习到了关系型数据库 My SQL 和非关系型数据库 mongodb，因为后面我想我在做自动化测试的过程中，将在执行测试用例的时候，生成log日志，自动保存到我们的数据库当中，这样就可以进行一个长…...
2024/4/7 5:38:44
Spring三级缓存解决循环依赖问题详解
spring三级缓存解决循环依赖问题详解前言这段时间阅读了spring IOC部分的源码。在学习过程中，自己有遇到过很多很问题，在上网查阅资料的时候，发现很难找到一份比较全面的解答。现在自己刚学习完，一方面出于对自己这段学习的一…...
2024/4/18 3:34:09
1.20号
...
2024/4/28 12:57:02
5_4_Chess(四）普通落子
文章目录1、效果2、chess.cpp3、chess.h1、效果 2、chess.cpp #include "chess.h"Chess::Chess(QWidget *parent): QWidget(parent) {Init(); }Chess::~Chess() {}//-----------events------------- //画背景绘图事件里 void Chess::paintEvent(QPaintEvent *){QPa…...
2024/4/28 5:30:35
JVM之执行引擎
文章目录1、执行引擎概述2、Java 代码编译和执行过程2.1、解释执行和即时编译2.2、解释器和编译器3、机器码指令汇编语言3.1、机器码3.2、指令和指令集3.3、汇编语言3.4、高级语言3.5、程序编译流程3.6、字节码4、解释器5、JIT 编译器5.1、为什么还需要解释器5.2、即时编译器…...
2024/4/28 14:57:14
腾讯云搭建Socks5一系列及相关内容
腾讯云搭建Socks5多IP代理服务器实现游戏单窗口单IP 腾讯云多IP Socks5搭建教程配合代理工具实现单窗口单IP1.多IP服务器选择2.服务器购买3.创建弹性网卡，绑定弹性公网IP 实现多IP4.如何更换IP5.服务器网卡绑定内网IP6.使用CCProxy 搭建socks5服务器7.socks5IP如何…...
2024/4/28 4:33:24
Redis核心技术与实战-学习笔记（二）
一.redis数据类型和底层数据结构的对应关系二.Redis 使用哈希表实现从键到值的快速访问哈希表的O(1)复杂度和快速查找特性一个哈希表，其实就是一个数组，数组的每个元素称为一个哈希桶。一个哈希表是由多个哈希桶组成的，每个哈希桶中保…...
2024/4/14 11:31:30

JavaScript-DOM2

文章标题

一、排他操作

1.排他思想

2.案例：百度换肤

3.案例：表格隔行变色

4.案例：全选

二、自定义属性操作

1.获取属性值

2.设置属性值

3.移出属性

4.案例：tab栏

5.H5自定义属性

三、节点操作

1.节点概述

2.节点层级

3.父级节点

4.子节点

5.兄弟节点

6.创建节点

7.添加节点

8.删除节点

9.复制（克隆）节点

案例新浪下拉菜单

案例简易留言板

相关文章

最新文章

JavaScript-DOM2

文章标题

一、排他操作

1.排他思想

2.案例：百度换肤

3.案例：表格隔行变色

4.案例：全选

二、自定义属性操作

1.获取属性值

2.设置属性值

3.移出属性

4.案例：tab栏

5.H5自定义属性

三、节点操作

1.节点概述

2.节点层级

3.父级节点

4.子节点

5.兄弟节点

6.创建节点

7.添加节点

8.删除节点

9.复制（克隆）节点

案例 新浪下拉菜单

案例 简易留言板

相关文章

最新文章

案例新浪下拉菜单

案例简易留言板