JS WEB API DOM

最新推荐文章于 2023-02-02 16:57:33 发布

不明真相的末影人丶

最新推荐文章于 2023-02-02 16:57:33 发布

阅读量147

点赞数

文章标签： javascript dom

本文链接：https://blog.csdn.net/moyingrenlike/article/details/116257430

版权

DOM概念

浏览器把网页，网页中的内容描述成对象，这些对象称为节点；（浏览器把内容的特征描述成对象的属性）——网页的内容：标签、文本、注释（都称为节点、标签也叫元素）

DOM对象：浏览器把页面中的所有内容都逐个翻译为对象，把内容的特征翻译成对象的属性；
DOM树：DOM对象之间按照层级结构相互关联，形成的树状结构称为DOM树；

元素的属性 – 标签被翻译成对象，标签的特征被翻译成对象的属性；

页面元素获取的几种方法

1.根据ID获取 - document.getElementById('id名');–返回值是一个元素、一个DOM对象，此方法前置必须是document
2.根据标签名获取 - 元素.getElementByTagName('标签名');–返回值是元素的集合，一个伪数组，使用时要加索引值；
3.特殊元素的获取 - 整个页面文档 document、html document.documentElement、body document.body

4.H5新增方法
根据类名获取 - 元素.getElementsByClassName('类名') 返回值是一个伪数组
根据css选择器获取 - 元素.querySelector('css选择器')、元素.querySelectorAll('css选择器')

事件

事件三要素–事件源（事件发生的主体）、事件类型、事件处理程序（事件发生时执行的操作、事件处理程序中使用this 指向的是事件源）

事件类型在这里插入图片描述
注册事件（绑定事件）的方式

事件源.事件类型 = 事件处理程序

事件的执行方式 – 注册事件时，事件处理程序不会执行；当满足事件触发条件时，才会执行处理程序；

innerHTML 和 innerText 的区别

innerHTML识别HTML标签，保留空格和换行，是W3C标准语法；
innerText不识别HTML标签，不保留空格换行，不是标准语法；

标签的自定义属性

标签的自定义属性不会被翻译成元素的属性；

操控标签属性的方法：
获取：DOM对象.getAttribute(属性名)
设置：DOM对象.setAttribute(属性名，属性值)
删除：DOM对象.removeAttribute(属性名)

H5新增的自定义属性
以date-开头的自定义属性
规则：
以data-开头的标签自定义属性，都会记录到元素的dataset中；
在元素的dataset属性中添加自定义属性，也会被反映到标签上；

操作方法：
获取：元素.dataset.自定义属性名；
注意：这个自定义属性名是去除data-之后的部分，在js中使用驼峰命名法书写
设置：元素.dataset.自定义属性名 = 属性值；
添加：元素.dataset.新属性名 = 属性值；
删除：delete 元素.dataset.属性；

节点

概念：浏览器把页面中的内容描述成对象，这个对象就叫做节点（DOM对象）{又分为标签节点（元素）、文本节点、注释节点}

通过节点属性获取节点
父代 – 获取父节点：parentNode （获取到的肯定是标签节点、是一个元素）

子代 – 获取所有子元素：children （获取到的是一个元素的集合）
获取第一个子元素：firstElenmentChild
获取最后一个子元素：lastElenmentChild

兄弟 – 获取上一个兄弟元素：previousElenmentSibling
获取下一个兄弟元素：nextElenmentSibling

获取所有子节点： childNodes
获取第一个子节点：firstChild
获取最后一个子节点：lastChild
获取上一个兄弟节点：previousSibling
获取下一个兄弟节点：nextSibling
[这五种方法获取到的节点包括文本节点和注释节点、不常用]

创建节点
createElenmet
调用方式 document.createElenment(标签名)；
返回值：一个标签节点，可以按照标签节点的方式来操作
注意：这个方法只能创建节点，不引入是不会显示在页面中
此方法只能被document调用；

innerHTML 赋值为一个具有标签格式的字符串，浏览器会把当前字符串中的内容翻译为标签；

插入节点
appendChild
使用方式：父元素.appendChild(要插入的节点)； 会把节点插入到父元素的最后一个子节点位置；

insertBefore
使用方式：父元素.insertBefore(新节点，参考节点)； 把新节点插入到参考节点的前面；

删除节点
removeChild
使用方式：父元素.remove(要删除的子元素)； 注意：子元素只能被父元素删除

remove
使用方式：要删除的元素.remove(); 括号里不写参数，此方法是删除自己；

克隆节点
cloneNode
使用方式：被克隆的元素.cloneNode(参数)；
如果参数是true，表示将当前元素及其内容一起复制；
如果参数是false或没有参数，则只复制当前元素；

创建元素的三种方式

一、document.write() 缺点：页面加载完成之后再调用此方法会把这个页面内容覆盖、所以不要使用；
二、innerHTML（会把标签格式的字符串识别为标签）
效率的问题：当给一个DOM对象的innerHTML对象赋值时，会有两步–1.字符串赋值；2.重新渲染整个页面（这一步很消耗时间）所以使用innerHTML时，应先将字符串拼接好之后，再去进行innerHTML赋值；
三、createElement
语法：

document.createElement('标签名');

注册事件的几种方式

一、传统方式
注册事件：事件源.on事件类型 = 事件处理程序 --- eg ： box.onclick = function();
弊端：不能重复注册，如果重复的话，后面的会将前面的覆盖；
删除事件：元素.on事件类型 = null；

二、事件监听
注册事件：事件源,addEventListener(事件类型，事件处理程序)；注意：此处事件类型前面不加on
使用addEventListener的第三个参数 – true在捕获阶段执行、false或不写在冒泡阶段执行；
注意：1.通过事件监听可以为同一个元素注册多个相同事件；
2.先注册的事件先执行；
3.如果注册的事件要解绑，事件处理程序必须写为函数名；
删除事件：事件源.removeEventListener(事件类型，事件处理程序)；注意：此处事件处理程序只能写函数名；

事件的三个阶段

1.捕获阶段：从上到下，直到事件源停止；
2.目标阶段：执行事件源的事件处理程序；
3.冒泡阶段：从下往上，知道window（可以理解为document、但实际上是window）停止；
注意：默认状态下，事件再冒泡阶段触发
修改事件的执行阶段：
使用addEventListener的第三个参数 – true在捕获阶段执行、false或不写在冒泡阶段执行；