JavaScript基础学习ECMAscript基础语法为后面作铺垫，Web APIs是JS的应用，大量使用JS基础语法做交互效果?
API概念
APl ( Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
简单理解∶API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。
Web?APIs?
????????Web API是?浏览器提供?的一套操作?浏览器功能?和?页面元素?的?API?( BOM和 DOM)。现阶段我们主要针对于浏览器讲解常用的API，主要针对浏览器做交互效果。
????????比如我们想要浏览器弹出一个警示框，直接使用 alert ( '弹出' )
????????MDN详细API : https://developer.mozillaorg/zh-CN/docs/Web/API
????????因为Web API很多，所以我们将这个阶段称为Web APls
总结：
- API是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现
- Web API主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。
- Web API一般都有输入和输出（函数的传参和返回值），Web API很多都是方法(函数)
- 学习Web API可以结合前面学习内置对象方法的思路学习
DOM简介
DOM为文档对象模型，是W3C推荐处理可扩展标记语言的编程接口，W3C已经定义了系统接口，通过接口改变网页内容，结构和样式。
1.获取页面元素
- 根据ID获取
- 根据标签名获取
- 通过HTML5新增的方法获取（有兼容性问题）
- 特殊元素获取
1.1根据ID获取--getElementById( ' ' )
<body>
<div id="time">2019-9-9</div>
<script>
// 1. 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
// 2. get 获得 element 元素 by 通过 驼峰命名法
// 3. 参数 id是大小写敏感的字符串
// 4. 返回的是一个元素对象
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
// 5. console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
console.dir(timer);
</script>
</body>1.2根据标签名获取--getElementsByTagName( ' ' )
<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 ol = document.getElementById('ol');
console.log(ol.getElementsByTagName('li'));
</script>
</body>1.3通过HTML5新增的方法获取
| getElementsByTagName( ' ' ) | 使用方法同ID |
| queryselector ( ' ' ) | 返回指定选择器的第一个元素对象 |
| queryselectorAll ( ' ' ) | 返回指定选择器的所有对象集合 |
<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 #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);
// 3. querySelectorAll()返回指定选择器的所有元素对象集合
var allBox = document.querySelectorAll('.box');
console.log(allBox);
var lis = document.querySelectorAll('li');
console.log(lis);
</script>
</body>1.4获取特殊元素
- document.body????????????????????????? //返回body元素对象
- document.documentElement? ? //返回html元素对象
<body>
<script>
// 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);
</script>
</body>事件基础---相应基础
<body>
<button id="btn">唐伯虎</button>
<script>
// 点击一个按钮，弹出对话框
// 1. 事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素
//(1) 事件源 事件被触发的对象 谁 按钮
var btn = document.getElementById('btn');
//(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
//(3) 事件处理程序 通过一个函数赋值的方式 完成
btn.onclick = function() {
alert('点秋香');
}
</script>
</body>
????????三要素：????????时间源? ? ? ? 时间类型? ? ? ? 时间处理程序
常见的鼠标事件
| 鼠标事件 | 触发条件 |
| onclick | 鼠标点击左键触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
操作元素
1.改变元素内容
????????element.innerText
????????????????从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉
????????element.innerHTML? ? ? ? ?（ 用的更多 ）
????????????????起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行<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]; } // 我们元素可以不用添加事件 var p = document.querySelector('p'); p.innerHTML = getDate(); </script> </body>innerText 和 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'; //无法识别strong标签 // 2. innerHTML 识别html标签 W3C标准 保留空格和换行的 div.innerHTML = '<strong>今天是：</strong> 2019'; // 这两个属性是可读写的 可以获取元素里面的内容 var p = document.querySelector('p'); console.log(p.innerText); console.log(p.innerHTML); </script> </body>案例--点击按钮，换图片
?<style> img { width: 300px; } </style> <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>案例--分时问候
- 根据系统不同时间来判断，所以需要用到日期内置对象
- 利用多分支语句来设置不同的图片
- 需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性
- 需要一个div元素，显示不同问候语，修改元素内容即可
<style> img { width: 300px; } </style> <body> <img src="images/s.gif" alt=""> <div>上午好</div> <script> // 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>2.表单元素的属性操作
????????利用DOM可以操作如下表单元素的属性
????????????????type、value、checked、selected、disabled
<body> <button>按钮</button> <input type="text" value="输入内容"> <script> // 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 } </script> </body>案例—防京东显示隐藏密码
核心思路︰
- 点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码
- 一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框
算法︰利用一个flag变量，来判断flag的值，如果是1就切换为文本框，flag设置为0，如果是0就切换为密码框，flag设置为1
<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> <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; } } div.style.backgroundColor = 'blue'; </script> </body>3.样式属性操作?
? ? ? ? 我们可以通过JS修改元素的大小、颜色、位置等样式
- element.style? ? ? ? ? ? ? ? ?行内样式操作
- element.className? ? ??类名样式操作
注意︰
- Js里面的样式采取驼峰命名法比如 fontsize、backgroundcolor
- JS修改style样式操作，产生的是行内样式，css权重比较高
1>使用?element.style 修改样式
<style> div { width: 200px; height: 200px; background-color: pink; } </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>案例—淘宝关闭二维码
核心思路: 利用样式的显示和隐藏完成，display.none 隐藏元素 display.block 显示元素
? ? ? ? ? ? ? ? 点击按钮，就让这个二维码盒子隐藏起来即可
<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> <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>案例—循环精灵图背景
- 首先精灵图图片排列有规律的
- 核心思路:利用 for 循环修改精灵图片的背景位置 background-position
- 剩下的就是考验你的数学功底了
- 让循环里面的 i 索引号*44就是每个图片的y坐标
<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> <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>案例--显示文本框内容
- 首先表单需要2个新事件，获得焦点onfocus失去焦点onblur
- 如果获得焦点，判断表单里面内容是否为默认文字，如果是默认文字，就清空表单内容
- 如果失去焦点，判断表单内容是否为空，如果为空，则表单内容改为默认文字
<style> input { color: #999; } </style> <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. 注册事件 失去焦点事件 onblur text.onblur = function() { // console.log('失去了焦点'); if (this.value === '') { this.value = '手机'; } // 失去焦点需要把文本框里面的文字颜色变浅色 this.style.color = '#999'; } </script> </body>2>使用 element.className 获得修改元素样式
注意:
- 如果样式修改较多，可以采取操作类名方式更改元素样式。
- class因为是个保留字，因此使用 className 来操作元素类名属性
- className 会直接更改元素的类名，会覆盖原先的类名。
<style> div { width: 100px; height: 100px; background-color: pink; } .change { background-color: purple; color: #fff; font-size: 25px; margin-top: 100px; } </style> <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'; // 让我们当前元素的类名改为了 change // 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况 // 3. 如果想要保留原先的类名，我们可以这么做 多类名选择器 // this.className = 'change'; this.className = 'first change'; } </script> </body>案例—密码框验证
思路：?
- 首先判断的事件是表单失去焦点 onblur
- 如果输入正确则提示正确的信息颜色为绿色小图标变化
- 如果输入不是6到16位，则提示错误信息颜色为红色 小图标变化
- 因为里面变化样式较多，我们采取className修改样式
<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> <body> <div class="register"> <input type="password" class="ipt"> <p class="message">请输入6~16位密码</p> </div> <script> // 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.log('错误'); message.className = 'message wrong'; message.innerHTML = '您输入的位数不对要求6~16位'; } else { message.className = 'message right'; message.innerHTML = '您输入的正确'; } } </script> </body>
操作元素总结?
? ? ? ? 操作元素是DOM核心内容
排他思想
如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法︰
- 所有元素全部清除样式(干掉其他人)
- 给当前元素设置样式（留下我自己)
- 注意顺序不能颠倒，首先干掉其他人，再设置自己
<body> <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'; } } //2. 首先先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们成为排他思想 </script> </body>案例—百度换肤?
- 这个案例练习的是给一组元素注册事件
- 给4个小图片利用循环注册点击事件
- 当我们点击了这个图片，让我们页面背景改为当前的图片
- 核心算法:把当前图片的src路径取过来，给body做为背景即可
<style> * { margin: 0; padding: 0; } body { background: url(images/1.jpg) no-repeat center top; } li { list-style: none; } .baidu { overflow: hidden; margin: 100px auto; background-color: #fff; width: 410px; padding-top: 3px; } .baidu li { float: left; margin: 0 1px; cursor: pointer; } .baidu img { width: 100px; } </style> <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>案例—表格隔行变色
<style> table { width: 800px; margin: 100px auto; text-align: center; border-collapse: collapse; font-size: 14px; } thead tr { height: 30px; background-color: skyblue; } tbody tr { height: 30px; } tbody td { border-bottom: 1px solid #d7d7d7; font-size: 12px; color: blue; } .bg { background-color: pink; } </style> <body> <table> <thead> <tr> <th>代码</th> <th>名称</th> <th>最新公布净值</th> <th>累计净值</th> <th>前单位净值</th> <th>净值增长率</th> </tr> </thead> <tbody> <tr> <td>003526</td> <td>农银金穗3个月定期开放债券</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> <td>+0.047%</td> </tr> <tr> <td>003526</td> <td>农银金穗3个月定期开放债券</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> <td>+0.047%</td> </tr> <tr> <td>003526</td> <td>农银金穗3个月定期开放债券</td> <td>1.075</td> <td>1.079</td> <td>1.074</td> <td>+0.047%</td> </tr> </tbody> </table> <script> // 1.获取元素 获取的是 tbody 里面所有的行 var trs = document.querySelector('tbody').querySelectorAll('tr'); // 2. 利用循环绑定注册事件 for (var i = 0; i < trs.length; i++) { // 3. 鼠标经过事件 onmouseover trs[i].onmouseover = function() { // console.log(11); this.className = 'bg'; } // 4. 鼠标离开事件 onmouseout trs[i].onmouseout = function() { this.className = ''; } } </script> </body>案例—表单全选和取消全选
<style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 300px; } th, td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { background-color: #09c; font: bold 16px "微软雅黑"; color: #fff; } td { font: 14px "微软雅黑"; } tbody tr { background-color: #f0f0f0; } tbody tr:hover { cursor: pointer; background-color: #fafafa; } </style> <body> <div class="wrap"> <table> <thead> <tr> <th> <input type="checkbox" id="j_cbAll" /> </th> <th>商品</th> <th>价钱</th> </tr> </thead> <tbody id="j_tb"> <tr> <td> <input type="checkbox" /> </td> <td>iPhone8</td> <td>8000</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>iPad Pro</td> <td>5000</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>iPad Air</td> <td>2000</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>Apple Watch</td> <td>2000</td> </tr> </tbody> </table> </div> <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 它可以得到当前复选框的选中状态如果是true 就是选中，如果是false 就是未选中 console.log(this.checked); for (var i = 0; i < j_tbs.length; i++) { j_tbs[i].checked = this.checked; } } // 2. 下面复选框需要全部选中， 上面全选才能选中做法： //给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中。 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; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了 } } j_cbAll.checked = flag; } } </script> </body>
自定义属性操作
1.获取元素
- element.属性? ? ? ? ? ? ? ? ????????????????????????获取属性值
- element.getAttribute ( '属性' ) ；? ? ? ??获取属性值
区别：
- element.属性? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 获取内置属性值（元素本身自带的属性)
- element.getAttribute( '属性' );????????主要获得自定义的属性（标准）我们程序员自定义的属性
2.设置属性值
- element.属性 = '值'? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?设置内置属性值
- element.setAttribute ( '属性' , '值' ) ；? ? ? ??设置属性值
区别：
- element.属性 = '值'? ? ? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?设置内置属性值（元素本身自带的属性)
- element.setAttribute ( '属性' , '值' ) ；???????主要设置自定义的属性（标准）我们程序员自定义的属性
3.移除属性
- element.removeAttribute（ '属性' )；
<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 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index console.log(div.getAttribute('id')); console.log(div.getAttribute('index')); // 2. 设置元素属性值 // (1) element.属性= '值' div.id = 'test'; div.className = 'navs'; //注意这里是className，设置的clss属性 // (2) element.setAttribute('属性', '值'); 主要针对于自定义属性 div.setAttribute('index', 2); div.setAttribute('class', 'footer'); // class 特殊 这里面写的就是class 不是className // 3 移除属性 removeAttribute(属性) div.removeAttribute('index'); </script> </body>案例——tab栏切换（重点案例）
<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> <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>
H5自定义属性?
自定义属性目的∶是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
????????自定义属性获取是通过 getAttribute（?'属性' ）获取。
但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。
H5给我们新增了自定义属性∶
1.设置H5自定义属性
????????H5规定自定义属性?data-?开头做为属性名并且赋值。
????????????????比如<div data-index= "1”></div>?或者使用JS设置 element.setAttribute( 'data-index’ ,2)
2.获取H5自定义属性
- 兼容性获取 element.getAttribute( 'data-index' );
- H5新增 element.dataset.index 或者 element.dataset[ 'index'?] ie 11才开始支持
<body> <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')); //20 div.setAttribute('data-time', 20); console.log(div.getAttribute('data-index')); //2 console.log(div.getAttribute('data-list-name')); //andy // h5新增的获取自定义属性的方法 它只能获取data-开头的 // dataset 是一个集合里面存放了所有以data开头的自定义属性 console.log(div.dataset); //DOMStringMap console.log(div.dataset.index); //2 console.log(div.dataset['index']); //2 // 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法 console.log(div.dataset.listName); //andy console.log(div.dataset['listName']); //andy </script> </body>
节点操作?
????????这两种方式都可以获取元素节点，我们后面都会使用，但是节点操作更简单
????????网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点使用node来表示。
????????HTML DOM树中的所有节点均可通过JavaScript进行访问，所有HTML元素(节点)均可被修改，也可以创建或删除。
一般地，节点至少拥有nodeType(节点类型) 、nodeName(节点名称）和nodeValue(节点值）这三个基本属性。
- 元素节点nodeType为1
- 属性节点nodeType为2
- 文本节点nodeType 为3(文本节点包含文字、空格、换行等)
我们在实际开发中，节点操作主要操作的是元素节点
节点层级
? ? ? ? 利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系
1.父节点
node.parentNode
- parentNode属性可返回某节点的父节点，注意是最近的一个父节点
- 如果指定的节点没有父节点则返回null
<body> <!-- 节点的优点 --> <div class="demo"> <div class="box"> <span class="erweima">×</span> </div> </div> <script> // 1. 父节点 parentNode var erweima = document.querySelector('.erweima'); // var box = document.querySelector('.box'); // 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null console.log(erweima.parentNode); </script> </body>
2.子节点?
- 1.parentNode.childNodes (标准)
????????parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合。
注意∶ 返回值里面包含了所有的子节点，包括元素节点，文本节点等。
? ? ? ? ? ?如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用childNodesvar ul = document.querySelector('ul'); for(var i = 0; i < ul.childNodes.length; i++) { if (ul.childNodes[i].nodeType ==1) { //ul.childNodes[i]是元素节点 console.log(ul.childNodes[i]); } }
- 2.parentNode.children (非标准)
????????parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回（这个是我们重点掌握的)。
????????虽然children是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用
<body> <!-- 节点的优点 --> <div>我是div</div> <span>我是span</span> <ul> <li>我是li</li> <li>我是li</li> <li>我是li</li> <li>我是li</li> </ul> <ol> <li>我是li</li> <li>我是li</li> <li>我是li</li> <li>我是li</li> </ol> <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> </body>
- 3. parentNode.firstChild
????????firstChild返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。
- 4. parentNode . lastChild
????????lastChild返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。
- 5. parentNode.firstElementChild
????????firstElementchild返回第一个子元素节点，找不到则返回null。
- 6. parentNode . lastElementChild
????????lastElementchild返回最后一个子元素节点，找不到则返回null。
实际开发中，firstchild和 lastchild包含其他节点，操作不方便，而firstElementchild和lastElementchild又有兼容性问题
那么我们如何获取第一个子元素节点或最后一个子元素节点呢?
????????解决方案∶
??????????????如果想要第一个子元素节点，可以使用parentNode.chilren[0]
??????????????如果想要最后一个子元素节点，可以使用parentNode.chilren[parentNode.children.length-1]
<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>案例—下拉菜单
- 导航栏里面的li都要有鼠标经过效果，所以需要循环注册鼠标事件
- 核心原理︰当鼠标经过li里面的第二个孩子ul显示，当鼠标离开，则ul隐藏
<body> <ul class="nav"> <li> <a href="#">微博</a> <ul> <li> <a href="">私信</a> </li> <li> <a href="">评论</a> </li> <li> <a href="">@我</a> </li> </ul> </li> <li> <a href="#">微博</a> <ul> <li> <a href="">私信</a> </li> <li> <a href="">评论</a> </li> <li> <a href="">@我</a> </li> </ul> </li> <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> </body>
3.兄弟结点
- 1.node.nextSibling?
????????nextSibling 返回当前元素的下一个兄弟节点，找不到则返回null。同样，也是包含所有的节点。
- 2. node.previousSibling
????????previousSibling 返回当前元素上一个兄弟节点，找不到则返回null。同样，也是包含所有的节点。
- 3. node .nextElementSibling
????????nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null。
- 4. node.previousElementSibling
????????previousElementSibling 返回当前元素上一个兄弟节点，找不到则返回null.
注意 : 下面这两个方法有兼容性问题，IE9以上才支持。
如何解决兼容性问题？
自己封装一个兼容性函数（了解）
function getNextElementSibling(element) { var el = element; while (el = el.nextSibling) { if (el.nodeType === 1) { return el; } } return null; }//兄弟节点演示 <body> <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> </body>
创捷节点?
document.createElement( 'tagName' )
????????document.createElement()方法创建由tagName指定的 HTML元素。因为这些元素原先不存在,是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。
添加节点?
- 1. node.appendchild(child)
????????node .appendchild()方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after 伪元素。
- 2. node.insertBefore (child，指定元素)
????????node.insertBefore()方法将一个节点添加到父节点的指定子节点前面。类似于css里面的 before伪元素。
<body>
<ul>
<li>123</li>
</ul>
<script>
// 1. 创建节点元素节点
var li = document.createElement('li');
// 2. 添加节点 node.appendChild(child) node 父级 child 是子级 后面追加元素 类似于数组中的push
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>
</body>案例—简单版发布留言
- 核心思路∶点击按钮之后，就动态创建一个li，添加到ul里面。
- 创建li的同时，把文本域里面的值通过li.innerHTML赋值给li
- 如果想要新的留言后面显示就用appendChild如果想要前面显示就用insertBefore
<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>
删除节点
- node.removeChild（child）
????????node.removeChild（）方法从DOM中删除一个子节点，返回删除的节点
<body> <button>删除</button> <ul> <li>熊大</li> <li>熊二</li> <li>光头强</li> </ul> <script> // 1.获取元素 var ul = document.querySelector('ul'); var btn = document.querySelector('button'); // 2. 删除元素 node.removeChild(child) // ul.removeChild(ul.children[0]); // 3. 点击按钮依次删除里面的孩子 btn.onclick = function() { if (ul.children.length == 0) { this.disabled = true; } else { ul.removeChild(ul.children[0]); } } </script> </body>案例—删除留言
- 当我们把文本域里面的值赋值给li 的时候，多添加一个删除的链接
- 需要把所有的链接获取过来，当我们点击当前的链接的时候，删除当前链接所在的li
- 阻止链接跳转需要添加 javascript:void(0); 或者 javascript:;
<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 + "<a href='javascript:;'>删除</a>"; // (2) 添加元素 // ul.appendChild(li); ul.insertBefore(li, ul.children[0]); // (3) 删除元素 删除的是当前链接的li 它的父亲 var as = document.querySelectorAll('a'); for (var i = 0; i < as.length; i++) { as[i].onclick = function() { // node.removeChild(child); 删除的是 li 当前a所在的li this.parentNode; ul.removeChild(this.parentNode); } } } } </script> </body>
复制节点（克隆节点）?
- node.cloneNode ()
????????node.cloneNode()方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点
注意∶
- 如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不克降里面的子节点。
- 如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的子节点。
<body> <ul> <li>1111</li> <li>2</li> <li>3</li> </ul> <script> var ul = document.querySelector('ul'); // 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容 // 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容 var lili = ul.children[0].cloneNode(true); ul.appendChild(lili); </script> </body>案例—动态生成表格
- 因为里面的学生数据都是动态的，我们需要JS动态生成。这里我们模拟数据，自己定义好数据。数据我们采取对象形式存储。
- 所有的数据都是放到tbody里面的行里面。
- 因为行很多，我们需要循环创建多个行(对应多少人)
- 每个行里面又有很多单元格(对应里面的数据），我们还继续使用循环创建多个单元格，并且把数据存入里面(双重for循环)
- 最后一列单元格是删除，需要单独创建单元格。
<style> table { width: 500px; margin: 100px auto; border-collapse: collapse; text-align: center; } td, th { border: 1px solid #333; } thead tr { height: 40px; background-color: #ccc; } </style> <body> <table cellspacing="0"> <thead> <tr> <th>姓名</th> <th>科目</th> <th>成绩</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> <script> // 1.先去准备好学生的数据 var datas = [{ name: '魏璎珞', subject: 'JavaScript', score: 100 }, { name: '弘历', subject: 'JavaScript', score: 98 }, { name: '傅恒', subject: 'JavaScript', score: 99 }, { name: '明玉', subject: 'JavaScript', score: 88 }, { name: '大猪蹄子', subject: 'JavaScript', score: 0 }]; // 2. 往tbody 里面创建行： 有几个人（通过数组的长度）我们就创建几行 var tbody = document.querySelector('tbody'); for (var i = 0; i < datas.length; i++) { // 外面的for循环管行 tr // 1. 创建 tr行 var tr = document.createElement('tr'); tbody.appendChild(tr); // 2. 行里面创建单元格(跟数据有关系的3个单元格) td 单元格的数量取决于每个对象里面的属性个数 for循环遍历对象 datas[i] for (var k in datas[i]) { // 里面的for循环管列 td // 创建单元格 var td = document.createElement('td'); // 把对象里面的属性值 datas[i][k] 给 td // console.log(datas[i][k]); td.innerHTML = datas[i][k]; tr.appendChild(td); } // 3. 创建有删除2个字的单元格 var td = document.createElement('td'); td.innerHTML = '<a href="javascript:;">删除 </a>'; tr.appendChild(td); } // 4. 删除操作 开始 var as = document.querySelectorAll('a'); for (var i = 0; i < as.length; i++) { as[i].onclick = function() { // 点击a 删除 当前a 所在的行(链接的爸爸的爸爸) node.removeChild(child) tbody.removeChild(this.parentNode.parentNode) } } // for(var k in obj) { // k 得到的是属性名 // obj[k] 得到是属性值 // } </script> </body>
三种动态创建元素的区别?
- document.write()
- element.innerHTML
- document.createElement ()
区别：
- document .write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
- innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘
- innerHTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
- createElement()创建多个元素效率稍低一点点，但是结构更清晰
总结: 不同浏览器下，innerHTM效率要比 creatElement高
<body> <button>点击</button> <p>abc</p> <div class="inner"></div> <div class="create"></div> <script> // window.onload = function() { // document.write('<div>123</div>'); // } // 三种创建元素方式区别 1. document.write() //创建元素 如果页面文档流加载完毕，再调用这句话会导致页面重绘 var btn = document.querySelector('button'); btn.onclick = function() { document.write('<div>123</div>'); } // 2. innerHTML 创建元素 var inner = document.querySelector('.inner'); // for (var i = 0; i <= 100; i++) { // inner.innerHTML += '<a href="#">百度</a>' // } var arr = []; for (var i = 0; i <= 100; i++) { arr.push('<a href="#">百度</a>'); } inner.innerHTML = arr.join(''); // 3. document.createElement() 创建元素 var create = document.querySelector('.create'); for (var i = 0; i <= 100; i++) { var a = document.createElement('a'); create.appendChild(a); } </script> </body>
DOM重点核心?
文档对象模型 (Document Object Model，简称DOM ），是W3C组织推荐的处理可扩展标记语言( HTML或者XML)的标准编程接口。
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。
- 对于JavaScript，为了能够使JavaScript操作HTML，JavaScript就有了一套自己的dom编程接口。
- 对于HTML,dom使得html形成一棵dom树，包含文档、元素、节点
我们获取过来的DOM元素是一个对象（object），所以称为文档对象模型
关于DOM操作，主要针对元素操作，主要是创建，增，删，改，查，属性操作和事件操作
6.1创建
- document.write
- innerHTML
- createElement
6.2增
- appendChild
- insertBefore
6.3 删
- removeChild
6.4改
????????主要修改dom的元素属性，dom元素的内容、属性、表单的值等
- 修改元素属性: src、href、title等
- 修改普通元素内容:innerHTML、innerText
- 修改表单元素: value、type、disabled等
- 修改元素样式: style、className
6.5查
????????主要获取查询dom的元素
- DOM提供的API方法: getElementByld、getElementsByTagName 古老用法不太推荐
- H5提供的新方法:querySelector、querySelectorAll提倡
- 利用节点操作获取元素∶父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling) 提倡
6.6属性操作
????????主要针对于自定义属性。
- setAttribute :设置dom的属性值
- getAttribute :得到dom的属性值
- removeAttribute移除属性
6.7事件操作
????????给元素注册事件，采取 事件源.事件类型= 事件处理程序
鼠标事件 触发条件 onclick 鼠标点击左键触发 onmouseover 鼠标经过触发 onmouseout 鼠标离开触发 onfocus 获得鼠标焦点触发 onblur 失去鼠标焦点触发 onmousemove 鼠标移动触发 onmouseup 鼠标弹起触发 onmousedown 鼠标按下触发
事件高级?
1.注册事件（绑定事件）
给元素添加事件，称为注册事件或者绑定事件。
注册事件有两种方式∶传统方式和方法监听注册方式
?1.2 addEventListener事件监听方式
- eventTarget.addEventListener ( type，listener [, useCapture] )
????????eventTarget.addEventListener()方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件时，就会执行事件处理函数。
该方法接收三个参数︰
- type :事件类型字符串，比如click、mouseover，注意这里不要带on
- listener:事件处理函数，事件发生时，会调用该监听函数
- useCapture :可选参数，是一个布尔值，默认是false。学完DOM事件流后，我们再进一步学习
1.3 attachEvent 事件监听方式（了解）
- eventTarget.attachEvent (eventNamewithon,callback)
eventTarget.attachEvent ()方法将指定的监听器注册到eventTarget(目标对象）上，当该对象触发指定的事件时，指定的回调函数就会被执行。
该方法接收两个参数︰
- eventNameWithOn?: 事件类型字符串，比如onclick、onmouseover ，这里要带on
- callback?: 事件处理函数，当目标触发事件时回调函数被调用
<body> <button>传统注册事件</button> <button>方法监听注册事件</button> <button>ie9 attachEvent</button> <script> var btns = document.querySelectorAll('button'); // 1. 传统方式注册事件 btns[0].onclick = function() { alert('hi'); } btns[0].onclick = function() { alert('hao a u'); } // 2. 事件侦听注册事件 addEventListener // (1) 里面的事件类型是字符串 必定加引号 而且不带on // (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序） btns[1].addEventListener('click', function() { alert(22); }) btns[1].addEventListener('click', function() { alert(33); }) // 3. attachEvent ie9以前的版本支持 btns[2].attachEvent('onclick', function() { alert(11); }) </script> </body>1.4注册事件兼容性方案（了解）
<body> <script type="text/javascript"> function addEventListener(element,eventName,fn) { //判断当前浏览器是否支持addEventListener方法 if (element.addEventListener) { element.addEventListener(eventName,fn); //第三个参数 默认是false } else if (element.attachEvent) { element.attachEvent('on' + eventName,fn); } else { //相当于 element.onclick = fn; element['on' + eventName] = fn; } } </script> </body>2.删除事件
2.1传统注册方式
- eventTarget.onclick = null;
2.2方法监听注册方式
- eventTarget.removeEventListener(type，listener [，usecapture] ) ;
- eventTarget.detachEvent (eventNamewithon,callback);
2.3删除事件兼容性解决方案
<body> <script type="text/javascript"> function removeEventListener(element,eventName,fn) { //判断当前浏览器是否支持removeEventListener方法 if (element.removeEventListener) { element.removeEventListener(eventName,fn); //第三个参数 默认是false } else if (element.detachEvent) { element.detachEvent('on' + eventName,fn); } else { element['on' + eventName] = fn; } } </script> </body><body> <div>1</div> <div>2</div> <div>3</div> <script> var divs = document.querySelectorAll('div'); divs[0].onclick = function() { alert(11); // 1. 传统方式删除事件 divs[0].onclick = null; } // 2. removeEventListener 删除事件 divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号 function fn() { alert(22); divs[1].removeEventListener('click', fn); } // 3. detachEvent divs[2].attachEvent('onclick', fn1); function fn1() { alert(33); divs[2].detachEvent('onclick', fn1); } </script> </body>
DOM事件流?
事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。
比如我们给一个div注册了点击事件:
DOM事件流分为3个阶段︰
- 捕获阶段
- 当前目标阶段
- 冒泡阶段
?????????我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点)的捕获过程;之后会产生泡泡，会在最低点(最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡。
- 事件冒泡︰IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到到DOM最顶层节点的过程。
- 事件捕获︰网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程。
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。
注意
- Js 代码中只能执行捕获或者冒泡其中的一个阶段。
- onclick 和attachEvent只能得到冒泡阶段。
- addEventListener(type,listener[,useCapture])第三个参数如果是true，表示在事件捕获阶段调用事件处理程序;如果是false (不写默认就是false )，表示在事件冒泡阶段调用事件处理程序。
- 实际开发中我们很少使用事件捕获，我们更关注事件冒泡。
- 有些事件是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave
- 事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件，我们后面讲
<body> <div class="father"> <div class="son">son盒子</div> </div> <script> // dom 事件流 三个阶段 // 1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。 // 2. onclick 和 attachEvent（ie） 只能得到冒泡阶段。 // 3. 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段 document -> html -> body -> father -> son // var son = document.querySelector('.son'); // son.addEventListener('click', function() { // alert('son'); // }, true); // var father = document.querySelector('.father'); // father.addEventListener('click', function() { // alert('father'); // }, true); // 4. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段 son -> father ->body -> html -> document var son = document.querySelector('.son'); son.addEventListener('click', function() { alert('son'); }, false); var father = document.querySelector('.father'); father.addEventListener('click', function() { alert('father'); }, false); document.addEventListener('click', function() { alert('document'); }) </script> </body>
事件对象??
1.基础概念?
- eventTarget.onclick = function (event) { }
- eventTarget.addEventListener ( 'click ', function(event){ })????????//这个event就是事件对象，我们还喜欢的写成e 或者evt
官方解释:event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。
简单理解∶事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法。比如:
- 谁绑定了这个事件。
- 鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。
- 键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。
?2.事件对象的使用语法
eventTarget.onclick = function（event） { //这个event就是事件对象，我们还喜欢写成e或者evt } eventTarget.addEventListener('click',function(event) { //这个event就是事件对象，我们还喜欢写成e或者evt }????????这个event是个形参，系统帮我们设定为事件对象，不需要传递实参过去。
????????当我们注册事件时，event对象就会被系统自动创建，并依次传递给事件监听器(事件处理函数)。3.事件对象的兼容性方案
????????事件对象本身的获取存在兼容问题:
- 标准浏览器中是浏览器给方法传递的参数，只需要定义形参e就可以获取到。
- 在IE6~8中，浏览器不会给方法传递参数，如果需要的话，需要到window.event中获取查找。
解决:
e = e ll window.event;<body> <div>123</div> <script> // 事件对象 var div = document.querySelector('div'); div.onclick = function(e) { // console.log(e); // console.log(window.event); // e = e || window.event; console.log(e); } // div.addEventListener('click', function(e) { // console.log(e); // }) // 1. event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看 // 2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数 // 3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊， // 如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键 // 4. 这个事件对象我们可以自己命名 比如 event 、 evt、 e // 5. 事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法 e = e || window.event; </script> </body>
事件对象的常见属性和方法?
事件对象属性方法 说明 e.target 返回触发事件的对象????????标准 e.srcElement 返回触发事件的对象????????非标准ie6-8使用 e.type 返回事件的类型? 比如click mouseover不带on e.cancelBubble 该属性阻止冒泡????????非标准ie6-8使用 e.returnValue 该属性阻止默认事件(默认行为)? ?非标准 ie6-8使用比如不让链接跳转 e.preventDefault() 该方法阻止默认事件（默认行为)? 标准? 比如不让链接跳转 e.stopPropagation() 阻止冒泡标准 ?target 和 srcElement 用法
<body> <div>123</div> <ul> <li>abc</li> <li>abc</li> <li>abc</li> </ul> <script> // 常见事件对象的属性和方法 // 1. e.target 返回的是触发事件的对象（元素） this 返回的是绑定事件的对象（元素） // 区别 ： e.target 点击了那个元素，就返回那个元素 this 那个元素绑定了这个点击事件，那么就返回谁 var div = document.querySelector('div'); div.addEventListener('click', function(e) { console.log(e.target); console.log(this); }) var ul = document.querySelector('ul'); ul.addEventListener('click', function(e) { // 我们给ul 绑定了事件 那么this 就指向ul console.log(this); console.log(e.currentTarget); // e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li console.log(e.target); }) // 了解兼容性 // div.onclick = function(e) { // e = e || window.event; // var target = e.target || e.srcElement; // console.log(target); // } // 2. 了解 跟 this 有个非常相似的属性 currentTarget ie678不认识 </script> </body>type、preventDefault()、returnValue用法
<body> <div>123</div> <a href="http://www.baidu.com">百度</a> <form action="http://www.baidu.com"> <input type="submit" value="提交" name="sub"> </form> <script> // 常见事件对象的属性和方法 // 1. 返回事件类型 var div = document.querySelector('div'); div.addEventListener('click', fn); div.addEventListener('mouseover', fn); div.addEventListener('mouseout', fn); function fn(e) { console.log(e.type); } // 2. 阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交 var a = document.querySelector('a'); a.addEventListener('click', function(e) { e.preventDefault(); // dom 标准写法 }) // 3. 传统的注册方式 a.onclick = function(e) { // 普通浏览器 e.preventDefault(); 方法 // e.preventDefault(); // 低版本浏览器 ie678 returnValue 属性 // e.returnValue; // 我们可以利用return false 也能阻止默认行为 没有兼容性问题 特点： return 后面的代码不执行了， 而且只限于传统的注册方式 return false; alert(11); } </script> </body>
阻止事件冒泡的两种方法?
事件冒泡︰开始时由最具体的元素接收，然后逐级向上传播到到DOM最顶层节点。
事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。1.阻止事件冒泡
- 标准写法∶利用事件对象里面的 stopPropagation ()方法
????????????????e.stopPropagation ()
- 非标准写法:IE6-8利用事件对象 cancelBubble 属性
2.阻止事件冒泡的兼容性解决方案
if (e && e.stopPropagation) { e.stopPropagation(); }else { window.event.cancelBubble = true; }<style> .father { overflow: hidden; width: 300px; height: 300px; margin: 100px auto; background-color: pink; text-align: center; } .son { width: 200px; height: 200px; margin: 50px; background-color: purple; line-height: 200px; color: #fff; } </style> <body> <div class="father"> <div class="son">son儿子</div> </div> <script> // 常见事件对象的属性和方法 // 阻止冒泡 dom 推荐的标准 stopPropagation() var son = document.querySelector('.son'); son.addEventListener('click', function(e) { alert('son'); e.stopPropagation(); // stop 停止 Propagation 传播 e.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡 }, false); var father = document.querySelector('.father'); father.addEventListener('click', function() { alert('father'); }, false); document.addEventListener('click', function() { alert('document'); }) </script> </body>
事件委托（代理，委派）?
事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。生活中有如下场景∶
咱们班有100个学生，快递员有100个快递，如果一个个的送花费时间较长。同时每个学生领取的时候，也需要排队领取，也花费时间较长，何如?
解决方案∶快递员把100个快递，委托给班主任，班主任把这些快递放到办公室，同学们下课自行领取即可。
优势︰快递员省事，委托给班主任就可以走了。同学们领取也方便，因为相信班主任。
事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。程序中也有如此场景︰<ul> <li>你好呀</li> <li>你好呀</li> <li>你好呀</li> <li>你好呀</li> <li>你好呀</li> </ul>点击每个li都会弹出对话框，以前需要给每个l注册事件，是非常辛苦的，而且访问DOM的次数越多，这就会延长整个页面的交互就绪时间。
1.事件委托
????????事件委托也称为事件代理，在jQuery里面称为事件委派。
2.事件委托的原理
????????不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
????????以上案例:给ul注册点击事件，然后利用事件对象的target来找到当前点击的li,因为点击 li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器。
3.事件委托的作用
????????我们只操作了一次DOM，提高了程序的性能。
<body> <ul> <li>知否知否，点我应有弹框在手！</li> <li>知否知否，点我应有弹框在手！</li> <li>知否知否，点我应有弹框在手！</li> <li>知否知否，点我应有弹框在手！</li> <li>知否知否，点我应有弹框在手！</li> </ul> <script> // 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点 var ul = document.querySelector('ul'); ul.addEventListener('click', function(e) { // alert('知否知否，点我应有弹框在手！'); // e.target 这个可以得到我们点击的对象 e.target.style.backgroundColor = 'pink'; }) </script> </body>
常用的鼠标事件?
1.禁止鼠标右键菜单
contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
document.addEventListener ( 'contextmenu ', function(e){ e.preventDefault (); } )2禁止鼠标选中( selectstart?开始选中)
document.addEventListener ('selectstart', function (e) { e.preventDefault (); } )<body> 我是一段不愿意分享的文字 <script> // 1. contextmenu 我们可以禁用右键菜单 document.addEventListener('contextmenu', function(e) { e.preventDefault(); }) // 2. 禁止选中文字 selectstart document.addEventListener('selectstart', function(e) { e.preventDefault(); }) </script> </body>
鼠标事件对象?
event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象MouseEvent和键盘事件对象KeyboardEvent。
鼠标事件对象 说明 e.clientX 返回鼠标相对于浏览器窗口可视区的×坐标 e.clientY 返回鼠标相对于浏览器窗口可视区的Y坐标 e.pagex 返回鼠标相对于文档页面的X坐标IE9+支持 e.pageY 返回鼠标相对于文档页面的Y坐标IE9+支持 e.screenX 返回鼠标相对于电脑屏幕的×坐标 e.screenY 返回鼠标相对于电脑屏幕的Y坐标 <body> <script> // 鼠标事件对象 MouseEvent document.addEventListener('click', function(e) { // 1. client 鼠标在可视区的x和y坐标 console.log(e.clientX); console.log(e.clientY); console.log('---------------------'); // 2. page 鼠标在页面文档的x和y坐标 console.log(e.pageX); console.log(e.pageY); console.log('---------------------'); // 3. screen 鼠标在电脑屏幕的x和y坐标 console.log(e.screenX); console.log(e.screenY); }) </script> </body>案例—跟随鼠标的天使
- 鼠标不断的移动，使用鼠标移动事件:mousemove
- 在页面中移动，给document注册事件
- 图片要移动距离，而且不占位置，我们使用绝对定位即可
- 核心原理∶每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标做为图片的top和left值就可以移动图片
<style> img { position: absolute; top: 2px; } </style> <body> <img src="images/angel.gif" alt=""> <script> var pic = document.querySelector('img'); document.addEventListener('mousemove', function(e) { // 1. mousemove只要我们鼠标移动1px 就会触发这个事件 // console.log(1); // 2.核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标， 把这个x和y坐标做为图片的top和left 值就可以移动图片 var x = e.pageX; var y = e.pageY; console.log('x坐标是' + x, 'y坐标是' + y); //3 . 千万不要忘记给left 和top 添加px 单位 pic.style.left = x - 50 + 'px'; pic.style.top = y - 40 + 'px'; }); </script> </body>
常用的键盘事件
?事件除了使用鼠标触发，还可以使用键盘触发。
键盘事件 触发条件 onkeyup 某个键盘按键被松开时触发 onkeydown 某个键盘按键被按下时触发 onkeypress 某个键盘按键被按下时触发? ? 但是它不识别功能键比如ctrl shift箭头等 注意∶
- 如果使用addEventListener不需要加on
- onkeypress和前面2个的区别是，它不识别功能键，比如左右箭头，shift等。
- 三个事件的执行顺序是: keydown -- keypress ---keyup
<body> <script> // 常用的键盘事件 //1. keyup 按键弹起的时候触发 // document.onkeyup = function() { // console.log('我弹起了'); // } document.addEventListener('keyup', function() { console.log('我弹起了'); }) //3. keypress 按键按下的时候触发 不能识别功能键 比如 ctrl shift 左右箭头啊 document.addEventListener('keypress', function() { console.log('我按下了press'); }) //2. keydown 按键按下的时候触发 能识别功能键 比如 ctrl shift 左右箭头啊 document.addEventListener('keydown', function() { console.log('我按下了down'); }) // 4. 三个事件的执行顺序 keydown -- keypress -- keyup </script> </body>
键盘事件对象属性 说明 keyCode 返回该键的ASCI值 注意: onkeydown 和 onkeyup 不区分字母大小写，onkeypress区分字母大小写。? ?在我们实际开发中，我们更多的使用keydown和keyup，它能识别所有的键(包括功能键) Keypress 不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值
<body> <script> // 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值 // 1. 我们的keyup 和keydown事件不区分字母大小写 a 和 A 得到的都是65 // 2. 我们的keypress 事件 区分字母大小写 a 97 和 A 得到的是65 document.addEventListener('keyup', function(e) { // console.log(e); console.log('up:' + e.keyCode); // 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键 if (e.keyCode === 65) { alert('您按下的a键'); } else { alert('您没有按下a键') } }) document.addEventListener('keypress', function(e) { // console.log(e); console.log('press:' + e.keyCode); }) </script> </body>案例—模拟京东按下"s"定位输入框
- 核心思路∶检测用户是否按下了s键，如果按下s键，就把光标定位到搜索框里面
- 使用键盘事件对象里面的keyCode判断用户按下的是否是s键
- 搜索框获得焦点:使用js里面的focus()方法
<body> <input type="text"> <script> // 核心思路： 检测用户是否按下了s 键，如果按下s 键，就把光标定位到搜索框里面 // 使用键盘事件对象里面的keyCode 判断用户按下的是否是s键 // 搜索框获得焦点： 使用 js 里面的 focus() 方法 var search = document.querySelector('input'); document.addEventListener('keyup', function(e) { // console.log(e.keyCode); if (e.keyCode === 83) { search.focus(); } }) </script> </body>案例—模拟京东单号查询（输入快递单，上方变大显示）
- 快递单号输入内容时，上面的大号字体盒子( con )显示这里面的文字
- 同时把快递单号里面的值( value )获取过来赋值给con盒子( innerText )做为内容
- 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子
- 注意:keydown和keypress在文本框里面的特点∶他们两个事件触发的时候，文字还没有落入文本框中。
- keyup事件触发的时候，文字已经落入文本框里面了
- 当我们失去焦点，就隐藏这个con盒子
- 当我们获得焦点，并且文本框内容不为空，就显示这个con盒子
<style> * { margin: 0; padding: 0; } .search { position: relative; width: 178px; margin: 100px; } .con { display: none; position: absolute; top: -40px; width: 171px; border: 1px solid rgba(0, 0, 0, .2); box-shadow: 0 2px 4px rgba(0, 0, 0, .2); padding: 5px 0; font-size: 18px; line-height: 20px; color: #333; } .con::before { content: ''; width: 0; height: 0; position: absolute; top: 28px; left: 18px; border: 8px solid #000; border-style: solid dashed dashed; border-color: #fff transparent transparent; } </style> <body> <div class="search"> <div class="con">123</div> <input type="text" placeholder="请输入您的快递单号" class="jd"> </div> <script> var con = document.querySelector('.con'); var jd_input = document.querySelector('.jd'); jd_input.addEventListener('keyup', function() { // console.log('输入内容啦'); if (this.value == '') { con.style.display = 'none'; } else { con.style.display = 'block'; con.innerText = this.value; } }) // 当我们失去焦点，就隐藏这个con盒子 jd_input.addEventListener('blur', function() { con.style.display = 'none'; }) // 当我们获得焦点，就显示这个con盒子 jd_input.addEventListener('focus', function() { if (this.value !== '') { con.style.display = 'block'; } }) </script> </body>
