[TOC] # 4.操作元素总结 操作元素是DOM核心内容  # 4.操作元素 （修改页面内容） JavaScript的DOM操作可以改变网页内容、结构和样式,我们可以利用DOM操作元素来改变元素里面的内 容、属性等。注意以下都是属性 # 4.1改变元素内容 （修改页面内容）**element.innerHTML** ## **element.innerText**//（修改的元素）.修改方法 **从起始位置到终止位置的内容,但它去除html标签，同时空格和换行也会去掉** ~~~ <div></div> <p> 我是文字 < span>123</ span> </p> <script> // innerText 和innerHTML的区别 // 1. innerText 不识别html标签非标准去除空格和换行 var div = document . querySelector( 'div'); div. innerText = ' <strong> 今天是: </strong> 2019'; var p = document.querySelector('p' ); console.log(p.innerText); </script> ~~~ ## **element.innerHTML**//（重点 主要写这个）（修改的元素）.修改方法 **起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行** ~~~ <div></div> <p> 我是文字 < span>123</ span> </p> <script> // 2. innerHTML 识别html标签W3C标准保留空格和换行的 div. innerHTML = '<strong>今 天是: </strong> 2019' ; var p = document. querySelector('p' ); //这两个属性是可读写的 可以获取元素里面的内容 console.log(p.innerHTML); </script> ~~~ ## 内容修改 实验代码 ~~~ //获取元素 var btn = document.querySelector(' button'); var div = document.querySelector('div'); // 2.注册事件 btn.onclick = function() { // div. innerText = ' 2019-6-6' ; div.innerText = getDate(); // 修改 div.修改方法 = 函数名（使用 调用函数） } //函数封装 （封装函数 时间 日期） 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]; ~~~ ## 页面刷新直接使用 //我们元素可以不用添加事件 var p = document.querySelector('p'); p.innerText =getDate(); # 4.2常用元素的属性操作 （重点） 1. innerText、innerHTML 改变元素内容 2. src、href 3. id、alt、title ## 实验   # 4.3表单元素的属性操作 利用DOM可以操作如下表单元素的属性: type、value、 checked、selected、 disabled （禁用）   # 4.4样式属性操作 我们可以通过JS修改元素的大小颜色、位置等样式。  element.style 行内样式操作 注意！！  element.className 类名样式操作 注意！！  ~~~ element.style 行内样式操作 element.className 类名样式操作 ~~~ ## element.style 行内样式操作 运用  ## element.className 类名样式操作 运用 ~~~ var test = document.querySelector( 'div' ); test.onclick = function() { // // 2.我们可以通过修改元素的className更改元素的样式适合于样式较多或者功能复杂的情况 // 3.如果想要保留原先的类名，我们可以这么做多类名选择器 // this.className =' change ' ; this.className = 'first change' ; （把原先的类写上，在 添加新的类名） } ~~~ # 案例:密码框格式提示错误信息 （重点 注册页面 密码框） 用户如果离开密码框,里面输入个数不是6~16 ,则提示错误信息,否则提示输入正确信息  ## 案例分析 ①首先判断的事件是表单失去焦点onblur ②如果输入正确则提示正确的信息颜色为绿色小图标变化 ③如果输入不是6到16位,则提示错误信息颜色为红色小图标变化 ④因为里面**变化样式较多**,我们**采取className修改样式** **开发的盒子**  ## 代码实验  ~~~ //①首先判断的事件是表单失去焦点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 < 6||this. value.length > 16) { //或者（||） // console.1og( '错误'); message.className ="message wrong' ; //以类元素修改页面样式内容 message.innerHTML='您输入的位数不对要求6~16位'; //修改页面内容 } else { message.className =' message right ' ; message.innerHTML = ' 您输入的正确' ; } } ~~~ # 案例:显示隐藏文本框内容 （重点 搜索框） 当鼠标**点击文本框时**,里面的**默认文字隐藏**,当鼠标**离开文本框时**,里面的**文字显示**。 |  | 鼠标离开文字又显示 | | --- | --- | ## 案例分析 ①首先表单需要2个新事件,获得焦点**onfocus**失去焦点**onblur** ②**如果获得焦点**,**判断表单**里面**内容是否为默认文字**,**如果**是**默认文字**,**就清空表单内容** ③**如果失去焦点**，**判断表单**内容**是否为空**,如果为**空**,则表单**内容改为默认文字** ## 代码实验 ~~~ <input type="text" value="手 机"> <script> // 1.获取元素 var text = document.querySelector(' input ' ); // 2.注册事件获得焦点事件onfocus text. onfocus = function() { // console.1og('得到了焦点'); if (this.value ==='手机') { this.value = ' ' ;} //获得焦点需要把文本框里面的文字颜色变黑 this.style.color = ' #333'; } // 3.注册事件失去焦点事件onblur text.onblur = function() { // console.log('失去了焦点'); if (this.value ==='') { this.value = '手机'; } //失去焦点需要把文本框里面的文字颜色变浅色 this.style.color ='#999' ; } ~~~ # 案例:循环精灵图背景 （重点 精灵图） 可以利用for循环设置一组元素的精灵图背景  ## 案例分析 |  |  | | --- | --- | ## 代码实验 （重点） ~~~ // 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'; } ~~~ # 案例:淘宝点击关闭二维码 （重点 类似于广告，一点就关闭，刷新又回来） 当鼠标点击二维码关闭按钮的时候,则关闭整个二维码。 ## 案例分析 ①核心思路:利用样式的显示和隐藏完成,**display:none隐藏元素**display:block显示元素 ②点击按钮,就让这个二维码盒子隐藏起来即可 ## 代码实验 ~~~ // 1.获取元素 （获取类选择器） var btn = document.querySelector(' .close-btn' ); //获取类选择器 var box = document.querySelector(' .box ' ); //获取类选择器 // 2.注册事件程序处理 btn.onclick = function() { //点击x box.style.display = 'none'; //样式隐藏 案例分析思路一 } ~~~ # 案例一:仿京东显示密码 （登录页面 密码 重点） 点击按钮将密码框切换为文本框,并可以查看密码明文。  ## 案例分析 ①核心思路:点击眼睛按钮,把密码框类型改为文本框就可以看见里面的密码 ②-个按钮两个状态,点击次,切换为文本框,继续点击次切换为密码框 ③算法:利用一个flag变量,来判断flag的值,如果是1就切换为文本框, flag设置为0 ,如果是0就切换为密码框, flag设置为1 ### 代码实验   # 实验二、4.操作元素 案例:分时显示不同图片,显示不同问候语 根据不同时间,页面显示不同图片,同时显示不同的问候语。 如果上午时间打开页面，显示上午好,显示上午的图片。 如果下午时间打开页面，显示下午好,显示下午的图片。 如果晚上时间打开页面,显示晚上好,显示晚上的图片。 ## 案例分析 ①根据系统不同时间来判断,所以需要用到日期内置对象 ②利用多分支语句来设置不同的图片 ③需要一个图片,并且根据时间修改图片,就需要用到操作元素src属性 ④需要一个div元素，显示不同问候语，修改元素内容即可 ## 实现代码 ~~~ <img src=" images/s.gif" alt=""> <div>上午好</div> <script> //根据系统不同时间来判断，所以需要用到日期内置对象 //利用多分支语句来设置不同的图片 //需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性 //需要一个div元素， 显示不同问候语，修改元素内容即可 //1.获取元素 va img=document.querySelector('img ' ); var div = document.querySelector('div' ); //2.得到当前的小时数 var date = new Date (); var h = date . getHours(); // 3.判断小时数改变图片和文字信息 if(h<12){ ing.src = ' images/s.gif'; div.innerHTML = '亲，上午好， 好好写代码' ; //修改 }elseif(h<18){ img.src = ' images/x.gif'; div.innerHTML = '亲，下午好， 好好写代码'; //修改 } else { img.src =' images/W. gif'; div.innerHTML = '亲，晚上好，好好写代码'; //修改 ~~~