> 文档中心 > JavaScript进阶(二)-- DOM

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. 生僻字1
  2. 生僻字2
  3. 生僻字3
  4. 生僻字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 元素,显示不同问候语,修改元素内容即可

                    JavaScript进阶(二)-- DOM    
上午好
// ① 根据系统不同时间来判断,所以需要用到日期内置对象 // ② 利用多分支语句来设置不同的图片 // ③ 需要一个图片,并且根据时间修改图片,就需要用到操作元素 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); }            

 请输入6~16为密码

// ① 首先判断的事件是表单失去焦点 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. 节点操作

JavaScript进阶(二)-- DOM 新人创作打卡挑战赛 JavaScript进阶(二)-- DOM 发博客就能抽奖!定制产品红包拿不停!