WebAPI编程（第一天，第二天）
WebAPI编程（第一天，第二天）
- day01 - Web APIs
-
- 1.1. Web API介绍
-
- 1.1.1 API的概念
- 1.1.2 Web API的概念
- 1.1.3 API 和 Web API 总结
- 1.2. DOM 介绍
-
- 1.2.1 什么是DOM
- 1.2.2. DOM树
- 1.3. 获取元素
-
- 1.3.1. 根据ID获取
- 1.3.2. 根据标签名获取元素
- 1.3.3. H5新增获取元素方式
- 1.3.4 获取特殊元素（body，html）
- 1.4. 事件基础
-
- 1.4.1. 事件概述
- 1.4.2. 事件三要素
- 1.4.3. 执行事件的步骤
- 1.4.4. 常见的鼠标事件
- 1.4.5. 分析事件三要素
- 1.5. 操作元素
-
- 1.5.1. 改变元素内容（获取或设置）
- 1.5.2. 常用元素的属性操作
- 1.5.3. 案例：分时问候
- 1.5.4. 表单元素的属性操作
- 1.5.5. 案例：仿京东显示密码
- 1.5.6. 样式属性操作
-
- 方式1：通过操作style属性
- 案例：淘宝点击关闭二维码
- 案例：循环精灵图背景
- 案例：显示隐藏文本框内容
- 方式2：通过操作className属性
- 1.6. 今日总结
- day02 - Web APIs
-
- 1.1. 排他操作
-
- 1.1.1 排他思想
- 1.2 案例：百度换肤
- 1.3 案例：表格隔行变色
- 1.4 案例：全选
- 1.5. 自定义属性操作
-
- 1.5.1 获取属性值
- 1.5.2. 设置属性值
- 1.5.3. 移出属性
- 1.5.4. 案例：tab栏
- 1.5.5. H5自定义属性
- 1.6. 节点操作
-
- 1.6.1. 节点概述
- 1.6.2. 节点层级
- 1.6.3. 父级节点
- 1.6.4. 子节点
- 1.6.5. 案例：新浪下拉菜单
- 1.6.6. 兄弟节点
- 1.6.7. 创建节点
- 1.6.8. 添加节点
- 1.6.9. 案例：简单版发布留言
day01 - Web APIs
学习目标：
能够通过ID来获取元素
能够通过标签名来获取元素
能够通过class来获取元素
能够通过选择器来获取元素
能够获取body和html元素
能够给元素注册事件
能够修改元素的内容
能够区分innerText和innerHTML的区别
能够修改像div这类普通元素的属性
能够修改表单元素的属性
能够修改元素的样式属性
1.1. Web API介绍
1.1.1 API的概念
API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可。
举例解释什么是API。
例如，
C语言中有一个函数 fopen()可以打开硬盘上的文件，这个函数对于我们来说，就是一个C语言提供的打开文件的工具。
javascript中有一个函数alert()可以在页面弹一个提示框，这个函数就是js提供的一个弹框工具。
这些工具（函数）由编程语言提供，内部的实现已经封装好了，我们只要学会灵活的使用这些工具即可。
1.1.2 Web API的概念
Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。
现阶段我们主要针对于浏览器讲解常用的 API , 主要针对浏览器做交互效果。比如我们想要浏览器弹出一个警示框， 直接使用 alert(‘弹出’)
MDN 详细 API : https://developer.mozilla.org/zh-CN/docs/Web/API
因为 Web API 很多，所以我们将这个阶段称为 Web APIs。
此处的 Web API 特指浏览器提供的一系列API(很多函数或对象方法)，即操作网页的一系列工具。例如：操作html标签、操作页面地址的方法。
1.1.3 API 和 Web API 总结
-
API 是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现
-
Web API 主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。
-
Web API 一般都有输入和输出（函数的传参和返回值），Web API 很多都是方法（函数）
-
学习 Web API 可以结合前面学习内置对象方法的思路学习
1.2. DOM 介绍
1.2.1 什么是DOM
文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。
W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。
DOM是W3C组织制定的一套处理 html和xml文档的规范，所有的浏览器都遵循了这套标准。
1.2.2. DOM树
DOM树 又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。
- 文档：一个页面就是一个文档，DOM中使用document表示
- 元素：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示
- 节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示
1.3. 获取元素
为什么要获取页面元素？
例如：我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，再对其进行操作。
1.3.1. 根据ID获取
语法：document.getElementById(id)
作用：根据ID获取元素对象
参数：id值，区分大小写的字符串
返回值：元素对象 或 null
案例代码
<body><div id="time">2019-9-9</div><script>// 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面var timer = document.getElementById('time');console.log(timer);console.log(typeof timer);// console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法console.dir(timer);</script>
</body>
1.3.2. 根据标签名获取元素
语法：document.getElementsByTagName('标签名') 或者 element.getElementsByTagName('标签名')
作用：根据标签名获取元素对象
参数：标签名
返回值：元素对象集合（伪数组，数组元素是元素对象）
案例代码
<body><ul><li>知否知否，应是等你好久11</li><li>知否知否，应是等你好久22</li><li>知否知否，应是等你好久33</li><li>知否知否，应是等你好久44</li><li>知否知否，应是等你好久55</li></ul><ul id="nav"><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. element.getElementsByTagName() 可以得到这个元素里面的某些标签var nav = document.getElementById('nav'); // 这个获得nav 元素var navLis = nav.getElementsByTagName('li');console.log(navLis);</script>
</body><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><ul><li>知否知否，应是等你好久11</li><li>知否知否，应是等你好久11</li><li>知否知否，应是等你好久11</li><li>知否知否，应是等你好久11</li></ul><ol id="ol"><li>生僻字</li><li>生僻字</li><li>生僻字</li><li>生僻字</li></ol><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. 如果页面中只有一个li 返回的还是伪数组的形式 // 4. 如果页面中没有这个元素 返回的是空的伪数组的形式// 5. element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素var ol = document.getElementsByTagName('ol'); // [ol]console.log(ol[0].getElementsByTagName('li'));var ol1 = document.getElementById('ol');console.log(ol1.getElementsByTagName('li'));</script>
</body></html>
注意：getElementsByTagName()获取到是动态集合，即：当页面增加了标签，这个集合中也就增加了元素。
1.3.3. H5新增获取元素方式
案例代码
<body><div class="box">盒子1</div><div class="box">盒子2</div><div id="nav"><ul><li>首页</li><li>产品</li></ul></div><script>// 1. getElementsByClassName 根据类名获得某些元素集合var boxs = document.getElementsByClassName('box');console.log(boxs);// 2. querySelector 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 .box #navvar firstBox = document.querySelector('.box');console.log(firstBox);var nav = document.querySelector('#nav');console.log(nav);var li = document.querySelector('li');console.log(li);// 3. querySelectorAll()返回指定选择器的所有元素对象集合var allBox = document.querySelectorAll('.box');console.log(allBox);var lis = document.querySelectorAll('li');console.log(lis);</script>
</body>
1.3.4 获取特殊元素（body，html）
// 1.获取body 元素var bodyEle = document.body;console.log(bodyEle);console.dir(bodyEle);// 2.获取html 元素// var htmlEle = document.html;var htmlEle = document.documentElement;console.log(htmlEle);
1.4. 事件基础
1.4.1. 事件概述
JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。
简单理解： 触发— 响应机制。
网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。
1.4.2. 事件三要素
- 事件源（谁）：触发事件的元素
- 事件类型（什么事件）： 例如 click 点击事件
- 事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数
案例代码
<body><button id="btn">唐伯虎</button><script>// 点击一个按钮，弹出对话框// 1. 事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素//(1) 事件源 事件被触发的对象 谁 按钮var btn = document.getElementById('btn');//(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下//(3) 事件处理程序 通过一个函数赋值的方式 完成btn.onclick = function() {alert('点秋香');}</script>
</body>
1.4.3. 执行事件的步骤
案例代码
<body><div>123</div><script>// 执行事件步骤// 点击div 控制台输出 我被选中了// 1. 获取事件源var div = document.querySelector('div');// 2.绑定事件 注册事件// div.onclick // 3.添加事件处理程序 div.onclick = function() {console.log('我被选中了');}</script>
</body>
1.4.4. 常见的鼠标事件
1.4.5. 分析事件三要素
-
下拉菜单三要素
-
关闭广告三要素
1.5. 操作元素
JavaScript的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。（注意：这些操作都是通过元素对象的属性实现的）
1.5.1. 改变元素内容（获取或设置）
innerText改变元素内容
<body><button>显示当前系统时间</button><div>某个时间</div><p>1123</p><script>// 当我们点击了按钮， div里面的文字会发生变化// 1. 获取元素 var btn = document.querySelector('button');var div = document.querySelector('div');// 2.注册事件btn.onclick = function() {// div.innerText = '2019-6-6';div.innerHTML = getDate();}function getDate() {var date = new Date();// 我们写一个 2019年 5月 1日 星期三var year = date.getFullYear();var month = date.getMonth() + 1;var dates = date.getDate();var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];var day = date.getDay();return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];}</script>
</body>
innerText和innerHTML的区别
- 获取内容时的区别：
innerText会去除空格和换行，而innerHTML会保留空格和换行
这两个属性是可读写的 可以获取元素里面的内容
- 设置内容时的区别：
innerText不会识别html，而innerHTML会识别
案例代码
<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标签 W3C标准 保留空格和换行的div.innerHTML = '<strong>今天是：</strong> 2019';// 这两个属性是可读写的 可以获取元素里面的内容var p = document.querySelector('p');console.log(p.innerText);console.log(p.innerHTML);</script>
</body>
1.5.2. 常用元素的属性操作
获取属性的值
元素对象.属性名
设置属性的值
元素对象.属性名 = 值
案例代码
<body><button id="ldh">刘德华</button><button id="zxy">张学友</button> <br><img src="images/ldh.jpg" alt="" title="刘德华"><script>// 修改元素属性 src// 1. 获取元素var ldh = document.getElementById('ldh');var zxy = document.getElementById('zxy');var img = document.querySelector('img');// 2. 注册事件 处理程序zxy.onclick = function() {img.src = 'images/zxy.jpg';img.title = '张学友思密达';}ldh.onclick = function() {img.src = 'images/ldh.jpg';img.title = '刘德华';}</script>
</body>
1.5.3. 案例：分时问候
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>img {width: 300px;}</style>
</head><body><img src="images/s.gif" alt=""><div>上午好</div><script>// 根据系统不同时间来判断，所以需要用到日期内置对象// 利用多分支语句来设置不同的图片// 需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性// 需要一个div元素，显示不同问候语，修改元素内容即可// 1.获取元素var img = document.querySelector('img');var div = document.querySelector('div');// 2. 得到当前的小时数var date = new Date();var h = date.getHours();// 3. 判断小时数改变图片和文字信息if (h < 12) {img.src = 'images/s.gif';div.innerHTML = '亲，上午好，好好写代码';} else if (h < 18) {img.src = 'images/x.gif';div.innerHTML = '亲，下午好，好好写代码';} else {img.src = 'images/w.gif';div.innerHTML = '亲，晚上好，好好写代码';}</script>
</body></html>
1.5.4. 表单元素的属性操作
获取属性的值
元素对象.属性名
设置属性的值
元素对象.属性名 = 值
表单元素中有一些属性如：disabled、checked、selected，元素对象的这些属性的值是布尔型。
案例代码
<body><button>按钮</button><input type="text" value="输入内容"><script>// 1. 获取元素var btn = document.querySelector('button');var input = document.querySelector('input');// 2. 注册事件 处理程序btn.onclick = function() {// 表单里面的值 文字内容是通过 value 来修改的input.value = '被点击了';// 如果想要某个表单被禁用 不能再点击 disabled 我们想要这个按钮 button禁用// btn.disabled = true;this.disabled = true;// this 指向的是事件函数的调用者 btn}</script>
</body>
1.5.5. 案例：仿京东显示密码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box {position: relative;width: 400px;border-bottom: 1px solid #ccc;margin: 100px auto;}.box input {width: 370px;height: 30px;border: 0;outline: none;}.box img {position: absolute;top: 2px;right: 2px;width: 24px;}</style>
</head><body><div class="box"><label for=""><img src="images/close.png" alt="" id="eye"></label><input type="password" name="" id="pwd"></div><script>// 1. 获取元素var eye = document.getElementById('eye');var pwd = document.getElementById('pwd');// 2. 注册事件 处理程序var flag = 0;eye.onclick = function() {// 点击一次之后， flag 一定要变化if (flag == 0) {pwd.type = 'text';eye.src = 'images/open.png';flag = 1; // 赋值操作} else {pwd.type = 'password';eye.src = 'images/close.png';flag = 0;}}</script>
</body></html>
1.5.6. 样式属性操作
我们可以通过 JS 修改元素的大小、颜色、位置等样式。
常用方式
方式1：通过操作style属性
元素对象的style属性也是一个对象！
元素对象.style.样式属性 = 值;
案例代码
<body><div></div><script>// 1. 获取元素var div = document.querySelector('div');// 2. 注册事件 处理程序div.onclick = function() {// div.style里面的属性 采取驼峰命名法 this.style.backgroundColor = 'purple';this.style.width = '250px';}</script>
</body>
案例：淘宝点击关闭二维码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box {position: relative;width: 74px;height: 88px;border: 1px solid #ccc;margin: 100px auto;font-size: 12px;text-align: center;color: #f40;/* display: block; */}.box img {width: 60px;margin-top: 5px;}.close-btn {position: absolute;top: -1px;left: -16px;width: 14px;height: 14px;border: 1px solid #ccc;line-height: 14px;font-family: Arial, Helvetica, sans-serif;cursor: pointer;}</style>
</head><body><div class="box">淘宝二维码<img src="images/tao.png" alt=""><i class="close-btn">×</i></div><script>// 1. 获取元素 var btn = document.querySelector('.close-btn');var box = document.querySelector('.box');// 2.注册事件 程序处理btn.onclick = function() {box.style.display = 'none';}</script>
</body></html>
案例：循环精灵图背景
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}li {list-style-type: none;}.box {width: 250px;margin: 100px auto;}.box li {float: left;width: 24px;height: 24px;background-color: pink;margin: 15px;background: url(images/sprite.png) no-repeat;}</style>
</head><body><div class="box"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div><script>// 1. 获取元素 所有的小li var lis = document.querySelectorAll('li');for (var i = 0; i < lis.length; i++) {// 让索引号 乘以 44 就是每个li 的背景y坐标 index就是我们的y坐标var index = i * 44;lis[i].style.backgroundPosition = '0 -' + index + 'px';}</script>
</body></html>
案例：显示隐藏文本框内容
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>input {color: #999;}</style>
</head><body><input type="text" value="手机"><script>// 1.获取元素var text = document.querySelector('input');// 2.注册事件 获得焦点事件 onfocus text.onfocus = function() {// console.log('得到了焦点');if (this.value === '手机') {this.value = '';}// 获得焦点需要把文本框里面的文字颜色变黑this.style.color = '#333';}// 3. 注册事件 失去焦点事件 onblurtext.onblur = function() {// console.log('失去了焦点');if (this.value === '') {this.value = '手机';}// 失去焦点需要把文本框里面的文字颜色变浅色this.style.color = '#999';}</script></body></html>
方式2：通过操作className属性
元素对象.className = 值;
因为class是关键字，所有使用className。
案例代码
<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';// 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况// 3. 如果想要保留原先的类名，我们可以这么做 多类名选择器// this.className = 'change';this.className = 'first change';//注意空格// this.className += ' change';// this.className = this.className+' change';}</script>
</body>
1.6. 今日总结
day02 - Web APIs
学习目标：
能够说出排他操作的一般实现步骤
能够使用html5中的dataset方式操作自定义属性
能够根据提示完成百度换肤的案例
能够根据提示完成全选案例
能够根据提示完成tab栏切换案例
能够区分元素节点、文本节点、属性节点
能够获取指定元素的父元素
能够获取指定元素的所有子元素
能够说出childNodes和children的区别
能够使用createElement创建页面元素
1.1. 排他操作
1.1.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>
1.2 案例：百度换肤
<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>
1.3 案例：表格隔行变色
<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>
1.4 案例：全选
<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>
1.5. 自定义属性操作
1.5.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>
1.5.2. 设置属性值
// 2. 设置元素属性值// (1) element.属性= '值'div.id = 'test';div.className = 'navs';// (2) element.setAttribute('属性', '值'); 主要针对于自定义属性div.setAttribute('index', 2);div.setAttribute('class', 'footer'); // class 特殊 这里面写的就是<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><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 属性的意思 我们程序员自己添加的属性我们称为自定义属性 indexconsole.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></html>
1.5.3. 移出属性
// class 不是className// 3 移除属性 removeAttribute(属性) div.removeAttribute('index');
1.5.4. 案例：tab栏
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}li {list-style-type: none;}.tab {width: 978px;margin: 100px auto;}.tab_list {height: 39px;border: 1px solid #ccc;background-color: #f1f1f1;}.tab_list li {float: left;height: 39px;line-height: 39px;padding: 0 20px;text-align: center;cursor: pointer;}.tab_list .current {background-color: #c81623;color: #fff;}.item_info {padding: 20px 0 0 20px;}.item {display: none;}</style>
</head><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></html>
1.5.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']);// 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法//data-list-name="andy"console.log(div.dataset.listName);console.log(div.dataset['listName']);</script>
1.6. 节点操作
1.6.1. 节点概述
网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。
HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。
一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。
1.6.2. 节点层级
利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。
1.6.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>
1.6.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>
第一个子元素和最后一个子元素
实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><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>
</body></html>
1.6.5. 案例：新浪下拉菜单
<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>
1.6.6. 兄弟节点
<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>
下一个兄弟元素节点（有兼容性问题）
function getNextElementSibling(element) {var el = element;while (el = el.nextSibling) {if (el.nodeType === 1) {return el;}}return null;}
1.6.7. 创建节点
1.6.8. 添加节点
<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>
1.6.9. 案例：简单版发布留言
<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;// (2) 添加元素// ul.appendChild(li);ul.insertBefore(li, ul.children[0]);}}</script>
</body>
相关文章：
WebAPI编程（第一天，第二天）
WebAPI编程（第一天，第二天） day01 - Web APIs 1.1. Web API介绍 1.1.1 API的概念1.1.2 Web API的概念1.1.3 API 和 Web API 总结 1.2. DOM 介绍 1.2.1 什么是DOM1.2.2. DOM树 1.3. 获取元素 1.3.1. 根据ID获取1.3.2. 根据标签名获取元素1.3.…...
查看MySQL存储引擎方法，表操作
修改数据库表存储引擎 show create table dept; show table status from itpux where name s2\G; select * from information_schema.TABLES where table_schemaitpux and table_names3; 查询整个mysql里面存储引擎是innodb/myisam的表 建表时候要写好存储引擎 -- 创建表 -- 表…...
【Python教程】Python3基础篇之Number（数字）
博主介绍：✌全网粉丝21W+，CSDN博客专家、Java领域优质创作者，掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围：SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物联网、机器学习等设计与开发。 感兴趣的可…...
基于openEuler22.09部署OpenStack Yoga云平台（一）
OpenStack Yoga部署 安装OpenStack 一、基础准备 基于OpenStack经典的三节点环境进行部署，三个节点分别是控制节点（controller）、计算节点（compute）、存储节点（storage），其中存储…...
I.MX6U 启动方式详解
一、启动方式选择 BOOT 的处理过程是发生在 I.MX6U 芯片上电以后，芯片会根据 BOOT_MODE[1:0]的设置 来选择 BOOT 方式。 BOOT_MODE[1:0]的值是可以改变的，有两种方式，一种是改写 eFUSE(熔 丝)，一种是修改相应的 GPIO 高低电平。第一种修改 eFUSE 的方式只能修改一次，后面就…...
施耐德变频器ATV320系列技术优势：创新与安全并重
在工业自动化领域，追求高效、安全与智能已成为不可阻挡的趋势。施耐德变频器ATV320系列凭借其强大的设计标准和全球认证，成为能够帮助企业降低安装成本，提高设备性能的创新解决方案。 【全球认证，品质保障】ATV320 系列秉持施耐德…...
系统思考—全局思维
昨天接到一个企业需求，某互联网公司VP希望N-1的核心团队一起学习系统思考，特别是在新业务快速发展的阶段。公司增长势头不错，但如何解决跨部门的协作问题，成为了瓶颈。全局思维就是关键。产品、技术、市场、运营、客服……如何打破…...
Windows如何切换用户访问局域网共享文件夹,如何切换网上邻居的账户
Windows如何切换用户访问局域网共享文件夹,如何切换网上邻居的账户 查看共享连接 使用net use命令可以查看当前已经建立的共享连接。net use删除共享连接 使用net use * /del 或net use * /delete命令可以删除所有当前的共享连接。net use * /delnet use * /delete如果只想删除…...
如何在谷歌浏览器中启用语音搜索
想象一下，你正在拥挤的地铁上，双手都拿着沉重的购物袋，突然你想搜索附近的咖啡馆。此时如果你能通过语音而不是打字来进行搜索，那将多么的便利！在谷歌浏览器中，启用语音搜索功能就是这么简单而高效…...
HarmonyOS NEXT 技术实践-基于基础视觉服务实现骨骼点识别
本示例展示了如何在HarmonyOS Next中实现基于基础视觉服务的骨骼点识别功能。骨骼点识别是计算机视觉中的一项重要技术，广泛应用于运动分析、健身监控和增强现实等领域。通过使用HarmonyOS Next提供的视觉API，开发者能够轻松地对人物图像进行骨骼点检测&…...
Debian系统宝塔面板安装LiteSpeed Memcached（LSMCD）
参考链接 1. 官网指引： https://www.litespeedtech.com/support/wiki/doku.php/litespeed_wiki:lsmcd:installation 2. 安装OpenLiteSpeed官方LSMCD对象缓存替换Memcached详细图文教程 - 搬主题 实操记录： 首先LSMCD 默认的端口是11211，…...
tcp 的三次握手与四次挥手
问1: 请你说一下tcp的三次握手一次握手两次握手三次握手问: 为什么不四(更多)次握手? 问 2: 请说一下 tcp 的 4 次挥手一次挥手两次挥手问题:能不能等到数据传输完成再返回 ack? 三次挥手四次挥手问: 为什么要等两个最大报文存在时间? bg: tcp 是可靠的连接,如何保证 建立连…...
QT--信号与槽机制
什么是信号与槽？ 在 Qt 中，信号与槽是一种用于对象间通信的机制。它使得一个对象可以通知其他对象某个事件的发生，而不需要直接知道这些对象的具体实现。这种机制非常适合事件驱动的编程模型，如用户界面交互。 1. 信号ÿ…...
vue3项目history路由模式部署上线405、刷新404问题(包括部分页面刷新404问题)
一、找不到js模块 解决方法：配置Nginx配置文件： // root /your/program/path/dist root /www/wwwroot/my_manage_backend_v1/dist;二、刷新页面导致404问题(Not found) 经过一系列配置后发现进入页面一切正常，包括路由前进和回退࿰…...
电阻容差是啥意思
定义 电阻器在生产过程中，由于工艺等因素的限制，其实际阻值不可能与标称阻值完全一致，总会存在一定的误差。例如，一个标称阻值为100Ω、容差为5%的电阻，其实际阻值可能在95Ω至105Ω之间。 产生原因 材料特性差异&a…...
Rust: offset祼指针操作
offset是偏移元素个数，不是字节数！ fn main(){let student_a Student{id:20240001,name:"张三娃".into(),class_id:3,age:14,grade:1};let student_b Student{id:20240002,name:"李四牛".into(),class_id:3,age:15,grade:1};let …...
SD本地部署和云端部署的区别以及优劣
相信有相当多多小伙伴应该是看了一些技术或者设计的博主的教程后开始尝试使用SD的，在大多数的SD教程中，绝大多数都是推荐本地化的部署流程，毕竟本地部署后的SD自由度会显得高一些，大部分的操作也都完全可以实现，只不过…...
4、数据结构与算法解析(C语言版)--栈
栈的数据存储遵循“后进先出的规则”，这在计算机里面是非常有用的，比如word等编辑软件的"撤销"功能，就是使用栈进行实现的。 1、创建项目 main.h #ifndef _MAIN_H #define _MAIN_H#include <stdio.h> #include <stdlib.…...
c# 后台任务自动执行
如果有些任务需要在后台自动执行，且时不时需要添加一个任务，且按照优先级顺序执行，那么可以参考本文的方法。 后台任务类 定义一个后台任务类BackgroundTaskThread，其中Start方法是用来启动任务的，循环查询是否有添加…...
被裁20240927 --- 嵌入式硬件开发 前篇
前篇主要介绍一些相关的概念，用于常识扫盲，后篇开始上干货！ 他捧着一只碗吃过百家的饭 1. 处理器芯片1.1 处理器芯片制造商一、 英特尔（Intel）二、 三星（SAMSUNG）三、 高通（Qualcomm…...
重温设计模式--观察者模式
文章目录 观察者模式（Observer Pattern）概述观察者模式UML图作用：实现对象间的解耦支持一对多的依赖关系易于维护和扩展 观察者模式的结构抽象主题（Subject）：具体主题（Concrete Subject…...
vulnhub靶场——Log4j2
第一步:搭建靶场环境 #开启环境 cd vulhub/log4j/CVE-2021-44228 docker-compose up -d 来到网站首页 第二步:搭建一个dnslog平台上获取我们注入的效果 第三步:发现 /solr/admin/cores?action 这里有个参数可以传 我们可以看到留下了访问记录并且前面的参数被执行后给我们回…...
Vue3中使用resolve进行路径别名设置
Vue3中使用resolve进行路径别名设置 使用Vite初始化Vue3项目工程请参考文章：Vite创建Vue3工程并引入ElementPlus（图文详细） 1.使用~路径别名替换根目录，使用路径别名替换src目录 在vite.config.js配置文件下添加如下配置 impo…...
Linux 添加磁盘
1、编辑虚拟机添加磁盘 然后开启虚拟机 选项如下： DOS (MBR) a 切换可引导标志 b 编辑嵌套的 BSD 磁盘标签 c 切换 DOS 兼容标志 通用 d 删除一个分区 F 列出未分配的空闲空间 l 列出已知的分区类型 n 添加一个新分区 p 打印分区表 t 更改分区类…...
集成 jacoco 插件，查看单元测试覆盖率
文章目录 前言集成 jacoco 插件，查看单元测试覆盖率1. 添加pom2. 配置完成、执行扫描3. 执行结果4. 单元测试报告 前言 如果您觉得有用的话，记得给博主点个赞，评论，收藏一键三连啊，写作不易啊^ _ ^。 而且听说点赞…...
MySQL purged gtid是如何生成和维护的
目录 1. GTID的基本概念2. GTID的生成3. GTID的清除3.1 手动清除二进制日志3.2 自动清除二进制日志3.3 重置主库 在MySQL中，gtid_purged表示已清除的GTID集合。 gtid_purged的生成和维护过程如下： 1. GTID的基本概念 GTID（Global Transact…...
[创业之路-206]：《华为战略管理法-DSTE实战体系》- 6-关键成功因素法CSF
目录 一、概述 1、定义与起源 2、关键成功因素的定义 3、关键成功因素的来源 4、关键成功因素的确认方法 5、关键成功因素法的步骤 6、关键成功因素法的应用 7、关键成功因素法的优势与局限性 二、 关键成功因素法CSF的应用 1、企业战略管理 2、项目管理 3、绩效管…...
[Unity]【图形渲染】【游戏开发】Shader数学基础4-更多矢量运算
在计算机图形学和着色器编程中，矢量运算是核心的数学工具之一。矢量用于描述空间中的位置、方向、速度等各种物理量，并在图形变换、光照计算、纹理映射等方面起着至关重要的作用。本篇文章将详细讲解矢量和标量之间的乘法与除法、矢量的加法与减法、矢量的模与单位矢量、点积…...
目标检测——基于yolov8和pyqt的螺栓松动检测系统
目录 1.项目克隆和环境配置1.1 我这里使用的是v8.0.6版本1.2 项目代码结构介绍 2.数据集介绍2.1 数据集采集2.2采集结果介绍 3.模型训练4.pyqt界面设计4.1 界面内容介绍4.2 界面实现 5.操作中的逻辑实现5.1 图片检测5.2 文件夹检测5.3 视频检测和摄像头检测 6. 效果展示 1.项目…...
【Java数据结构】LinkedList
认识LinkedList LinkedList就是一个链表，它也是实现List接口的一个类。LinkedList就是通过next引用将所有的结点链接起来，所以不需要数组。LinkedList也是以泛型的方法实现的，所以使用这个类都需要实例化对象。 链表分为很多种，比…...