昨天学习了BOM，今天学习DOM和事件，不过在讲之前得先说说js选择器
一、js选择器
- document.getElementById() 通过id名称获取元素 具有唯一性
- document.getElementsByTagName() 通过标记名称获取元素，获取的是一个伪数组
- document.getElementsByClassName() 通过class类名获取元素，获取的是一个伪数组
- document.getElementsByName()通过标记的name属性的属性值获取元素，获取的是一个伪数组
- document.querySelector()通过css选择器获取元素，获取的是一个伪数组
document.querySelectorAll();通过css选择器获取所有元素
二、DOM
介绍：
- DOM Document Object Model ，文档对象模型。我们可以把网页中的所有“东西”看成是“对象”。
- DOM是W3C制定的网页标准或规则，而这个标准，在浏览器中，以“对象”的形式得以实现。
- DOM的官方定义：DOM可以使脚本，动态的访问或操作，网页的内容、网页外观、网页结构。
分类：
- 核心DOM：提供了同时操作HTML文档和XML文档的公共的属性和方法。
- HTML DOM：针对HTML文档提供的专用的属性方法。
- XML DOM：针对XML文档提供的专用的属性和方法。(了解)
- CSS DOM：提供了操作CSS的属性和方法。
- Event DOM：事件对象模型。如：onclick、 onload等。
- DOM树（tree）：JS里面把标记以树型的结构描述的
核心DOM的操作：
1、认识DOM中元素节点类型：
- document文档节点，代表整个网页，不代表任何HTML标记。但它是html节点的父节点
- element元素节点，指任何HTML标记。每一个HTML标记就称一个“元素节点”。它可以有文本节点和属性节点
- attribute属性节点。指HTML标记的属性
- comment注释节点。
- text节点。是节点树的最底节点
- 名称问题：
a、在html里面叫做标记、标签
b、在css里面叫做元素、父元素、子元素
c、在js里面叫做节点
2、DOM中访问节点：
- js里面不需要通过选择器获取直接可以拿到的标记
document对象 — 网页
document.documentElement — html
document.body — body
document.head — head
document.title — title - 以下的方法获取到所有类型的节点，包含空白文本节点
- firstChild：第1个子节点
- lastChild：最后1个子节点
- childNodes：子节点列表，是一个数组 childNodes[0]
- parentNode：父节点
- nodeName：节点名称 返回标签名
- nodeValue： 属性节点的的属性值
- nodeType： 节点类型，返回值是数字
注意：如果节点是元素节点，则 nodeType 属性将返回 1,noneName返回名称以大写形式表示。属性节点将返回 2。返回3是文本节点。返回8是注释节点 - 以下的方法不会返回空表文本节点
- firstElementChild： 获取当前元素节点的第一个元素子节点
- lastElementChild： 获取当前元素节点的最后一个元素子节
- previousElementSibling： 查找当前元素的上一个元素
- nextElementSibling： 查找当前元素的下一个元素 都是兄弟关系
- parentNode： 获取当前节点的父元素
- children： 获取所有的子节点 不返回其他节点
3、对节点的属性操作：
- setAttribute(name,value)：给某个节点添加一个属性
- getAttribute(name)：获取某个节点属性的值
- getAttributeNode(name)：获取某个节点属性和属性值
- removeAttribute(name)：删除某个节点的属性
4、创建节点
- 创建节点（元素） 参数直接是创建节点的名称，不需要设置尖括号
- document.createElement(tagName)：创建节点
- appendChild(被追加节点)：将节点追加到其他节点下
- insertBefore(前面节点，后面节点) ：可在已有的子节点前插入一个新的子节
5、删除节点
- removeChild(name)：删除子元素
- remove()：删除当前元素
- parentNode.remove()：通过子元素删除父元素
DOM尺寸：
- box.style.width：内联中的宽
box.style.height：内联中的高
注意：只能获取内联的样式 - box.clientWidth
box.clientHeight
注意：返回元素大小，但没有单位，默认为px，如果为其他单位，会自动转换成px。获取内联和其他的样式，获取的宽度和高度包含padding - box.clientLeft：获取左边框宽度
box.clientTop ：获取上边框宽度 - box.scrollHeight：获取滚动的高度
box.scrollWidth：获取滚动的宽度 - box.offsetWidth
box.offsetHeight
注意：包含边框还有padding，最稳定，使用最频繁 - offsetLeft ： 元素距离自身左边的距离 需要定位做参照
offsetTop：元素距离自身上边的距离
offsetParent： 有定位元素的父级
注意：如果父元素没有定位，参照的就是自己距离左边的位置，如果有定位参照的就是自己距离父元素左边的位置
获取元素
//参数1表示要获取样式的元素 参数2表示伪对象
console.log(getComputedStyle(obj, null).attr);
//只有IE浏览器支持，其他浏览器都不支持
console.log(obj.currentStyle.attr);
处理兼容问题：
function getStyle(obj, attr){
//因为IE浏览器是不识别getComputeStyle方法的，设置了window后IE会识别window不会报错
if(window.getComputedStyle){
return getComputedStyle(obj, null)[attr];
}else{
return ele.currentStyle[attr];
}
}
this对象：
- 函数圆括号 调用时，函数的this是window对象
注意： 在严格模式下，‘use strict’，函数名() 调用函数，this无法指向window - 函数作为一个对象的方法，对象点 调用，函数的this就是这个对象
- 函数是事件处理函数时，函数的this就是触发这个this的对象 —— 事件调用者
- 定时器调用函数时，this是window对象
- 数组中存放的函数，被数组索引之后加圆括号调用，this就是这个数组
三、事件
1、事件触发：
- 内联模型 : 这种模型是最传统简单的一种处理事件的方法。在内联模型中，事件处理函数是 HTML 标签的一个属性，用于处理指定事件。虽然内联在早期使用较多，但它是和 HTML 混写的， 并没有与 HTML 分离。违反了W3C制定的HTML 与 JavaScript 代码层次分离的原则
- 脚本模型：为了解决内联模型的问题，使我们可以在 JavaScript 中处理事件。这种处理方式就是脚本模型。
2、鼠标事件：
- onclick：当用户单击鼠标按钮或按下回车键时触发
- ondblclick：当用户双击主鼠标按钮时触发 - 连续点击两次
- onmousedown：当用户按下了鼠标还未弹起时触发 - 弹窗测试最明显
- onmouseup：当用户释放鼠标按钮时触发 - 鼠标抬起
- onmouseover：当鼠标移到某个元素上方时触发
- onmouseout：当鼠标移出某个元素上方时触发
- onmousemove：当鼠标指针在元素上移动时触发
3、键盘事件：
- onkeydown：当用户按下键盘上任意键触发，如果按住不放，会重复触发
- onkeyup：当用户释放键盘上的键触发 - 当按键抬起时触发
- onkeypress：当用户按下键盘上的字符键触发，如果按住不放，会重复触发 不能触发 例如：ALT, CTRL, SHIFT, ESC — 不是字符键
- 不属于键盘事件 — 属于事件对象
keyCode 返回当前按键的ASCII码 ，得知按下的键盘上的哪个键， 要配合事件对象来使用。可以判断哪个键被按下
var box = document.querySelector('div');
//使div根据不同的方向键向不同的位置移动
onkeydown = function(e){
//左37 右39 上38 下40
//console.log(e.keyCode);
var speed = 10;
//组合键：altKey、ctrlKey、shiftKey
if(e.ctrlKey){
speed = 100;
}
switch(e.keyCode){
case 39 :
box.style.left = box.offsetLeft + speed + 'px';
break;
case 37 :
box.style.left = box.offsetLeft - speed + 'px';
break;
case 38 :
box.style.top = box.offsetTop - speed + 'px';
break;
case 40 :
box.style.top = box.offsetTop + speed + 'px';
break;
}
}
4、html事件：
- onload：当页面完全加载后在 window 上面触发，或当框架集加载完毕后在框架集上触发
- onselect：当用户选中文本框(input 或 textarea)中的一个或多个字符触发
- onselectstart：主要是用于禁止用户选中网页中的文字的默认行为
- onchange：当用户改变文本框(input 或 textarea)内容时且失去焦点后触发
- onfocus：当页面或者元素获得焦点时触发
- onblur：当页面或元素失去焦点时触发
- onsubmit：当用户点击提交按钮在元素上触发
- onresize：当窗口或框架的大小变化时在 window 或框架上触发
- scroll：当用户滚动带滚动条的元素时触发
- oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。
5、事件对象
- 事件对象（event）：当事件发生的时候，事件会提供一个对象，让你使用。这个对象里保存了很多有用的属性和方法
- 特征：
1.只有当事件发生的时候才会产生，只能在处理函数内部访问
2.处理函数运行结束后自动销毁
键盘按下事件的兼容写法
onkeydown = function(e){
e = e || window.event;
console.log(e.keyCode)
}
6、鼠标坐标：
- clientX： 鼠标的横坐标
- clientY： 鼠标的纵坐标
- pageX： 鼠标的横坐标，包含网页横向卷去的距离
- pageY： 鼠标的纵坐标，包含网页向上卷去的距离
实现js的简单拖拽效果
<style>
*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
div{
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
}
</style>
<div></div>
<script>
//获取元素
var box = document.querySelector('div');
/*
拖拽的思路：
+ 当鼠标按下时，让div标记进行移动
+ 事件：onmousedown、onmousemove
+ 获取鼠标的坐标，然后把值赋值给div的left和top
+ 当鼠标抬起时清除移动事件
问题：
+ 问题描述当鼠标按下时进行移动时，鼠标坐标在赋值的时候，会把每次把盒子移动到原点0 0（左上）
+ 解决方案：当鼠标按下的时候就确定鼠标的坐标位置
*/
//给div绑定移动事件
box.onmousedown = function(e){
//事件对象兼容
e = e || window.event;
//求出需要从鼠标坐标上减去的距离
var l = e.clientX - box.offsetLeft;
var t = e.clientY - box.offsetTop;
console.log(l, t)
//鼠标移动事件
document.onmousemove = function(e){
//事件对象兼容
e = e || window.event;
var x = e.clientX - l;
var y = e.clientY - t;
//边界值判断
if(x<0){
x = 0;
}else if(x>=document.documentElement.offsetWidth - box.offsetWidth){
x = document.documentElement.offsetWidth - box.offsetWidth;
}
if(y<0){
y = 0;
}else if(y>=document.documentElement.offsetHeight - box.offsetHeight){
y = document.documentElement.offsetHeight - box.offsetHeight;
}
//把获取的鼠标坐标赋值给div标记
box.style.left = x + 'px';
box.style.top = y + 'px';
}
//鼠标抬起时清除鼠标移动事件
document.onmouseup = function(){
document.onmousemove = null;
}
}
</script>
这几天学得东西突然多起来，整理笔记还不一定能消化，还是得多加练习才行