DOM

简介

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口

DOM树

窗口加载事件

// 为window绑定一个onload事件
window.onload = function() {}
或者
window.addEventListener('load',function() {});
// 该事件对应的响应函数将会在页面加载完成之后执行
// 这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了

window.onload是窗口（页面）加载事件，会在页面或图像加载完成后立即发生。通常用于 < body > 元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。

<!-- 图片载入后立即弹出："图片加载完成" -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function loadImage(){alert("图片加载完成");
}
</script>
</head>
<body>    <img src="logo.png" onload="loadImage()" width="336" height="36">
</body>
</html>

事件

// 事件三要素
// 点击一个按钮，弹出对话框
// 1.事件是由三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素
// 事件源 事件被触发的对象 谁 在这个案例里是按钮
var btn = document.getElementById('btn');
// 事件类型 如何触发 什么事件 比如鼠标点击（onclick） 还是鼠标经过 还是键盘按下
// 事件处理程序 通过一个函数赋值的方式 完成
btn.onclick = function() {alert('帅！');
}

执行事件的步骤

获取事件源
注册事件（绑定事件）
添加事件处理程序（采取函数赋值形式）

// 执行事件步骤
// 点击div 控制台输出 我被选中了
// 1.获取事件源
var div = document.querySelector('div');
// 2.绑定事件 注册事件1
// div.onclick
// 3.添加事件处理程序
div.onclick = function() {console.log('我被选中了');
}

常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

获取元素

获取页面中的元素可以使用以下几种方式

根据ID获取
根据标签名获取
通过HTML5新增的方法获取
特殊元素获取

根据ID获取

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><button id="btn">我是一个按钮</button><!-- 1.因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面 --><script type="text/javascript">// 获取button对象// 2.get 获得 element 元素 by 通过// 3.参数id是大小写敏感的字符串// 获取button对象var btn = document.getElementById('btn');// 4.返回的是一个元素对象console.log(typeof btn); // object// 5.console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法console.dir(btn);</script></body>
</html>

根据标签名获取

// getElementsByTagName()方法可以返回带有指定标签名的对象的集合
document.getElementsByTagName('标签名');

注意：

因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历
得到元素对象是动态的

还可以获取某个元素（父元素）内部所有指定标签名的子元素

element.getElementsByTagName('标签名');

注意：父元素必须是单个对象（必须指明是哪一个元素对象），获取时不包括父元素自己

<body><ul><li>最带琴女36E</li><li>最带琴女37E</li><li>最带琴女38E</li><li>最带琴女39E</li><li>最带琴女40E</li></ul><ol><li>大大大</li><li>大大大</li><li>大大大</li><li>大大大</li><li>大大大</li></ol><script type="text/javascript">// 获取所有的li（这里有10个）// 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.如果页面中没有这个元素 返回的是空的伪数组的形式// 获取ol里面的li（这里有5个）// 5.element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素var ol = document.getElementsByTagName('ol'); // [ol]console.log(ol[0].getElementsByTagName('li'));</script>
</body>

根据name属性获取

getElementsByName()

通过HTML5新增的方法获取

document.getElementsByClassName('类名'); //  根据类名返回元素对象集合document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象document.querySelectorAll('选择器'); // 根据指定选择器返回

<body><div class="box"><ul><li id="nav">首页</li><li>产品</li></ul></div><script type="text/javascript">// 1.getElementsByClassName 根据类名获得某些元素集合var boxs = document.getElementsByClassName('box');console.log(boxs);// 2.querySelector 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 .box #navvar 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>

获取特殊元素

获取body元素

document.body // 返回body元素对象

获取HTML元素

document.documentElement // 返回html元素对象

节点

Node—构成HTML文档最基本的单元

常用节点分为四类

文档节点：整个HTML文档
元素节点：HTML文档中的HTML标签
属性节点：元素的属性
文本节点：HTML标签中的文本内容

获取元素通常使用两种方式：

利用DOM提供的方法获取元素

document.getElementById()
document.getElementsByTagName()
document.querySelector 等
// 逻辑性不强、繁琐

利用节点层级关系获取元素

利用父子兄节点关系获取元素

逻辑性强，但是兼容性稍差

这两种方式都可以获取元素节点，我们后面都会使用，但是节点操作更简单

父子节点

node.parentNode
// 1. parenNode 属性可返回某节点的父节点，注意是最近的一个父节点
// 2. 如果指定的节点没有父节点则返回 null

<body><!-- 节点的优点 --><div class="box"><span class="erweima">x</span></div><script type="text/javascript">// 1.父节点 parentNodevar erweima = document.querySelector('.erweima');// var box = document.querySelector('.box');// 得到的是离元素最近的父级节点（亲爸爸），如果找不到父节点就返回nullconsole.log(erweima.parentNode); // box</script>
</body>

子节点

parentNode.childNodes (标准)
// parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合
// 注意：返回值里面包含了所有子节点，包括元素节点，文本节点等
// 如果只想要获得里面的元素节点，则需要专门处理，所以我们一般不提倡使用childNodesparentNode.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><div class="demo"><div class="box"><span class="erweima">x</span></div></div><script type="text/javascript">// DOM 提供的方法（API）获取var ul = document.querySelector('ul');var lis = ul.querySelectorAll('li');// 1.子节点 childNodes 所有的子节点 包含 元素节点 文本节点等等console.log(ul.childNodes);// [text, li, text, li, text, li, text, li, text]console.log(ul.childNodes[0].nodeType); // 3console.log(ul.childNodes[1].nodeType); // 1// 2.children 获取所有的子元素节点 也是我们实际开发常用的console.log(ul.children); // [li, li, li, li]</script>
</body>

第一个子元素和最后一个子元素

parentNode.firstChild
// firstChild 返回第一个节点，找不到则返回 null，同样，也是包含所有的节点parentNode.lastChild
// lastChild 返回最后一个节点，找不到则返回 null，同样，也是包含所有的节点// 注意：这两个方法有兼容性问题，IE9以上才支持

<body><ol><li>我是li1</li><li>我是li2</li><li>我是li3</li><li>我是li4</li></ol><script type="text/javascript">var ol = document.querySelector('ol');// 1.firstChild 第一个子节点 不管是文本节点还是元素节点console.log(ol.firstChild); // textconsole.log(ol.lastChild); // text// 2.firstElementChild 返回第一个子元素节点console.log(ol.firstElementChild); // li1console.log(ol.lastElementChild);  // li4// 3.实际开发的写法 既没有兼容性问题又返回第一个子元素console.log(ol.children[0]); // li1// 最后一个console.log(ol.children[ol.children.length - 1]); // li4</script>
</body>

兄弟节点

node.nextSibling
// nextSibling 返回当前元素的下一个兄弟节点，找不到则返回 null。同样，也是包含所有的节点node.previousSibling
// perviousSibling 返回当前元素上一个兄弟节点，找不到则返回 null。同样，也是包含所有的节点// 注意：下面的两个方法有兼容性问题，IE9以上才支持
node.nextElementSibling
// nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回 nullnode.previousElementSibling
// previousElementSibling 返回当前元素上一个兄弟节点，找不到则返回 null

<body><div>我是div</div><span>我是span</span><script type="text/javascript">var div = document.querySelector('div');// nextSibling 下一个兄弟节点 包含元素节点或者文本节点等console.log(div.nextSibling); // #textconsole.log(div.previousSibling); // #textconsole.log(div.nextElementSibling); // <span>我是span</span>console.log(div.previousElementSibling); // null</script>
</body>

创建节点

document.createElement('tagName');
// 可用于创建一个元素节点对象，需要一个标签名作为参数，将会根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回// 创建li元素节点
var li = document.createElement('li');

创建文本节点

document.createTexNode();
// 可用于创建一个文本节点对象
// 需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回// 创建娑娜文本节点
document.createTextNode('娑娜');

添加节点

appendChild()
// 向一个父节点中添加一个新的子节点
// 用法：父节点.appendChild(子节点);// 创建指定文本的li
var btn = document.createElement("BUTTON");
var t = ocument.createTextNode("CLICK ME");
// 把 CLICK ME 添加到按钮btn里
btn.appendChild(t);

insertBefore()
// 可以在指定的子节点前插入新的子节点
// 语法：父节点.indertBefore(新节点,旧节点);

// 1.创建节点元素节点
var li = document.createElement('li');
// 获取ul
var ul = document.querySelector('ul');
// 2.添加节点 node.appendChild(child) node 父级 child是子级 后面追加元素 类似于数组中的push
ul.appendChild(li);
// 3.添加节点 node.inserBefore(child,指定元素);
var lili = document.createElement('li');
ul.insertBefore(lili,ul.children[0]);
// 4.我们想要页面添加一个新的元素：1.创建元素 2.添加元素

替换节点

replaceChild()
// 可以使用指定的子节点替换已有的子节点

<!-- 语法：父节点.replaceChild(新节点,旧节点); -->
<body><ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul><p id="demo">单击按钮替换列表中的第一项。</p><button onclick="myFunction()">点我</button><script>function myFunction(){var textnode=document.createTextNode("Water");var item=document.getElementById("myList").childNodes[0];item.replaceChild(textnode,item.childNodes[0]);}</script><p>首先创建一个文本节点。<br>然后替换第一个列表中的第一个子节点。</p><p><strong>注意:</strong>这个例子只将文本节点的文本节点“Coffee”替换为“Water”,而不是整个LI元素,这也是替换节点的一种备选。</p>
</body>

删除节点

removeChild()
// 可以删除一个子节点
// 语法：父节点.removeChild(子节点);

<body><button>删除</button><ul><li>熊大</li><li>熊二</li><li>光头强</li></ul><script type="text/javascript">// 1.获取元素var ul = document.querySelector('ul');var btn = document.querySelector('button');// 2.删除元素 node.removeChild(child)// ul.removeChild(ul.children[0]);btn.onclick = function() {if (ul.children.length == 0) {// 数组长度为0时，按钮不可点击this.disabled = true;} else {ul.removeChild(ul.children[0]);}}</script>
</body>

复制节点

cloneNode()
// cloneNode() 方法返回调用该方法的节点的一个副本，也称为克隆节点/拷贝节点
// 注意：
// 1. 如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点
// 2. 如果括号为true，则是深度拷贝，会复制节点本身以及里面所有的子节点

<body><ul id="myList1"><li>Coffee</li><li>Tea</li></ul><ul id="myList2"><li>Water</li><li>Milk</li></ul><p id="demo">单击按钮将项目从一个列表复制到另一个列表中</p><button onclick="myFunction()">点我</button><script>function myFunction(){var itm=document.getElementById("myList2").lastChild;// 若里面为false，则文本Milk不会被复制，只有空的livar cln=itm.cloneNode(true);document.getElementById("myList1").appendChild(cln);}</script>
</body>

操作元素

DOM操作可以改变网页的内容、结构、样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。

改变元素内容

element.innerText
// 从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉element.innerHTML
// 起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">div {width: 300px;height: 30px;line-height: 30px;color: #fff;background-color: pink;}</style></head><body><button>显示当前系统时间</button><div>某个时间</div><script type="text/javascript">// 当我们点击了按钮，div里面的文字会发生变化（某个时间变成当前系统时间）// 1.获取元素var btn = document.querySelector('button');var div = document.querySelector('div');// 2.注册事件btn.onclick = function() {// div.innerText = '2077-7-7';div.innerText = getDate();}function getDate() {var date = new Date();// 我们写一个2021年7月27日星期二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];}</script></body>
</html>

innerText 和 innerHTML的区别

innerText 不识别html标签非标准
innerHTML 识别html标签 W3C标准

常用元素的属性操作

1.innerText\innerHTML 改变元素内容
2.src、href
3.id、alt、title

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">img {width: 300px;}</style></head><body><button id="sona">娑娜</button><button id="gewen">格温</button><br><img src="../img/娑娜.jpg" ><script type="text/javascript">// 修改元素属性 src// 1.获取元素var sona = document.getElementById('sona');var gewen = document.getElementById('gewen');var img = document.querySelector('img');// 2.注册事件 处理程序gewen.onclick = function() {img.src = '../img/格温.jpg';img.title = '灵罗娃娃'}sona.onclick = function() {img.src = '../img/娑娜.jpg';img.title = '琴瑟仙女'}</script></body>
</html>

图片切换练习

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>图片切换</title><style type="text/css">* {margin: 0;padding: 0;}img {width: 500px;height: 550px;}#outer {width: 500px;margin: 50px auto;padding: 10px;background-color: lightpink;text-align: center;}</style></head><script type="text/javascript">window.onload = function() {// 点击按钮切换图片// 获取两个按钮var prev = document.getElementById('prev');var next = document.getElementById('next');// 要切换图片就要修改img标签的src属性// 获取img标签var img = document.getElementsByTagName('img')[0];// 创建一个数组，用来保存图片的路径var imgArr = ['img/1.png','img/2.png','img/3.png','img/4.jpg'];// 创建变量，来保存当前正在显示的图片的索引var index = 0;// 设置提示文字// 获取id为info的p元素var info = document.getElementById('info');info.innerHTML = '一共 ' + imgArr.length + ' 张图片，当前第 ' + (index + 1) + ' 张';// 分别为两个按钮绑定单机响应函数prev.onclick = function() {// 切换图片就是修改img的src属性// 要修改一个元素的属性： 元素.属性 = 属性值// 切换到上一张，索引自减index--;// 判断index是否小于0if (index < 0) {index = imgArr.length - 1;}img.src = imgArr[index];// 当点击按钮后，重新设置信息info.innerHTML = '一共 ' + imgArr.length + ' 张图片，当前第 ' + (index + 1) + ' 张';};next.onclick = function() {// 切换到下一张，索引自加index++;if (index > imgArr.length - 1) {index = 0;}img.src = imgArr[index];info.innerHTML = '一共 ' + imgArr.length + ' 张图片，当前第 ' + (index + 1) + ' 张';};}</script><body><div id="outer"><p id="info"></p><img src="img/1.png" ><button id="prev">上一张</button><button id="next">下一张</button></div></body>
</html>

表单元素的属性操作

// 利用DOM可以操作如下表单元素的属性
type、value、checked、selected、disabled

显示隐藏密码

仿京东显示密码，点击按钮将密码框切换为文本框，并且可以查看密码明文

分析：

核心思路：点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码
一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框
算法：利用一个flag变量，来判断flag的值，如果是1就切换为文本框，flag设置为0，如果是0就切换为密码框，flag设置为1

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.box {position: relative;width: 400px;border: 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></head><body><div class="box"><label for=""><img src="../img/眼1.jpeg" id="eye" ></label><input type="password" id="pwd"></div><script type="text/javascript">// 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/眼1.jpeg';flag = 1; // 赋值操作} else {pwd.type = 'password';eye.src = '../img/眼2.jpg';flag = 0;}}</script></body>
</html>

获取元素当前显示的样式

第一种

注意该方法只支持IE浏览器，其他的报错

// 语法：元素.currentStyle.样式名
// 它可以用来读取当前元素正在显示的样式
alert(box1.currentStyle.width);// 如果当前元素没有设置该样式，则获取它的默认值

<script type="text/javascript">window.onload = function() {var btn01 = document.getElementById('btn01');var box1 = document.getElementById('box1');btn01.onclick = function() {alert(box1.currentStyle.width);};}
</script>
<body><button id="btn01">点我一下</button><br><br><div id="box1" style="width: 20px;"></div>
</body>

第二种

// 语法：元素.style.样式名
alert(box1.style.width);// 通过style属性设置和读取的都是内联样式，无法读取样式表中的样式

<script type="text/javascript">window.onload = function() {var btn01 = document.getElementById('btn01');var box1 = document.getElementById('box1');btn01.onclick = function() {alert(box1.style.width);};}
</script>
<body><button id="btn01">点我一下</button><br><br><div id="box1" style="width: 20px;"></div>
</body>

第三种

getComputedStyle()

该方法会返回一个对象，对象中封装了当前元素对应的样式

可以通过对象，样式名来读取样式
如果获取的样式没有设置，则会获取到真实的值，而不是默认值，比如：没有设置width，它不会获取到auto，而是一个长度。
该方法不支持IE8及以下的浏览器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title><style type="text/css">#test {height: 50px;background-color: rgb(178,116,230);}</style></head><body><p>点击按钮计算 DIV 的背景颜色。</p><p><button onclick="myFunction()">点我</button></p><div id="test">测试 DIV</div><p>计算值为: <span id="demo"></span></p>
<script>function myFunction(){var elem = document.getElementById("test");var theCSSprop = window.getComputedStyle(elem, null).getPropertyValue("background-color");document.getElementById("demo").innerHTML = theCSSprop;}
</script></body>
</html>

getPropertyValue() 方法返回指定的 CSS 属性的值。

样式属性操作

可以通过JS修改元素的大小、颜色、位置等样式

1.element.style          行内样式操作
2.element.className      类名样式操作

注意：

JS里面的样式采取驼峰命名法比如 forntSize、backgroundColor
JS修改style样式操作，产生的是行内样式，css权重比较高
如果样式修改较多，可以采取操作类名方式更改元素样式
class因为是个保留字，因此使用className来操作元素类名属性
className会直接更改元素的类名，会覆盖原先的类名

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">div {width: 200px;height: 200px;background-color: pink;}</style></head><body><div></div><script type="text/javascript">// 1.获取元素var div = document.querySelector('div');// 2.注册事件 处理程序div.onclick = function() {// div.style里面的属性 采取驼峰命名法// 如果CSS中的样式名含有-，如：background-color// 需要将这种样式名修改为驼峰命名法// 去掉-，然后将-后的字母大写this.style.backgroundColor = 'purple';this.style.width = '250px';}</script></body>
</html>

案例

仿淘宝关闭二维码案例

核心思路：利用样式的显示和隐藏完成，display：none隐藏元素display：block显示元素
点击按钮，就让这个二维码盒子隐藏起来即可

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.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;}</style></head><body><div class="box">淘宝二维码<img src="../img/2维码.jpg" ><i class="close-btn">x</i></div><script type="text/javascript">// 1.获取元素var btn = document.querySelector('.close-btn');var box = document.querySelector('.box');// 2.注册事件 程序处理btn.onclick = function() {box.style.display = 'none';}</script></body>
</html>

案例2

显示隐藏文本框内容

当鼠标点击文本框时，里面的默认文字隐藏，当鼠标离开文本框时，里面的文字显示

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">input {color: #999;}</style></head><body><input type="text" value="手机"><script type="text/javascript">// 1.获取资源var text = document.querySelector('input');// 2.注册事件 获得焦点事件 onfocustext.onfocus = function() {// console.log('得到焦点');if(this.value === '手机') {this.value = '';}// 获得焦点需要把文本框里面的文字颜色变黑this.style.color = '#333';}// 3.注册事件 失去焦点事件 onblurtext.onblur = function() {// console.log('失去焦点');if(this.value === '') {this.value = '手机';}// 失去焦点需要把文本框里面的文字颜色变浅色this.style.color = '#999';}</script></body>
</html>

使用className修改样式属性

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.change {background-color: purple;color: #fff;font-size: 25px;margin-top: 100px;}</style></head><body><div class="first">文本</div><script type="text/javascript">// 1.使用element.style获得修改元素样式 如果样式比较少 或者 功能简单 的情况下使用var test = document.querySelector('div');test.onclick = function() {// this.style.backgroundColor = 'pueple';// 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>
</html>

案例

密码框格式提示错误信息：用户如果离开密码框，里面输入个数不是6~16，则提示错误信息，否则提示输入正确信息

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.div {width: 600px;margin: 100px auto;}.message {display: inline-block;font-size: 12px;color: #999;background:url(../img/眼1.jpeg) no-repeat left center;padding-left: 20px;}.wrong {color: red;background-image: url(../img/眼2.jpg);}.right {color: green;background-image: url(../img/眼1.jpeg);}</style></head><body><div class="register"><input type="password" class="ipt"><p class="message">请输入6~16位密码</p></div><script type="text/javascript">// 1.获取元素var ipt = document.querySelector('.ipt');var message = document.querySelector('.message');// 2.注册事件ipt.onblur = function() {// 根据表单里面值的长度 ipt.value.lengthif (this.value.length < 6 || this.value.length > 16) {// console.log('错误');message.className = 'message wrong';message.innerHTML = '输入错误';} else {message.className = 'message right';message.innerHTML = '输入正确';}}</script></body>
</html>

拖拽

拖拽的流程

当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
当鼠标松开时，被拖拽元素固定在当前位置 onmouseup

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#box1 {width: 100px;height: 100px;background-color: red;position: absolute;}#box2 {width: 100px;height: 100px;background-color: yellow;position: absolute;left: 200px;top: 200px;}</style><script type="text/javascript">window.onload = function() {// 获取box1var box1 = document.getElementById('box1');var box2 = document.getElementById('box2');var img1 = document.getElementById('img1');// 开启box1的拖拽drag(box1);drag(box2);drag(img1);};   /*** 提取一个专门用来设置拖拽的函数* 参数，开启拖拽的元素*/function drag(obj) {// 当鼠标在被拖拽元素上按下时开始拖拽 onmousedownobj.onmousedown = function(event) {// 设置box1捕获所有鼠标按下的事件/*setCapture()- 只有IE支持，但是在火狐中调用时不会报错而如果使用chrome调用，会报错*//*** if(box1.setCapture) {box1.setCapture();}*/obj.setCapture && obj.setCapture();event = event || window.event;// div的偏移量 鼠标.clientX - 元素.offsetLeft// div的偏移量 鼠标.clientY - 元素.offsetTopvar ol = event.clientX - obj.offsetLeft;var ot = event.clientY - obj.offsetTop;// 为document绑定一个onmousemove事件document.onmousemove = function(event) {event = event || window.event;// 当鼠标移动的时候拖拽元素跟随鼠标移动 onmousemove// 获取鼠标的坐标var left = event.clientX - ol;var top = event.clientY - ot;// 修改box1的位置obj.style.left = left + 'px';obj.style.top = top + 'px';};// 为document绑定一个鼠标松开事件document.onmouseup = function() {// 当鼠标松开时，被拖拽元素固定在当前位置 onmouseup// 取消document的onmousemove事件document.onmousemove = null;// 取消document的onmouseup事件document.onmouseup = null;// 当鼠标松开时，取消对事件的捕获obj.releaseCapture && obj.releaseCapture();};/*当拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容此时会导致拖拽功能异常，这个是浏览器提供的默认行为如果不希望发生这个行为，则可以通过return false 来取消默认行为但是这招对IE8不起作用*/return false;};};  </script></head><body>我是一段文字<div id="box1"></div><div id="box2"></div><img src="../img/sona.png" id="img1" style="position: absolute;" ></body>
</html>

三种动态创建元素的区别

document.write()
element.innerHTML
document.createElement()

区别

document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
innerHTML 是将内容写入某个DOM节点，不会导致页面全部重绘
innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
createElement() 创建多个元素效率稍低一点点，但是结构更清晰

总结：不同浏览器下，innerHTML 效率要比 createELement 高

DOM重点核心

关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。

创建

document.write
innerHTMl
createElement

增

appendChild
insertBefore

删

removeChild

改

主要修改dom的元素属性，dom元素的内容、属性、表单的值等

修改元素属性：src、href、title等
修改普通元素内容：innerHTML、innerText
修改表单元素：value、type、disabled等
修改元素样式：style、className

查

主要获取查询dom元素

DOM提供的API方法：getElementById、getElementsByTagName 古老用法不太推荐
H5提供的新方法：querySelector、querySelectorAll 提倡
利用节点操作获取元素：父（parentNode）、子（Children）、兄（previousElementSibling）、nextElementSibling 提倡

自定义属性的操作

获取属性值

element.属性 获取属性值element.getAttribute('属性');// 区别
element.属性 获取内置属性值（元素本身自带的属性）element.getAttribute('属性'); 主要获得自定义的属性（标准）我们程序员自定义的属性

设置属性值

element.属性 = '值' 设置内置属性值element.setAttribute('属性','值');// 区别
element.属性 设置内置属性值element.setAttribute('属性'); 主要设置自定义的属性（标准）

移除属性

element.removeAttribute('属性');

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div class="demo" index="1" class="nav"></div><script type="text/javascript">var div = document.querySelector('div');// 1.获取元素的属性值// (1) element.属性console.log(div.id);// (2) element.getAttribute('属性') get得到获取 attribute属性的意思 我们程序员自己添加的属性我们称为自定义属性 indexconsole.log(div.getAttribute('id'));console.log(div.getAttribute('index'));// 2.设置元素属性值// (1) element.属性 = '值'div.id = 'test';div.className = 'navs';// (2) element.setAttribute('属性','值'); 主要针对于自定义属性div.setAttribute('index',2);div.setAttribute('class','footer'); // class 特殊 这里面写的就是class不是className// 3.移除属性 removeAttribute(属性)div.removeAttribute('index');</script></body>
</html>

H5自定义属性

自定义属性目的：为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中

自定义属性获取是通过getAttribute(‘属性’)获取

但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性

于是h5给我们新增了自定义属性

设置H5自定义属性

H5规定自定义属性data-开头作为属性名并且赋值

比如：<div data-index= '1'></div>

或者使用JS设置

element.setAttribute('data-index',2)

<body><div getTime="20" data-index="2" data-list-name="andy"></div><script type="text/javascript">var div = document.querySelector('div');//console.log(div.getTime);console.log(div.getAttribute('getTime'));div.setAttribute('data-time',20);console.log(div.getAttribute('data-index'));console.log(div.getAttribute('data-list-name'));// h5新增的获取自定义属性的方法// dataset 是一个集合里面存放了所有data开头的自定义属性console.log(div.dataset);console.log(div.dataset.index);console.log(div.dataset['index']);// 如果自定义属性里面有多个-链接的单词，我们获取的时候采用 驼峰命名法console.log(div.dataset.listName);console.log(div.dataset['listName']);</script>
</body>

获取H5自定义属性

兼容性获取：element.getAttribute(‘data-index’);
H5新增 element.dataset.index 或者 element.dataset[‘index’] ie11才开始支持

Tab选项卡

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 引入CSS --><link rel="stylesheet" type="text/css" href="imgs/index.css"/><!-- 让所有的a标签的默认跳转方式都为blank（跳转新窗口打开） --></head><body><!-- 最外边的盒子 --><div class="tab_contents"><ul class="tab_nav"><li class="tabNav_active"><img src="imgs/sona1.jpg" ><h2>琴瑟仙女</h2></li><li><img src="imgs/gw1.jpg" ><h2>灵罗娃娃</h2></li><li><img src="imgs/ven1.jpg" ><h2>暗夜猎手</h2></li><li><img src="imgs/kat1.jpg" ><h2>不祥之刃</h2></li><li><img src="imgs/niko1.jpg" ><h2>万花通灵</h2></li></ul><ul class="tab_box"><li class="tabBox_active"><img src="imgs/sona2.jpg" ><div><h2>娑娜</h2><p>娑娜是一位弦乐演奏家，“叆华”的优美和弦与多变曲调就是她唯一的语言。这种文雅的举止让她深得德玛西亚贵族的宠爱，不过有人猜测她迷人的旋律其实是在施放魔法——这在王国境内是如履薄冰。在外人看来她一言不发，但娑娜最亲密的同伴却能读懂她。娑娜弹拨的和声不仅能够安抚受伤的盟友，而且还能打击掉以轻心的敌人。</p><button><a href="https://yz.lol.qq.com/zh_CN/champion/sona/">Look at all ></a></button></div></li><li><img src="imgs/gw2.png" ><div><h2>格温</h2><p>格温是一个被魔法赋予了生命的玩偶，而她所挥使的正是当初创造了她自己的工具。格温无比珍惜这份机缘，踏出的每一步都承载着曾经主人的爱意。格温拥有控制“圣霭”的能力。这是一种来自远古的庇护性法术，她的剪刀、衣针和缝线都因圣霭而得到了庇佑。即便有这么多新奇的事物等待着格温，她既感到兴奋，但又带着强烈的使命感，决心拯救在这个破碎世界里艰难挣扎的人们。</p><button><a href="https://yz.lol.qq.com/zh_CN/champion/gwen/">Look at all ></a></button></div></li><li><img src="imgs/ven2.jpeg" ><div><h2>薇恩</h2><p>肖娜·薇恩是一位无情的德玛西亚怪物猎手。终其一生，她都在寻找杀害她全家的恶魔。她的手臂上装着十字弩，心中燃烧着熊熊的复仇怒火，从暗影中射出圣银弩箭的风暴，薇恩只有在杀死那些为黑暗魔法所控制的人和生物时，才能真正感到愉悦。</p><button><a href="https://yz.lol.qq.com/zh_CN/champion/vayne/">Look at all ></a></button></div></li><li><img src="imgs/kat2.jpg" ><div><h2>卡特琳娜</h2><p>果断坚决、心狠手辣，卡特琳娜是诺克萨斯的顶尖刺客。作为传奇将军杜·克卡奥的长女，她凭借出其不意的迅猛刺杀很快声名鹊起。强烈的野心曾经驱使她挑战重兵把守的暗杀目标，甚至不惜冒险让友军暴露在危险中。不过无论是怎样的任务，卡特琳娜都会毫不迟疑地在锯刃匕首的风暴中履行自己的使命。</p><button><a href="https://yz.lol.qq.com/zh_CN/champion/katarina/">Look at all ></a></button></div></li><li><img src="imgs/niko2.png" ><div><h2>妮蔻</h2><p>妮蔻来自一个早已迷失的瓦斯塔亚部落。她可以借用别人的外表来伪装自己，融入人群，甚至通过影响别人的情绪状态，一瞬间就能化敌为友。没人知道妮蔻到底在哪儿——或者到底是谁，但是想要为难她的人会立刻见识到她的本色，感受原始的精神魔法倾泻在自己身上的痛苦。</p><button><a href="https://yz.lol.qq.com/zh_CN/champion/neeko/">Look at all ></a></button></div></li></ul></div><script type="text/javascript">/** 思路：* 循环遍历导航条* 点击导航条切换类名 进行 显示和隐藏**/var    tabNavItem = document.querySelectorAll('.tab_nav>li');var tabBoxItem = document.querySelectorAll('.tab_box>li');var tabNavActive = document.querySelector('.tabNav_active');var tabBoxActive = document.querySelector('.tabBox_active');tabNavItem.forEach(function(item,index) {item.onmouseenter = function() {tabNavActive.className = '';this.className = 'tabNav_active';tabNavActive = this;tabBoxActive.className = '';tabBoxItem[index].className = 'tabBox_active';tabBoxActive = tabBoxItem[index];}})</script></body>
</html>

* {margin: 0;padding: 0;
}html,body {width: 100%;/* vh就是当前屏幕可见高度的1%，也就是说height:100vh == height:100%;但是当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0，但是设置height:100vh，该元素会被撑开屏幕高度一致。*/height: 100vh;background: #282c34;/* 让盒子进行flex(弹性布局)布局，并且居中显示 */display: flex;/* 1.justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。 */justify-content: center;/* 2.align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。 */align-items: center;
}
/* 去除小圆点 */
.tab_contents ul {list-style: none;
}.tab_contents {width: 700px;height: 200px;/* background: white; */
}
.tab_contents .tab_nav {display: flex;
}
.tab_contents .tab_nav li {padding: 10px 20px;border-top-left-radius: 5px;border-top-right-radius: 5px;background: #e5e9ea;margin-right: 2px;color: #607291;cursor: pointer;display: flex;position: relative;overflow: hidden;
}
.tab_contents .tab_nav li img {width: 20px;margin-right: 5px;/* 设置不透明级别 */opacity: 0.3;transition: opacity 0.3s;
}
.tab_contents .tab_nav li h2 {font-size: 14px;
}
.tab_contents .tab_nav li:hover img {opacity: 1 !important;
}
.tab_contents .tabNav_active {background: #f9f9f9 !important;
}/* 面板 */
.tab_contents .tab_box {position: relative;/* 最小高度 */min-height: 150px;background: #f9f9f9;padding: 2em;color: #607291;
}
.tab_contents .tab_box li {width: 100%;height: 100%;position: absolute;top: 0;left: 0;display: flex;align-items: center;padding: 15px;box-sizing: border-box;/* display 不支持动画切换*//* display: none; */opacity: 0;visibility: hidden;transition: all 1s ease;
}
.tab_contents .tab_box .tabBox_active {/* display: flex; */opacity: 1;visibility: visible;
}
.tab_contents .tab_box li img {width: 128px;
}
.tab_contents .tab_box li div {width: 100%;/* height: 128px; */position: relative;margin-left: 20px;
}
.tab_contents .tab_box li p {text-indent: 2em;margin: 20px 0;line-height: 1.5em;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;
}
.tab_contents .tab_box li button {margin-top: 20px;width: 110px;height: 25px;border: #607291 solid 1px;background: transparent;float: right;
}
.tab_contents .tab_box li button a {text-decoration: none;color: #607291;
}

排他算法

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他算法

所有元素全部清除样式（干掉其他人）
给当前元素设置样式（留下我自己）
注意顺序不能颠倒，首先干掉其他人，再设置自己

<body><button>按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><button>按钮5</button><script type="text/javascript">// 1.获取所有按钮元素var btns = document.getElementsByTagName('button');// btns得到的是伪数组 里面的每一个元素 btns[i]for (var i = 0; i < btns.length; i++) {btns[i].onclick = function() {// 先把所有的按钮背景颜色去掉for (var i = 0; i < btns.length; i++) {btns[i].style.backgroundColor = '';}// 然后才让当前的元素背景颜色位pinkthis.style.backgroundColor = 'pink';}}</script>
</body>

百度换肤效果

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">* {margin: 0;padding: 0;}body {background: url(../img/01.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></head><body><ul class="baidu"><li><img src="../img/01.jpg" ></li><li><img src="../img/002.jpg" ></li><li><img src="../img/003.png" ></li><li><img src="../img/004.jpg" ></li></ul><script type="text/javascript">// 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/01.jpg// console.log(this.src);// 把这个路径this.src给body就可以了document.body.style.backgroundImage = 'url(' + this.src + ')';}}</script></body>
</html>

全选反选

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.wrap {margin: 200px 600px;}thead th {color: #fff;background-color: deepskyblue;}tbody tr {background-color: #f0f0f0;}tbody tr:hover {cursor: pointer;background-color: #fafafa;}</style></head><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>iPhone13</td><td>10000</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 type="text/javascript">// 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;// 退出循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断}}j_cbAll.checked = flag;}}</script></body>
</html>

属性操作

主要针对于自定义属性

setAttribute：设置dom的属性值
getAttribute：得到dom的属性值
removeAttribute移除属性

事件操作

给元素注册事件，采取事件源.事件类型 = 事件处理程序

注册事件

概述：给元素添加事件，称为注册事件或者绑定事件。注册事件有两种方式：传统方式和方法监听注册方式

传统注册方式

利用on开头的事件onclick
< button οnclick= “akert(‘hi~’)”>< /button>
btn.onclick = function() {}
特点：注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

方法监听注册方式

W3C标准推荐方式
addEventListener() 它是一个方法
IE9 之前的IE不支持此方法，可使用attachEvent() 替代
特点：同一个元素同一个事件可以注册多个监听器
按注册顺序依次执行

addEventListener 事件监听方式

eventTarget.addEventListener(type,listener[,useCapture])

将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。

该方法接收三个参数：

type：事件类型字符串，比如click、mouseover，注意这里不要带on
listener：事件处理函数，事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值，默认是false

<body><button>传统注册事件</button><button>方法监听注册事件</button><script type="text/javascript">var btns = document.querySelectorAll('button');// 1.传统方式注册事件btns[0].onclick = function() {alert('hi');}btns[0].onclick = function() {alert('hao a u'); // 覆盖前面的hi}// 2.事件监听注册事件 addEventListener// (1) 里面的事件类型是字符串 必定加引号 而且不带on// (2) 同一个元素 同一个事件可以添加多个监听器（事件处理程序）btns[1].addEventListener('click',function() {alert(22);})btns[1].addEventListener('click',function() {alert(33);})</script>
</body>

attachEvent注册事件（了解）

该特性是非标准，请尽量不要在生产环境中使用它

注册事件兼容性解决方案

function addEventListener (element,eventName,fn) {// 判断当前浏览器是否支持 addEventListener 方法if (element.addEventListener) {element.addEventListener(eventName,fn); // 第三个参数 默认是false} else if (element.attachEvent) {element.attachEventt('on' + eventName,fn);} else {// 相当于 element.onclick = fn;element['on' + eventName] = fn;}
}

兼容性处理的原则：首先照顾大多数浏览器，再处理特殊浏览器

删除事件

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">div {width: 100px;height: 100px;background-color: pink;}</style></head><body><div>1</div><div>2</div><div>3</div><script type="text/javascript">var divs = document.querySelectorAll('div');// 点击第一个盒子输出1，然后再次点击失效divs[0].onclick = function() {alert(1);// 1.传统方式删除事件divs[0].onclick = null;}// 2.removeEventListener 删除事件// 点击第二个盒子输出2，然后再次点击失效divs[1].addEventListener('click',fn) // 里面的fn 不需要调用加小括号function fn() {alert(2);divs[1].removeEventListener('click',fn);}</script></body>
</html>

删除事件兼容性解决方案

function removeEventListener(elemt,eventName,fn) {// 判断当前浏览器是否支持removeEventListener 方法if (element.removeEventListener) {element.removeEventListener (eventName,fn); // 第三个参数 默认是false} else if (element.detachEvent) {element.detachEvent('on' + eventName,fn);} else {element['on' + eventName] = null;}
}

DOM事件流

事件流描述的是从页面中接收事件的顺序

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流

比如我们给一个div注册了点击事件：

DOM事件流分为3个阶段

捕获阶段
当前目标阶段
冒泡阶段

事件冒泡：IE最早提出，事件开始时由具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程

事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素的接收的过程

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">* {margin: 0;padding: 0;box-sizing: border-box;}.father {width: 100px;height: 100px;margin: 100px auto;background-color: pink;}.son {margin: 25px;width: 50px;height: 50px;background-color: purple;}</style></head><body><div class="father"><div class="son">son盒子</div></div><script type="text/javascript">// 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);// 3.冒泡阶段 如果addEventListener 第三个参数是false 或者省略 那么则处于冒泡阶段 son -> father -> body -> html -> documentvar son = document.querySelector('.son');son.addEventListener('click',function() {alert('son');}, false);var father = document.querySelector('.father');father.addEventListener('click',function() {alert('father');}, false);</script></body>
</html>

实际上开发中我们很少使用捕获，我们更关注事件冒泡
有些事件是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave
事件冒泡有时候会带来麻烦，有时候又会帮助我们巧妙的做某些事件

事件对象

eventTarget.onclick = function(event) {}
eventTarget.addEventListener('click',function(event) {})
// 这个event就是事件对象，我们还喜欢写成e或者evt

官方解释：event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态

简单理解：事件发生后，跟事件相关的一系列信息数据集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法

比如：

谁绑定了这个事件
鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置
键盘触发事件的话，会得到键盘的相关信息，如按下了哪个键

这个event是个形参，系统帮我们设定为事件对象，不需要传递实参过去

当我们注册事件时，event对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">div {width: 100px;height: 100px;background-color: pink;}</style></head><body><div>123</div><script type="text/javascript">// 事件对象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、ent、e// 5.事件对象也有兼容性问题 ie678 通过 window.event</script></body>
</html>

事件对象的常见属性和方法

事件对象属性方法	说明
e.target	返回触发事件的对象标准
e.srcElement	返回触发事件的对象非标准 ie6-8使用
e.type	返回事件的类型比如 click mouseover 不带 on
e.cancelBubble	该属性阻止冒泡非标准 ie6-8使用
e.returnValue	该属性阻止默认事件（默认行为）非标准 ie6-8使用比如不让链接跳转
e.preventDefault()	该方法阻止默认事件（默认行为）标准比如不让链接跳转
e.stopPropagation()	阻止冒泡标准

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">div {width: 100px;height: 100px;background-color: pink;}</style></head><body><div>123</div><ul><li>abc</li><li>abc</li><li>abc</li></ul><script type="text/javascript">// 常见事件对象的属性和方法// 1.e.target 返回的是触发事件的对象（元素） this 返回的是绑定事件的对象（元素）var div = document.querySelector('div');div.addEventListener('click',function(e) {console.log(e.target); // <div>123</div>console.log(this); // <div>123</div>})var ul = document.querySelector('ul');ul.addEventListener('click',function(e) {// 我们给ul绑定了事件 那么this就指向ulconsole.log(this); // <ul></ul>// e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target指向的就是liconsole.log(e.target); // <li></li>})// 了解兼容性// div.onclick = function(e) {//   e = e || window.event;//   var target = e.target || e.srcElement;//   console.log(target);// }</script></body>
</html>

阻止默认行为

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><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 type="text/javascript">// 常见事件对象的属性和方法// 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标准写法})// 传统的注册方式a.onclick = function(e) {// 普通浏览器 e.preventDefault(); 方法// e.preventDefault();// 低版本浏览器 ie678 returnValue 属性// e.returnValue;// 我们可以利用return false 也能阻止默认行为 没有兼容性问题// 特定：return后面的代码不执行了return false;alert('fuck you！')}</script></body>
</html>

阻止事件冒泡

两种方式：

标准写法：利用事件对象里面的stopPropagation()方法

e.stopPropagation()

非标准写法：IE6-8利用事件对象cancelBubble属性

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.father {width: 100px;height: 100px;margin: 100px auto;background-color: pink;}.son {margin: 25px;width: 50px;height: 50px;background-color: purple;}</style></head><body><!-- 效果：点击粉色盒子会弹出father和document，紫色盒子只会弹出son --><div class="father"><div class="son">son盒子</div></div><script type="text/javascript">// 阻止冒泡 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>
</html>

事件委托（代理、委派）

原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在父节点上，然后利用冒泡管理原理影响设置每个子节点

作用：只操作一次dom，提高了程序的性能

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><ul><li>知否知否，点我应有弹框在手！</li><li>知否知否，点我应有弹框在手！</li><li>知否知否，点我应有弹框在手！</li><li>知否知否，点我应有弹框在手！</li><li>知否知否，点我应有弹框在手！</li></ul><script type="text/javascript">// 事件委托的核心原理：给父节点添加监听器，利用事件冒泡影响每一个子节点var ul = document.querySelector('ul');ul.addEventListener('click',function(e) {e.target.style.backgroundColor = 'pink'; // 点击li，会变粉色})</script></body>
</html>

常用的鼠标事件

1.禁止鼠标右键菜单

contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

document.addEventListener('contextmenu',function(e) {e.preventDefault();
})

2.禁止鼠标选中（selectstar 开始选中）

dpcument.addEventListener('selectstart',function(e) {e.preventDefault();
})

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body>我是一段不愿意分享的文字<script type="text/javascript">// 1.contextmenu 我们可以禁止右键菜单document.addEventListener('contextmenu',function(e) {e.preventDefault();})// 2.禁止选中文字 selectstartdocument.addEventListener('selectstart',function(e) {e.preventDefault();})</script></body>
</html>

鼠标事件对象

event对象代表事件的状态，跟事件相关的一系列信息集合。现阶段我们主要是用鼠标事件对象

MouseEvent 和键盘事件对象 KeyboardEvent

鼠标事件对象	说明
e.clientX	返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY	返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX	返回鼠标相对于文档页面的X坐标 IE9+ 支持
e.pageY	返回鼠标相对于文档页面的Y坐标 IE9+ 支持
e.screenX	返回鼠标相对于电脑屏幕的X坐标
e.screenY	返回鼠标相对于电脑屏幕的Y坐标

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">body {height: 3000px;}</style></head><body><script type="text/javascript">// 鼠标事件对象 MouseEventdocument.addEventListener('click',function(e) {console.log(e.clientX);console.log(e.clientY);console.log('----------------');// 2.page 鼠标在页面文档的x和y坐标console.log(e.pageX);console.log(e.pageY);})</script></body>
</html>

跟随鼠标案例

分析：

鼠标不断的移动，使用鼠标移动事件：mousemove
在页面中移动，给document注册事件
图片要移动距离，而且不占位置，我们使用绝对定位即可
核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标作为图片的top和left值就可以移动图片

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">img {width: 78px;position: absolute;top: 2px;}</style></head><body><img src="../../tab选项卡/imgs/ven1.jpg" ><script type="text/javascript">var pic = document.querySelector('img');document.addEventListener('mousemove',function(e) {// 1.mousemove 只要我们鼠标移动1px 就会触发这个事件// console.log(1);// 2.核心原理var x = e.pageX;var y = e.pageY;console.log('x坐标是' + x,'y坐标是' + y);// 3.千万不要忘记给left和top添加px单位pic.style.left = x + 'px';pic.style.top = y + 'px';});</script></body>
</html>

常用键盘事件

事件除了使用鼠标触发，还可以使用键盘触发

键盘事件	触发条件
onkeyup	某个键盘按钮被松开时触发
onkeydown	某个键盘按钮被按下时触发
onkeypress	某个键盘按钮被按下时触发但是它不识别功能键比如 ctrl shift 箭头等

注意：

如果使用addEventListener不需要加on
三个事件的执行顺序是：keydown – keypress – keyup
对于onkeydown来说，如果一直按着某个按键不松手，则事件会一直触发

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">// 常用键盘事件// 1.keyup 按键弹起的时候触发// document.onkeyup = function() {//     console.log('我弹起了');// }document.addEventListener('keyup',function() {console.log('我弹起了');})// 2.keydown 按键按下的时候触发document.addEventListener('keydown',function() {console.log('我按下了');})// 3.keypress 按键按下的时候触发document.addEventListener('keypress',function() {console.log('yoho');})</script></body>
</html>

键盘事件对象

键盘事件对象属性	说明
keyCode	返回该键的ASCII值

注意：

onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写
实际开发中，更多的使用keydown 和 keyup，它能识别所有的键（包括功能键）
keypress 不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">// 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值// 1.我们的keyup和keydown事件不区分字母大小写 a和A得到的都是65// 2.我们的keypress 事件区分字母大小写 a 97 和 A 65document.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>
</html>

案例

分析：

核心思路：检测用户是否按下了s键，如果按下s键，就把光标定位到搜索框里面
使用键盘事件对象里面的keyCode判断用户按下的是否是s键
搜索框获得焦点：使用js里面的focus()方法

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="text"><script type="text/javascript">var search = document.querySelector('input');document.addEventListener('keyup',function(e) {if (e.keyCode === 83) {search.focus();}})</script></body>
</html>

除了keyCode，事件对象中还提供了几个属性

altkey
ctrlkey
shiftkey

这三个用来判断alt ctrl 和 shift 是否被按下，如果按下则返回true，否则返回false

Javascript笔记大全02相关推荐

Javascript笔记大全01，会持续更新~
JS的组成 ECMAScript:JavaScript语法 DOM:页面文档对象模型 BOM:浏览器对象模型注释 <!DOCTYPE html> <html><head ...
JavaScript高级第02天笔记
本资源由 itjc8.com 收集 JavaScript高级第02天笔记 1.构造函数和原型 1.1对象的三种创建方式–复习字面量方式 var obj = {}; new关键字 var obj = ...
JavaScript基础第02天笔记
JavaScript基础第02天笔记一.DOM简单学习 1.功能: 控制HTML文档内容 2.代码: 通过ID值获取元素对象 document.getElementById("id值&qu ...
狂神Javascript笔记
学习狂神JavaScript所记录的笔记 Javascript笔记一.前端核心分析 1.1.概述 Soc原则:关注点分离原则 Vue 的核心库只关注视图层,方便与第三方库或既有项目整合. HTML ...
javascript笔记：深入分析javascript里对象的创建（上）续篇
今天回来一看我的博客居然有这么多人推荐真是开心极了,看来大家对我的研究有了认可,写博客的动力越来越大了,而且我发现写javascript在博客园里比较受欢迎,写java的受众似乎少多了,可能博客园里j ...
怎么传日期参数_时间序列amp;日期学习笔记大全（下）
作者:湛林来源:凹凸数据时间序列&日期学习笔记大全(上) 建议收藏 9. 日期时间的组成 dt.方法,具体参数及含义详见附件 # 可以通过s.dt.time 获得各种信息s.dt.yea ...
SQL语句从入门到精通之笔记大全
SQL中有四种基本的DML操作:INSERT,SELECT,UPDATE和DELETE.由于这是大多数SQL用户经常用到的,我们有必要在此对它们进行说明. 下列语句部分是Mssql语句,不可以在acc ...
四十四种Javascript技巧大全
四十四种Javascript技巧大全 1.第一个给变量分配值时不要忘了var关键字. 分配值给未定义的变量将是该变量自动成为全局变量,应该避免全局变量. 2.使用 === 而不是 == 使用 == ( ...
JavaScript 笔记Day1
<JavaScript 笔记> JavaScript 是属于网络的脚本语言! JavaScript 是世界上最流行的编程语言.这门语言可用于 HTML 和 web,更可广泛用于服务器.PC ...

Javascript笔记大全02

DOM

简介