75-107

DOM

一、DOM：文档对象模型
二、其实就是操作HTML中标签的一些能力
三、我们可以获得哪些内容：
1.获取一个元素
2.移除一个元素
3.创建一个元素
4.向页面里添加一个元素
5.给元素绑定一些事件
6.获取元素属性
7.给元素添加css样式
四、DOM的核心对象就是documentt对象
五、document对象是浏览器内置的一个对象，里面储存着专门用来操作元素的方法
六、DOM：页面中的标签，我们通过js获取以后，就把这个对象叫做DOM对象

获取一个元素

通过js代码来获取页面中的标签
获取后就可以操作这些标签
获取方式：
HTML、head、body非常规

<script>
console.log(document.documentElement)
console.log(document.head)
console.log(document.body)
</script>

id,class,tag常规

<script>
console.log(document.getElementById("box"))
var items = document.getElementsByClassName("new")
var items = document.getElementsByTagName("li ")
document.getElementsByName("name")
var items = document.querySelector("ul")//返回遇到第一个对象
var items = document.querySelectorAll("ul")//全部对象
</script>

操作元素属性

元素自带属性
自定义属性
操作原生属性

<script>
box.innerHTML = "222"
username.type = "password"
</script>

操作自定义属性

<script>
box.setAttribute("tiechui","2222")
console.log(box.getAttribute("tiechui"))
box.removeAttribute("tiechui")
</script>

操作元素文本内容

innerHTML

<script>
box.innerHTML
box.innertext//纯文本
usesername.value//拿到value值
</script>

操作元素样式

**style：**获取行内样式
只能访问行内样式
样式可以直接更改
ps：无法访问height
**getComputeStyle:**获取内部样式，外部样式，行内样式
ps：只能够获取而不能赋值

操作元素类名

获取class的类名
className 可赋值
classList 获取显示成数组
classList.add 增加的类名（会自动去重）
classList.remove 删除的类名

DOM节点

类别：
1.元素节点

2.属性节点

3.文本节点

获取节点的方式

1.childNodes获取父元素中所有节点
2.children获取父元素中所有标签节点
3.firstChild获取父元素中第一个节点
4.firstElementChild获取父元素中第一个标签节点
5.lastChild获取父元素中最后一个节点
6.lastElementChild获取父元素中最后一个标签节点
7.previousSibling获取该元素上面的一个节点
8.previousElementSibling获取该元素上面的一个标签节点
9.nextSibling获取该元素下面的一个节点
10.nextElementSibling获取该元素下面的一个标签节点
11.parentNode获取该元素的父元素的节点
12.parentElement获取该元素的父元素的标签节点 ps:parentElement找不到document节点
13.attributes拿到标签内所有属性可加索引值.attributes【索引值】

操作节点

1.创建一个元素节点.document.createElement
2.父元素插入节点.appendChild（创建的节点）
ps:位置在最后
在某个元素节点之前插入
.insertBefore（要插入的节点，谁的前面）
3.删除节点
.removeChild（删除的节点）子元素删除
.remove（删除的节点）整个父元素本身删除
4.替换节点
.replaceChild（新的节点，老的节点）
5.克隆节点
.cloneNode（true）克隆后代
.cloneNode（）不可隆后代（默认为false）

节点属性

例

获取元素尺寸

获取元素的偏移量

.offsetLeft.offsetTop偏移量
（参考值为父级，父级必须有定位，若没有定位，偏移量相对于body）
.clientLeft.clintTop(偏移量对于自身，及边框宽度)

获取可视窗口尺寸（不包含滚动条）

document.documentElement.clientWidth
document.documentElement.clientHeight

初识事件

dom0:
.触发的事件=function（）{}

不可以分开创建多个函数任务，容易被覆盖

dom2:
.addEventListener(“事件类型”，function（）{})能够分开复制多分任务，顺序从上到下

事件解绑

dom0:
.οnclick=null
dom2:
.removeEventListener

事件类型

浏览器事件：
load：页面全部资源加载完毕
scroll：浏览器滚动时触发
鼠标事件
btn.onclick单机事件
btn.ondblclick双击绑定执行
btn.contextmenu 右键单击（自定义右键菜单）
btn.mousedown/mousemove/mouseup鼠标按下这一刻/鼠标移动在指定区域/鼠标抬起
btn.mouseover/mouseout鼠标移入（对子元素也成立）/鼠标移出
btn.mouseenter鼠标移入（对子元素不产生效果）
键盘事件
window.onkeydown按下键盘/onkeyup抬起键盘
表单事件
input.onfocus获得焦点/onblur失去焦点
input.onchange获取焦点和失去焦点的时候对比内部条件不一样才会触发
username.oninput内容不同就会触发
// 必须创建表单结构
form.submit提交/reset重置
触摸事件（只针对移动端）
box.ontouchstart开始接触
box.ontouchmove开始移动
box.ontouchend松开

事件对象

事件对象-鼠标事件
cilentX/cilentY 鼠标所在位置距离浏览器可视窗口的左上角的坐标值
pageX/pageY距离页面文档流的左上角的坐标值
offsetX/offsetY距离触发元素的左上角的坐标值

DOM事件流

捕获：window=>document=>body=>outer
目标：inner
冒泡：outer=>body=>document=>window

阻止事件传播

evt.stopPropagation()

阻止默认行为

<script>
document.oncontextmenu = function(){
console.log("右键单击.自定义右键菜单")
return false
</script>
}

<script>

document.addEventListener( "contextmenu" ,function(evt){
console.log("右键单击.自定义右键菜单")
//-return-false
evt.preventDefault(})
</script>

事件委托

冒泡机制中，点击子元素父元素也会触发相同事件，所以可以直接把子元素的事件委托给父元素来做，用事件委托的时候，根本就不需要去遍历元素的子节点，只需要给父级元素添加事件就好了，其他的都是在js里面的执行，这样可以大大的减少dom操作