文章目录

• 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 获取元素

标签名获取

id名获取

类名获取

通用获取

获取 HTML 、BODY标签

获取全部元素集合

1.3 事件基础

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

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

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

事件源

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

事件类型

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

事件处理程序

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

如一个点击事件

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

or

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

常见的鼠标事件
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('节点标签名')—尾部添加

1.5.7 指定位置添加节点

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

1.5.8 删除节点

Node.removeChild(删除的元素)

1.5.9 克隆节点

Node.cloneNode(bool);

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也可在某键按下时触发

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

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