JavaScript进阶(二)-- DOM
1. DOM简介
1.1 什么是 DOM
文档对象模型( Document Object Model,简称 DOM ),是 W3C 组织推荐的处理可扩展标记语言( HTML或者XML )的标准编程接口。
W3C 已经定义了一系列的 DOM 接口,通过这些 DOM 接口可以改变网页的内容、结构和样式。
1.2 DOM 树
● 文档:一个页面就是一个文档,DOM 中使用 document 表示
● 元素:页面中的所有标签都是元素,DOM 中使用 element 表示
● 节点:网页中的所有内容都是节点( 标签、属性、文本、注释等 ),DOM 中使用 node 表示
DOM 把以上内容都看做是对象
2. 获取元素
2.1 如何获取页面元素
DOM 在我们实际开发中主要用来操作元素。
我们如何来获取页面中的元素呢?
获取页面中的元素可以使用以下几种方式:
● 根据 ID 获取
● 根据标签名获取
● 通过 HTML5 新增的方法获取
● 特殊元素获取
2.2 根据 ID 获取
使用 getElementByld() 方法可以获取带有 ID 的元素对象。
2022-4-19 // 1. 因为我们文档页面从上往下加载,所以先得有标签 所以我们script写到标签的下面 // 2. get 获得 element 元素 by 通过 驼峰命名法 // 3. 参数 id 是大小写敏感的字符串 // 4. 返回的是一个元素对象 var timer = document.getElementById('time'); console.log(timer); // 2022-4-19 console.log(typeof timer); // object // 5. console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法 console.dir(timer);
2.3 根据标签名获取
使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。
注意:
1.因为得到的是一个对象的集合,所以我们想要操作里面的元素就需要遍历。
2.得到元素对象是动态的
- 知否知否, 应是绿肥红瘦1
- 知否知否, 应是绿肥红瘦2
- 知否知否, 应是绿肥红瘦3
- 知否知否, 应是绿肥红瘦4
// 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. 如果页面中没有这个元素 返回的是空的伪数组的形式
还可以获取某个元素( 父元素 )内部所有指定标签名的子元素.
注意:父元素必须是单个对象( 必须指明是哪一个元素对象 ). 获取的时候不包括父元素自己。
- 知否知否, 应是绿肥红瘦1
- 知否知否, 应是绿肥红瘦2
- 知否知否, 应是绿肥红瘦3
- 知否知否, 应是绿肥红瘦4
- 生僻字1
- 生僻字2
- 生僻字3
- 生僻字4
// 5. element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素 // var ol = document.getElementsByTagName('ol'); // console.log(ol[0].getElementsByTagName('li')); var ol = document.getElementById('ol'); console.log(ol.getElementsByTagName('li'));
2.4 通过 HTML5 新增的方法获取
盒子 盒子 // 1. getElementsByClassName 根据类名获得某些元素集合 var boxs = document.getElementsByClassName('box'); console.log(boxs);
盒子1 盒子2 // 2. querySelector 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 .box #nav var firstBox = document.querySelector('.box'); console.log(firstBox); var nav = document.querySelector('#nav'); console.log(nav); var li = document.querySelector('li'); console.log(li);
盒子1 盒子2 // 3. querySelectorAll() 返回指定选择器的所有元素对象集合 var allBox = document.querySelectorAll('.box'); console.log(allBox); var lis = document.querySelectorAll('li'); console.log(lis);
2.5 获取特殊元素( body,html )
获取 body 元素
// 1. 获取 body 元素 var bodyEle = document.body; console.log(bodyEle); console.dir(bodyEle);
获取 html 元素
// 2. 获取 html 元素 var htmlEle = document.documentElement; console.log(htmlEle);
3. 事件基础
3.1 事件概述
JavaScript 使我们有能力创建动态页面,而事件是可以被 JavaScript 侦测到的行为。
简单理解:触发 --- 响应机制。
网页中的每个元素都可以产生某些可以触发 JavaScript 的事件,例如,我们可以在用户点击某按钮时产生一个事件,然后去执行某些操作。
3.2 事件三要素
事件是由三部分组成:事件源 、事件类型 、事件处理程序 ,我们也称为事件三要素。
// 点击按钮,弹出对话框 // 1. 事件是由三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素 // (1) 事件源 事件被触发的对象 谁 按钮 var btn = document.getElementById('btn'); // (2) 事件类型 如何触发 什么事件 比如鼠标点击( onclick ) 还是鼠标经过 还是键盘按下 // (3) 事件处理程序 通过一个函数赋值的方式 完成 btn.onclick = function() { alert('点秋香'); }
3.3 执行事件的步骤
1. 获取事件源
2. 注册事件( 绑定事件 )
3. 添加事件处理程序( 采取函数赋值形式 )
123 // 执行事件步骤 // 点击 div 控制台输出 我被选中了 // 1. 获取事件源 var div = document.querySelector('div'); // 2. 绑定事件 注册事件 // div.onclick // 3. 添加事件处理程序 div.onclick = function() { console.log('我被选中了'); }
3.4 常见的鼠标事件
3.5 分析事件三要素
下拉菜单三要素
关闭广告三要素
4. 操作元素
JavaScript 的 DOM 操作可以改变网页内容、结构和样式,我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。注意以下都是属性
4.1 改变元素内容
从起始位置到终止位置的内容,但它去除 html 标签,同时空格和换行也会去掉
某个时间 123
// 当我们点击了按钮 div 里面的文字会发生变化 // 1. 获取元素 var btn = document.querySelector('button'); var div = document.querySelector('div'); // 2. 注册事件 btn.onclick = function() { // div.innerText = '2022-4-20'; div.innerText = getDate(); } function getDate() { var date = new Date(); var year = date.getFullYear(); var month = date.getMonth() + 1; var dates = date.getDate(); var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; var day = date.getDay(); console.log('今天是: ' + year + '年' + month + '月' + dates + '日 ' + arr[day]); } // 我们元素可以不用添加事件 var p = document.querySelector('p'); p.innerText = getDate();
起始位置到终止位置的全部内容,包括 html 标签,同时保留空格和换行
某个时间 123
// 当我们点击了按钮 div 里面的文字会发生变化 // 1. 获取元素 var btn = document.querySelector('button'); var div = document.querySelector('div'); // 2. 注册事件 btn.onclick = function() { // div.innerText = '2022-4-20'; div.innerHTML = getDate(); } function getDate() { var date = new Date(); var year = date.getFullYear(); var month = date.getMonth() + 1; var dates = date.getDate(); var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; var day = date.getDay(); console.log('今天是: ' + year + '年' + month + '月' + dates + '日 ' + arr[day]); } // 我们元素可以不用添加事件 var p = document.querySelector('p'); p.innerHTML = getDate();
4.2 常用元素的属性操作
Document img { width: 300px; }
// 修改元素属性 // 1. 获取元素 var ldh = document.getElementById('ldh'); var zxy = document.getElementById('zxy'); var img = document.querySelector('img'); // 2. 注册事件 处理程序 zxy.onclick = function() { img.src = '../img/张学友.webp'; img.title = '张学友'; } ldh.onclick = function() { img.src = '../img/刘德华.webp'; img.title = '刘德华'; }
案例:分时显示不同图片,显示不同问候语
根据不同时间,页面显示不同图片,同时显示不同的问候语。
如果上午时间打开页面,显示上午好,显示上午的图片。
如果下午时间打开页面,显示下午好,显示下午的图片。
如果晚上时间打开页面,显示晚上好,显示晚上的图片。
案例分析:
① 根据系统不同时间来判断,所以需要用到日期内置对象
② 利用多分支语句来设置不同的图片
③ 需要一个图片,并且根据时间修改图片,就需要用到操作元素 src 属性
④ 需要一个 div 元素,显示不同问候语,修改元素内容即可
上午好 // ① 根据系统不同时间来判断,所以需要用到日期内置对象 // ② 利用多分支语句来设置不同的图片 // ③ 需要一个图片,并且根据时间修改图片,就需要用到操作元素 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 = '../img/s.gif'; div.innerHTML = '上午好' } else if(h < 18){ img.src = '../img/x.gif'; div.innerHTML = '下午好'; } else { img.src = '../img/w.gif'; div.innerHTML = '晚上好'; }
4.3 表单元素的属性操作
利用 DOM 可以操作如下表单元素的属性:
// 操作元素之表单属性设置 // 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 }
案例:仿京东显示密码
点击按钮将密码框切换为文本框,并可以查看密码明文。
案例分析
① 核心思路:点击眼睛按钮,把密码框类型改为文本框就可以看见里面的密码
② 一个按钮两个状态,点击一次,切换为文本框,继续点击一次切换为密码框
③ 算法∶利用一个 flag 变量,来判断 flag 的值,如果是 1 就切换为文本框,flag 设置为 0,如果是 0 就切换为密码框,flag 设置为 1.
Document .box { position: relative; width: 400px; border-bottom: 1px solid #ccc; margin: 100px auto; } .box input { width: 370px; height: 30px; border: 0; outline: 0; } .box img { position: absolute; top: 3px; right: 3px; width: 24px; } // 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 = '../img/open.png' flag = 1; // 赋值操作 } else { pwd.type = 'password'; eye.src = '../img/close.png'; flag = 0; } }
4.4 样式属性操作
我们可以通过 JS 修改元素的大小、颜色、位置等样式。
注意:
1. JS 里面的样式采取驼峰命名法 比如 fontsize、 backgroundcolor
2. JS 修改 style 样式操作,产生的是行内样式,css 权重比较高
Document div { width: 200px; height: 200px; background-color: pink; } // 1. 获取元素 var div = document.querySelector('div'); // 2. 注册事件 处理程序 div.onclick = function() { // div.style 里面的属性 采取驼峰命名法 this.style.backgroundColor = 'blue'; }
案例:淘宝点击关闭二维码
当鼠标点击二维码关闭按钮的时候,则关闭整个二维码。
案例分析
① 核心思路:利用样式的显示和隐藏完成,display.none 隐藏元素 display.block显示元素
② 点击按钮,就让这个二维码盒子隐藏起来即可
Document .box { position: relative; width: 74px; height: 88px; border: 1px solid #ccc; margin: 100px auto; font-size: 12px; text-align: center; color: #f40; } .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; } 淘宝二维码 × // 1. 获取元素 var btn = document.querySelector('.close-btn'); var box = document.querySelector('.box'); // 2. 注册事件 程序处理 btn.onclick = function() { box.style.display = 'none'; }
案例:循环精灵图背景
可以利用 for 循环设置一组元素的精灵图背景
案例分析
① 首先精灵图图片排列有规律的
② 核心思路:利用 for 循环修改精灵图片的背景位置 background-position
③ 剩下的就是考验你的数学功底了
Document * { 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-image: url(../img/精灵图.png); }
// 1. 获取元素 var lis = document.querySelectorAll('li'); for (var i = 0; i < lis.length; i++) { // 让索引号 乘以 44 就是每个 li 的背景 y 坐标 var index = i * 44; lis[i].style.backgroundPosition = '0 -'+ index + 'px'; }
案例:显示隐藏文本框内容
当鼠标点击文本框时,里面的默认文字隐藏,当鼠标离开文本框时,里面的文字显示。
案例分析
① 首先表单需要 2 个新事件,获得焦点 onfocus 失去焦点 onblur
② 如果获得焦点,判断表单里面内容是否为默认文字,如果是默认文字,就清空表单内容
③ 如果失去焦点,判断表单内容是否为空,如果为空,则表单内容改为默认文字
Document input { color: #999; } // 1. 获取元素 var text = document.querySelector('input'); // 2. 注册事件 获得焦点事件 onfocus text.onfocus = function() { // console.log('得到了焦点'); if (this.value == '手机') { text.value = ''; } // 获得焦点需要把文本框里面的文字颜色变黑 text.style.color = '#333'; } // 3. 注册事件 失去焦点事件 onfocus text.onblur = function() { // console.log('失去了焦点'); if (text.value == '') { text.value = '手机'; } // 失去焦点需要把文本框里面的文字颜色变浅色 text.style.color = '#999'; }
注意:
1. 如果样式修改较多,可以采取操作类名方式更改元素样式。
2. class 因为是个保留字,因此使用 className 来操作元素类名属性
3. className 会直接更改元素的类名,会覆盖原先的类名。
Document div { width: 100px; height: 100px; background-color: pink; } .change { background-color: blue; color: #fff; font-style: 25px; margin-top: 100px; } 文本 // 使用 element.style 获得修改元素样式 如果样式比较少 或者 功能简单的情况下使用 var text = document.querySelector('div'); text.onclick = function() { // this.style.backgroundColor = 'blue'; // this.style.color = '#fff'; // this.style.fontSize = '25px'; // this.style.marginTop = '100px'; // 让我们当前元素的类名改为了 change // 2.我们可以通过修改元素的 className 更改元素的样式适合于样式较多或者功能复杂的情况 // 3. 如果想要保留原先的类名,我们可以这么做 // this.className = 'change'; this.className = 'first change'; }
案例:密码框格式提示错误信息
用户如果离开密码框,里面输入个数不是 6~16,则提示错误信息,否则提示输入正确信息
案例分析
① 首先判断的事件是表单失去焦点 onblur
② 如果输入正确则提示正确的信息颜色为绿色小图标变化
③ 如果输入不是 6 到 16 位,则提示错误信息颜色为红色小图标变化
④ 因为里面变化样式较多,我们采取 className 修改样式
Document div { width: 600px; margin: 100px auto; } .message { display: inline-block; font-style: 12px; color: #999; background: url(../img/mess.png) no-repeat left center; padding-left: 20px; } .wrong { color: red; background-image: url(../img/wrong.png); } .right { color: green; background-image: url(../img/mess.png); } // ① 首先判断的事件是表单失去焦点 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 16) { // console.log('错误'); message.className = 'message wrong'; message.innerHTML = ' 您输入的位数不对要求6~16位'; } else { message.className = 'message right'; message.innerHTML = ' 您输入的正确'; } }
操作元素总结
操作元素是 DOM 核心内容
1. 世纪佳缘用户名显示隐藏内容
2. 京东关闭广告(直接隐藏即可)
3. 新浪下拉菜单(微博即可)
4. 开关灯案例(见素材)
4.5 排他思想
5. 节点操作
新人创作打卡挑战赛 发博客就能抽奖!定制产品红包拿不停!