文章目录

• 1 DOM
• • 1.1 dom树
  • 1.2 获取元素
  • • 标签名获取
    • id名获取
    • 类名获取
    • 通用获取
    • 获取 HTML 、BODY标签
    • 获取全部元素集合
  • 1.3 事件基础
  • • 1.3.1 事件的组成（事件三要素）
  • 1.4 操作元素
  • • 1.4.1 `element.innerText`
    • 1.4.2 `element.innerHTML`
    • 1.4.3 常用元素属性操作
    • 1.4.4 自定义属性
  • 1.5 节点操作
  • • 1.5.1节点层级
    • 1.5.2 父级节点
    • 1.5.3 子级节点
    • 1.5.4 兄弟节点
    • 1.5.5 创建节点
    • 1.5.6 添加节点
    • 1.5.7 指定位置添加节点
    • 1.5.8 删除节点
    • 1.5.9 克隆节点
  • 1.6 事件高级
  • • 1.6.1鼠标点击事件对象
    • 1.6.2 键盘事件对象

1 DOM

1.1 dom树

dom树又被称为文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口

文档：一个页面就是一个文档，dom中使用document表示
元素：页面中1所有的标签都是元素，dom中使用element表示
节点：网页中所有内容都是节点（标签、属性、文本、注释），node表示

1.2 获取元素

标签名获取

documnet.getElementsByTagName(’<标签名>’)；//获取多个对应标签

id名获取

document.getElementById(’<id名>’);

类名获取

获取第一个对应类名的标签
document.getElementsByClassName(’<类名>’);

通用获取

获取对应标签(第一个)
document.querySelector(’<标签名>’);
//获取对应类名标签(第一个)
document.querySelector(’ <.类名> ‘);
获取对应id标签(第一个)
document.querySelector(’<#id名>’);

获取 HTML 、BODY标签

documnet.body;//获取body

documnet.documnetElement;//获取Html标签

获取全部元素集合

document.querySelectorAll(’<标签名>’);
document.querySelectorAll(’ <.类名> ‘);
document.querySelectorAll(’<#id名>’);

1.3 事件基础

事件：一个触发~响应机制

网页中每个元素都可以产生某些可以触发JavaScript的事件

1.3.1 事件的组成（事件三要素）

事件由 事件源，事件类型，事件处理程序 组成

事件源

• 事件源就是被触发的对象

事件类型

• 事件类型 — 如何触发，什么事件

事件处理程序

• 通过一个函数赋值的方式完成

如一个点击事件

let btn = documnet.querySelector('.btn');
btn.onClick = fnction () {
	alert('hello Dom');
}

or

btn.addEventListener('click', () => {
	alert('hello');
});

这里面btn按钮就是事件源
事件类型 —> 这里面是点击事件
事件处理程序性 —> 这面对应的是点击事件后面对应函数
addEventListener第三个参数传入的是布尔值，表示事件是否在捕获阶段就触发，默认为false

注意 卸载事件可以避免内存的浪费
卸载方法
removeEventListener('事件类型'， 事件函数)；

常见的鼠标事件
onclick：鼠标左键点击事件
onmouseover:鼠标经过触发，相当于css中的hover
onmouseout：鼠标离开事件
onfocus：获得鼠标焦点事件
onblur：失去鼠标焦点事件
onmousemove：鼠标移动事件
onmouseup:鼠标弹起触发
onmousedown：鼠标按下触发
onmouseenter：鼠标经过触发，没有事件冒泡
onmouseleave：鼠标离开触发，没有事件冒泡
ondblclick: 鼠标双击触发
oncontextmenu：鼠标右键事件
onselect：文本被选中
onwheel： 滚轮触发

1.4 操作元素

js的dom操作可以改变网页的内容，结构和样式，可以利用dom操作元素，来改变元素内的内容和属性等。

1.4.1 element.innerText

起始位置到终止位置的所有内容，改变元素内容，使它除去html标签，同时空格和换行也会被去掉

1.4.2 element.innerHTML

起始位置到终止位置的所有内容，改变元素内容包括html标签，同时空格和换行也会被保留

1.4.3 常用元素属性操作

• innerText, innerHTML
• src , href
• id, alt, title
• value（表单常用·）
• style（修改样式）
• className(修改类名)

修改样式时注意小驼峰书写

1.4.4 自定义属性

• 获取自定义属性
  element.getAttribute('属性名')

设置元素的自定义属性，后面跟属性值

• 设置自定义属性
  element.setAttribute('属性名', '属性值')

• 删除自定义属性

element.removeAttribute('属性名')

1.5 节点操作

一般的节点至少拥有nodeType（节点类型），nodeName（节点名称）和nodeValue（节点值）三个属性
元素节点 nodeType为1
属性节点：nodeType为2
文本节点：nodeType为3

文本节点包括文字，空格，换行
节点操作操作的主要是元素节点

1.5.1节点层级

利用dom树可以把节点划分为不同的层级关系，常见的父子兄层级关系

1.5.2 父级节点

node.parentNode
可返回某个节点的父级节点，注意是最近的一个父级节点

1.5.3 子级节点

childNodes:包含元素节点和文本节点(不推荐)
children：较为常用，获取子元素节点

firstChild：获取第一个子节点，无论是文本节点还是元素节点（不常用）
lastChild：获取最后一个子节点，无论是文本节点还是元素节点（不常用）

firstElementChild：获取第一个子 元素 节点（ie9+不兼容）
lastElelmentChild：获取最后一个子 元素 节点（ie9+不兼容）

1.5.4 兄弟节点

• nextSibling：下一个兄弟节点，包括文本节点和元素节点

• previousSibling：上一个兄弟节点，包括文本节点和元素节点

• nextElementSibling：下一个兄弟节点，只包括元素节点

• previousElementSibling：上一个兄弟节点，只包括元素节点

1.5.5 创建节点

document.createElement('节点标签名')

1.5.6 添加节点

Node.appendChild('节点标签名')—尾部添加

Node是添加的父级
意思是：将新增节点添加到ul的子元素后面

1.5.7 指定位置添加节点

Node.insertBefore(添加元素，指定位置)

将新增元素添加到node的指定位置

1.5.8 删除节点

Node.removeChild(删除的元素)

将删除Node子元素的指定元素

1.5.9 克隆节点

Node.cloneNode(bool);

当bool为true时，此时为深拷贝（克隆子节点）
bool为false时，此时为浅拷贝（不克隆子节点）

1.6 事件高级

1.6.1鼠标点击事件对象

btn.addEventListener('click', (e) => {
	console.log(e);
});

得到一个事件对象
PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}

这个事件对象中有很多的属性，它们保存了这个事件触发时的信息

常用的鼠标事件对象属性有

• target
  保存了鼠标事件触发的事件源
• clientX clientY
  可以获取鼠标当前位置相对于浏览器可视区的位置坐标
• pageX pageY
  可以获取鼠标性相对与页面文档的位置坐标（包括被卷去的页面）
• screenX screenY
  获取鼠标相对于电脑屏幕的位置坐标
• preventDefault
  阻止事件的默认行为，如a标签的跳转
• stopPropagation
  阻止事件的默认冒泡
• button buttons which用来判断是鼠标的哪个键操作的
  左键对应的值为 0、1、1
  中键对应的值为 1、4、2
  右键对应的值为 2、2、3
• layerX,layerY 往上找有定位属性的父元素的左上角（自身有定位属性的话就是相对于自身），都没有的话，就是相对于body的左上角

技巧
禁止鼠标选中

document.addEventListener('selectstart', function (e){
	//selectstart控制鼠标选中
    // .preventdefault禁止鼠标点击默认行为
    e.preventDefault();
 });

禁止鼠标右键

document.addEventListener('contextmenu', function (e) {
     e.preventDefault();
     //contextmenu可以控制·上下文、、
     //e.preventDefault();可以禁止默认行为
});

1.6.2 键盘事件对象

当键盘进行了操作后触发

键盘事件

• keyup
  键盘按键弹起keyup
• keydown
  键盘按键按下事件keydown
• keypress
  keypress也可在某键按下时触发

三者同时存在时输出顺序为keydown -> keypress -> keyup

常见的键盘事件对象属性有

• keyCode
  keyCode可以检测键盘按下的按键的ASCII值
• key
  .key可以直接检测键盘按下按键的类型 有兼容问题