目标:解决以下问题:
- 说出什么是DOM
文档对象模型,是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准程序接口。
W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容,结构和样式。
DOM树:
- 文档:一个页面就是一个文档,DOM中使用document表示
- 元素:页面中的所有标签都是元素,DOM中使用element表示
- 节点:网页中所有的内容都是节点(标签,属性,文本,注释等),DOM中使用node表示
- DOM把以上内容都看作是对象
- 如何获取页面元素
1.getElementById获取元素
<div id="time">2021-6-1</div> <script> //1.参数id是大小写敏感的字符串 //2.返回的是一个元素对象 var timer=document.getElementById('time'); console.log(timer); console.log(typeof timer); //打印我们返回的元素对象 更好的查看里面的属性和方法 console.dir(timer); </script>
2.根据标签名获取:getElementsByTagName('标签名')
还可以获取某个元素(父元素)内部所有指定标签名的子元素:element.getElementsByTagName('标签名')/父元素必须是单个对象,获取的时候不包括父元素自己
<ul> <li>你是来干嘛的啊1</li> <li>你是来干嘛的啊2</li> <li>你是来干嘛的啊3</li> <li>你是来干嘛的啊4</li> <li>你是来干嘛的啊5</li> </ul> <ol id="ol"> <li>你是猪吗</li> <li>你是猪吗</li> <li>你是猪吗</li> </ol> <script> //获取过来元素对象的集合,以伪数组的形式存储 var lis=document.getElementsByTagName('li'); console.log(lis); console.log(lis[0]); var ol=document.getElementById('ol') console.log(ol.getElementsByTagName('li'));
3.H5新增
//1.getElementsByClassName根据类名活的某些元素集合 var boxs=document.getElementsByClassName('box'); console.log(boxs); //2.querySelector 返回指定选择器的第一个元素对象 var 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);
4.获取body元素和html元素
//1.获取body元素 var bodyEle=document.body; console.log(bodyEle); console.dir(bodyEle); //获取html元素 var htmlEle=document.documentElement; console.log(htmlEle); </script>
- 如何给元素注册事件
事件是由三部分组成 事件源 事件类型 事件处理程序 也称为事件的三要素
<button id="btn">唐伯虎</button> <script> //1.事件源 var btn=document.getElementById('btn'); //2.事件类型 如何触发 //3.事件处理程序 通过一个函数赋值完成 btn.onclick =function(){ alert('点秋香'); } </script>
- 如何操作DOM元素的属性
1.使用innerText
<button>给文明以时间</button> <div>系统当前时间</div> <p>111</p> <script> //1.获取元素 var btn=document.querySelector('button'); var div=document.querySelector('div'); //2.注册事件 btn.onclick=function(){ div.innerText=getDate(); } function getDate(){ var date=new Date(); var year =date.getFullYear(); var month=date.getMonth(); var dates=date.getDate(); var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六']; var days=date.getDay(); return '今天是'+year+'年'+month+'月'+dates+'日'+arr[days]; } //不用点击直接展示时间 var p=document.querySelector('p'); p.innerText=getDate(); </script>
innerText和innerHTML的区别
1.innerText不识别html标签 非标准 去除空格和换行
2.innerHTNL识别html标签 W3C标准 保留空格和换行
<div></div> <p> 我是文字 <span>1234</span> </p> <script> //1.innerText不识别html标签 非标准 去除空格和换行 var div = document.querySelector('div'); div.innerHTMl = '<strong>现在是:</strong>2021'; //2.两个属性都是可读写的 可以获取元素里面的内容 var p = document.querySelector('p'); console.log(p.innerText); console.log(p.innerHTML); </script>
- 操作元素
1.操作元素:修改元素属性
<button id="tu1">图片1</button> <button id="tu2">图片2</button> <img src="images/backimg.jpg" alt="" title="小屁孩"> <script> var tu1 = document.getElementById('tu1'); var tu2 = document.getElementById('tu2'); var img = document.querySelector('img'); tu1.onclick = function() { img.src = 'images/backimg.jpg'; img.title = '小屁孩'; } tu2.onclick = function() { img.src = 'images/favicon.jpg'; img.title = '男生'; } </script>
操作元素案例:分时问候
<div id="tu1">上午好,加油学习吧</div> <img src="images/backimg.jpg" alt="" title="小屁孩"> <script> var tu1 = document.getElementById('tu1'); var img = document.querySelector('img'); var date = new Date(); var h = date.getHours(); if (h < 12) { img.src = "images/backing.jpg" tu1.innerHTML = "上午好,好好学习吧" } else { img.src = "images/favicon.jpg"; tu1.innerHTML = "下午好,今天也要努力生活哦" } </script>
2.操作元素:修改表单属性
<button>按钮</button> <input type="text" value="请输入内容"> <script> //获取元素 var btn = document.querySelector('button'); var input = document.querySelector('input'); //注册事件,处理程序 btn.onclick = function() { //表单里面的值,通过value来修改 input.value = "点击我就变"; //想要按钮点击之后被禁用,可以用disable //this指向事件函数的调用者 this.disabled = true; } </script>
仿京东显示隐藏密码明文案例
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { position: relative; width: 400px; border-bottom: 1px solid #ccc; margin: 100px auto; } .box input { width: 370px; height: 30px; border: 0px; 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" id="pwd"> </div> <script> //获取元素 var eye = document.getElementById('eye'); var pwd = document.getElementById('pwd'); //注册事件 处理程序 var flag = 0; eye.onclick = function() { 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>
3.操作元素:修改样式属性
JS里面的样式采用驼峰命名法 比如fontSize,backgroundColor
JS修改style样式操作,产生的是行内样式,css权重比较高
1.通过element.style来修改样式属性(样式比较少,功能比较简单的时候使用)
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 200px; height: 200px; background-color: pink; } </style> </head> <body> <div></div> <script> var div = document.querySelector('div'); div.onclick = function() { this.style.backgroundColor = "green"; this.style.width = "250px"; } </script> </div> </body>
仿淘宝关闭二维码案例:
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <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> var box = document.querySelector('.box'); var closes = document.querySelector('.close-btn'); closes.onclick = function() { box.style.display = 'none'; } </script> </div> </body>
循环精灵图案例:
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <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> var lis = document.querySelectorAll('li'); for (var i = 0; i < lis.length; i++) { var index = i * 44; lis[i].style.backgroundPosition = '0 -' + index + 'px'; } </script> </div> </body>
显示隐藏文本框案例:
<input type="text" value="手机"> <script> var input = document.querySelector('input'); input.onfocus = function() { if (this.value == '手机') { this.value = ''; } this.style.color = '#333'; } input.onblur = function() { if (this.value == '') { this.value = '手机' } this.style.color = '#999' } </script>
2.使用className来修改样式属性
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 200px; height: 200px; color: #fff; background-color: pink; } .change { width: 200px; height: 250px; margin-top: 50px; color: red; background-color: green; } </style> </head> <body> <div class="first">团结</div> <script> var div = document.querySelector('div'); div.onclick = function() { // div.className = 'change'; //如果想要保留原来的类名,可以这么做 div.className = 'change first' } </script> </body>
密码框验证信息案例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 600px; margin: 100px auto; } .message { display: inline-block; font-size: 12px; color: #999; background: url(images/mess.png) no-repeat left center; padding-left: 20px; } .wrong { color: red; background-image: url(images/wrong.png); } .right { color: green; background-image: url(images/right.png); } </style> </head> <body> <div class="register"> <input type="password" class="ipt" value=""> <p class="message">输入6~16位数的密码</p> </div> <script> var ipt = document.querySelector('.ipt'); var message = document.querySelector('.message'); ipt.onblur = function() { if (ipt.value.length < 6 || ipt.value.length > 16) { message.className = 'message wrong' message.innerHTML = '输入错误,请重新输入符合要求的密码'; } else { message.className = 'message right'; message.innerHTML = '输入正确'; } } </script> </body> </html>