前端自学学习笔记——JS(DOM)

前端自学学习笔记——JS(DOM)

第一章 DOM简介

1.1 DOM 含义

DOM是处理可扩展标记语言(HTML和XML)的编程接口，处理对象是document。

1.2 DOM组成

DOM树由文档（document）、元素（element）、节点（node）组成。

​ 文档：一个页面就是一个文档，用document表示。

​ 元素：页面中所有标签都是元素，用element表示。

​ 节点网页中所有内容都是节点（标签，属性，文本，注释等），用node表示。

第二章 DOM操作元素

2.1 获取页面元素

1. 根据ID，getElementById()方法，返回一个元素对象。
2. 根据标签名，getElementsByTagName()方法，返回元素对象集合，以伪数组存储。
3. 通过H5新增方法，getElementsByClassName()方法、querySelectorAll()、querySelector()方法。
4. 特殊元素，获取body通过document.body；获取html通过document.documentElement

var idname = document.getElementById('id名')
var tagname = document.getElementsByTagName('标签名')
var classname = document.getElementsByClassName('类名')
var select = document.querySelector('选择器')
var selectall = document.querySelectorAll('选择器')
var body = document.body//获取body元素
var html = document.documentElemnt//获取html元素

注：使用console.dir()方法可以打印返回的元素对象，可查看里面的属性和方法。

getElementsByClassName()返回一个以伪数组存储的元素的集合。

querySelectorAll()返回指定选择器的所有元素对象的集合。

querySelector()返回指定选择器的第一个元素对象。

2.2 操作元素

2.2.1 改变元素内容

• element.innerText：从起始位置到终止位置得内容，但去除HTML标签、空格、换行去掉。
• element.innerHTML：从起始位置到终止位置得内容，包括HTML标签，且保留空格、换行。

二者最大得区别在于：是否识别HTML标签

2.2.2 操作表单属性

• 获取表单属性值：element.属性名

• 修改表单属性：element.属性名 = 值

注：在表单中，value的内容不能通过innerHTML获取，而是通过element.value获取并修改。

2.2.3 修改样式属性

• 行内样式操作
  • 语法：element.style.样式属性 = ‘值’
  • JS修改style样式操作，产生的是行内样式，权重高
• 类名样式操作
  • 语法：element.className = ’类名‘
  • 表示将当前类名修改为另外一个类名（会覆盖原先的类），此写法必须现在css中写好样式。

2.2.4 操作元素内置属性

1. 设置元素属性值：element.属性名 = ‘值’
2. 获取元素属性值：element.属性名
3. 移除元素属性值：element.属性名 = ‘’

2.2.5 操作自定义属性

1. 设置自定义属性值：element.setAttribute(‘属性名’，‘值’)
2. 获取自定义属性值：element.getAttribute(‘属性名’)
3. 移除自定义属性：element.removeAttribute(‘属性名’)
4. H5设置自定义属性：规定以"data-"开头作为属性名，写在标签中
5. H5获取自定义属性：element.dataset.属性名 或 element.dataset[‘属性名’]

注：dataset是一个集合里存放了所有以"data-"开头的自定义属性，若属性名中有多个”-“链接的单词，采用驼峰命名法。

2.3 操作节点

利用节点的层次关系获取元素，，操作更简单。

节点至少拥有三个属性：nodeType（节点类型）、nodeName（节点名称）、nodeValue（节点值）

元素节点nodeType为1、属性节点nodeName为2、文本节点nodeValue为3

2.3.1 获取元素的相关节点

1. 父节点：element.parentNode 得到离该元素最近的父节点，找不到则为null。

2. 子节点：element.childNode 得到所有子节点，包括元素节点、文本节点等。（此方法若想获得元素节点需要利用节点的nodeType值进行处理）

   ​ element.children 获得所有子元素节点。

   ​ element.firstchild 获得第一个子节点，文本节点或元素节点。

   ​ element.lastchild 获得最后一个子节点，文本节点或元素节点。

   ​ element.firstElementchild 获得第一个子元素节点，存在兼容性问题。

   ​ element.lastElementchild 获得第一个子元素节点，存在兼容性问题。

   ​ element.children[index] 获得索引为index的子元素节点，无兼容性问题。（此方法若子元素节点个数变化得到最后一个子元素节点，利用index = element.children.length-1）

3. 兄弟节点：element.nextSibling 返回下一个兄弟节点，包括文本节点、元素节点等。

   ​ element.previousSibling 返回上一个兄弟节点，包括文本节点、元素节点等。

   ​ element.nextElementSibling 返回下一个兄弟元素节点，存在兼容性。

   ​ element.previousElementSibling 返回上一个兄弟元素节点，存在兼容性。

   ​ 兼容性解决方法：封装一个行数，利用nodeType为1这个性质。

2.3.2 创建节点

• document.createElement(‘标签名’)：可以根据标签名创建一个元素节点对象，动态生成。

• document.createTextNode(‘文本内容’)：可以根据文本内容创建一个文本节点对象

2.3.3 添加节点

• 父节点.appendChild(子节点)：向父节点后面添加指定的子节点

• 父节点.insertBefore(新节点,旧节点)：将一个新的节点插入到旧节点的前边

2.3.4 替换节点

• 父节点.replaceChild(新节点,旧节点)：使用一个新的节点去替换旧节点

2.3.5 删除节点

• 父节点.removeChild(子节点)：删除指定的子节点

• 推荐方式：子节点.parentNode.removeChild(子节点)

2.3.6 复制节点

• element.cloneNode()：参数为空或false时，表示只复制标签，不复制内容

  ​ 若有参数或true时，会复制内容和标签。

拓：动态创建元素的方法：

​ document.write()直接将内容写入页面的内容流，当文档流执行完毕，则它会重绘页面（重新加载一个新的HTML页面）。利用element.innerHTML或document.createElement()两种方法，其中在创建多个元素时，使用innerHTML效率更高（不采用拼接字符串，采用数组形式拼接），而createElement()结构更清晰。

//此方法效率最高
var arr = [];
for (let i = 0; i < 遍历次数; i++) {
    arr.push('<h1></h1>')
}
元素.innerHTML = arr.join('')

第三章 事件

3.1 事件组成

由事件源（事件处理对象）、事件类型（如何触发事件）、事件处理函数（通过函数赋值方式完成）。

btn.onclick = function(){}
//语法：
//事件源.事件类型 = function(){}

3.2 执行步骤

1. 获取事件源
2. 注册事件（绑定事件）
3. 添加事件处理程序（采用函数赋值方式）

3.3 注册事件

3.3.1 传统注册方式

语法：eventTarget.事件类型 = function(){}

利用on开头的事件类型，此方法同一元素同一事件只能设置一个处理函数。

3.3.2 方法监听注册方式

语法：eventTarget.addEventListener(‘type’,‘listener’[,‘useCapture’])

参数含义：type：事件类型，此处事件类型不用带on。

​ listener：事件处理函数。

​ useCapture：可选参数，一个布尔值。默认false，处于冒泡阶段；为true，处于捕获阶段。

此方法同一元素同一事件可添加多个监听器（按顺序执行）。

还有一种方法：attachEvent()方法参数与addEventListener()一样，但IE9之前使用才方式。

3.4 删除事件

3.4.1 传统删除方式

语法：eventTarget.事件类型 = null

3.4.2 方法监听注册方式

语法：eventTarget.removeEventListener(‘type’,‘listener’[,‘useCapture’])

参数含义：type：事件类型，此处事件类型不用带on。

​ listener：事件处理函数，此时要将注册时的事件处理函数封装在一个方法中，此处写方法名。

​ useCapture：可选参数，一个布尔值。默认false，处于冒泡阶段；为true，处于捕获阶段。

还有一种方法：detachEvent()方法参数与removeEventListener()一样，但IE9之前使用才方式。

3.5 事件流

含义：事件发生时会在元素节点直接按照特定的顺序传播，此过程为事件流。

三个阶段：捕获阶段、当前目标阶段、冒泡阶段。

捕获阶段：由DOM顶节点逐级往下；

冒泡阶段：事件开始时由具体元素接受，逐级向上，到DOM顶节点。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5LgDf7Bi-1652348418480)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1652348388099.png)]

注：在注册事件时，使用传统方式注册和attachEvent()方法注册时，只能得到冒泡阶段。

一些特殊事件无冒泡阶段：blur、focus、mouseenter、mouseleave

3.6 事件对象

写在侦听函数的小括号中，当作形参看。

事件对象只有有了事件才会存在，它是系统给自动创建的，不需要传递参数。

事件对象是事件的一系列相关数据的集合，与事件有关，常用e、event表示。

兼容性解决：e = e || window.event（ie6~8这样写）

事件对象的常见属性：e.target 返回触发事件对象

​ e.type 返回事件的类型

事件对象的常用方法：e.preventDefault() 该方法用于阻止事件的默认行为

​ e.stopPropagation() 该方法用于阻止冒泡

​ e.returnValue 该属性用于阻止事件的默认行为（IE6~8）

​ e.cancelBubble 该属性用于阻止冒泡（IE6~8）

3.7 事件委托

在jQuery中称为事件委派，操作一次DOM，提高性能。

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

3.8 常见鼠标事件以及鼠标事件对象

3.8.1 常见鼠标事件

鼠标事件	触发条件
click	鼠标单击事件
mouseover	鼠标（指针）移入事件
mouseout	鼠标（指针）移出事件
mousedown	鼠标按下事件
mouseup	鼠标松开事件
mousemove	鼠标移动事件

3.8.2 常见鼠标事件对象

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

3.9 常见键盘事件以及键盘事件对象

3.9.1 常见键盘事件

键盘事件	触发条件
keyup	某个按键被松开时触发
keydown	某个按键被按下时触发（识别功能键）
keypress	某个按键按下时触发（不识别功能键）

注：上述三者执行顺序为keydown——keypress——keyup

keydown、keypress、keyup在文本框中的特点：keydown和keypress触发时，文字还未落入文本框中；而keyup触发时文字就已经落入文本框中。

3.9.2 常见键盘事件对象

事件对象	含义
keyCode	返回该键的ASCII码值

如果觉得对你有帮助的话，点个赞呗~

如需转载，请注明出处Hoki802