JavaScript中的DOM

ゝ一世哀愁。 2023-06-14 04:28 46阅读 0赞

# DOM： #

Document Object Model，文档对象模型，是w3c组织推荐的处理可扩展标记语言的标准编程接口

## 1. DOM树： ##

**文档：** 一个页面就是一个文档，DOM中使用document表示  
**元素：** 页面中的所有标签都是元素，DOM中使用element表示

**获取元素的方式：**  
1.根据id document.getElementById() 参数为大小写敏感的字符串，返回的是dom元素对象  
2.根据标签名 document.getElementsByTagName() 返回的是dom元素对象集合，以伪数组的形式存储  
3.通过H5新方法  
1）根据类名获取 document.getElementsByClassName()  
2）根据选择器获取 document.querySelector() 返回指定选择器的第一个元素对象,里面的选择器需要加符号  
document.querySelectorAll() 返回指定选择器的所有元素对象  
4.特殊元素获取  
body获取：document.body  
html获取：document.documentElement  
console.dir打印返回的元素对象，更好的查看里面的属性和方法

## **2.事件基础：** ##

js有能力创建动态页面，而事件是可以被js侦测到的行为

**事件三要素**  
1.事件源 事件被处理的对象  
2.事件类型 如何触发，比如鼠标点击  
3.事件处理程序 通过一个函数赋值的方式完成  
**执行事件的步骤：**  
1.获取事件源  
2.绑定事件  
3.添加事件处理程序

## 3. 操作元素 ##

dom操作可以改变网页内容、结构和样式，可以利用dom操作元素来改变元素里面的内容、属性  
**改变元素内容：**  
innerText  
innerHTML  
***区别：*** 1. innerText 不识别html标签，非标准 ，去除空格和换行 2. innerHTML 识别html标签，W3C标准，保留空格和换行的

**表单元素的属性操作：**  
input.value  
input.disabled  
input.type

**样式属性操作：**  
元素.style 行内样式操作，修改的样式较少 .style里面的属性 采取驼峰命名法 产生的是行内样式，css权重比较高  
元素.className 类名样式操作，修改的样式较多

**自定义属性操作：**  
*创建自定义属性的目的：* 保存并使用数据  
***1.获取元素的属性值：***  
(1) element.属性  
(2) element.getAttribute(‘属性’) 主要针对于自定义属性  
***2. 设置元素属性值***  
(1) element.属性= ‘值’  
(2) element.setAttribute(‘属性’, ‘值’); 主要针对于自定义属性  
***3 移除属性***  
removeAttribute(属性)

## 4.节点操作 ##

**节点概述：** 网页中所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点使用node表示。DOM树中所有节点均可通过js进行访问，所有HTML冤死均可被修改，也可以被创建或删除。节点一般有 *nodeType（节点类型）、nodeName（节点名称）、nodeValue（节点值）* 三个基本属性。  
元素节点nodeType为1  
属性节点nodeType为2  
文本节点nodeType为3（文本包括文字、空格、换行等）  
主要操作的是元素节点

1.  **父节点** node.parentNode 得到的是离元素最近的父级节点
2.  **子节点** node.childNodes 所有的子节点 包含 元素节点 文本节点等等 不常用  
    node.children 获取所有的子元素节点 也是我们实际开发常用的  
    node.firstChild 第一个子节点 不管是文本节点还是元素节点  
    node.firstElementChild 返回第一个子元素节点 ie9才支持  
    node.children\[0\]实际开发的写法 既没有兼容性问题又返回第一个子元素  
    ol.children\[ol.children.length - 1\]获取最后一个子元素
3.  **兄弟节点** node.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等 previousSibling 上一个  
    nextElementSibling 得到下一个兄弟元素节点  
    previousElementSibling 得到前一个兄弟元素节点

**创建节点：**

1.  document.createElement() 也称为动态创建元素节点，创建多个元素效率稍微低一点，结构简单
2.  document.write() 如果页面文档流加载完毕，再调用这句话会导致页面重绘
3.  element.innerHTML() 创建多个元素效率更高（采取数组存储的方式，不要用字符串拼接的方式），结构稍微复杂

**添加节点：**

1.  node.appendChild(child ) node是父级 ，child是子级 ， 类似于数组中的push
2.  node.insertBefore(child, 指定元素) 将一个节点添加到父节点的指定子节点的前面

**删除节点：** node.removeChild(child)

**复制节点：** node.cloneNode() 括号为空或者里面是false，浅拷贝， 只复制标签不复制里面的 内容；括号为true 深拷贝 复制标签复制里面的内容

## 5.事件高级 ##

**注册事件：**

1.  传统方式注册事件：都是on开头的  
    *特点：* 注册事件的唯一性，同一个元素的同一个事件只能设置一个处理函数，后面的函数会覆盖前面的
2.  事件侦听注册事件：w3c标准 ie9以前不支持  
    addEventListener  
    *特点：* 同一个元素同一个事件可以注册多个监听器，按照注册顺序依次执行  
    *参数：*  
    type：事件类型字符串，比如click，不要加on  
    listener：事件处理函数，事件发生时，会调用该监听函数  
    useCapture：可选参数，布尔值，默认false，具体查看DOM事件流
3.  attachEvent ie9以前的版本支持，非标准

**删除事件（解绑事件）：**

1.  传统方式删除事件：  
    divs\[0\].onclick = function() \{  
    alert(11);  
    divs\[0\].onclick = null;  
    \}
2.  removeEventListener  
    divs\[1\].addEventListener(‘click’, fn) // 里面的fn 不需要调用加小括号  
    function fn() \{  
    alert(22);  
    divs\[1\].removeEventListener(‘click’, fn);  
    \}
3.  detachEvent  
    divs\[2\].attachEvent(‘onclick’, fn1);  
    function fn1() \{  
    alert(33);  
    divs\[2\].detachEvent(‘onclick’, fn1);  
    \}

## 6.DOM事件流 ##

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程就是DOM事件流  
*三个阶段：* 捕获阶段、当前目标阶段、冒泡阶段  
**注意：**

1.  JS 代码中只能执行捕获或者冒泡其中的一个阶段；  
    2. onclick 和 attachEvent（ie） 只能得到冒泡阶段；  
    3. 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段 document -> html -> body -> father -> son；  
    4. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段 son -> father ->body -> html -> document  
    实际开发中很少使用事件捕获，更关注事件冒泡；有些事件是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave等

## 7. 事件对象 ##

div.onclick = function(e) \{\}

1.  event 就是一个事件对象,写到侦听函数的小括号里面,当形参来看
2.  事件对象只有有了事件才会存在，它是系统自动创建的，不需要我们传递参数
3.  事件对象是事件的一系列相关数据的集合,跟事件相关 比如鼠标点击里面就包含了鼠标的相关信息（如鼠标坐标），如果是键盘事件里面就包含的键盘事件的信息（ 比如判断用户按下了那个键）
4.  这个事件对象我们可以自己命名 比如 event 、evt、 e
5.  事件对象也有兼容性问题 ie678通过window.event 兼容性的写法 e = e || window.event;

**阻止默认行为（事件）：** 比如让链接不跳转 或者让提交按钮不提交

1.  e.preventDefault() 方法
2.  e.returnValue;低版本浏览器 ie678 returnValue 属性
3.  return false; 没有兼容性问题 后面代码不能执行，只限于传统注册方式

**阻止冒泡**

1.  e.stopPropagation(); // stop 停止 Propagation 传播
2.  e.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡

## 8.事件委托 ##

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

## 9. 常见的事件 ##

**常见的鼠标事件：**

// 1. contextmenu 我们可以禁用右键菜单
            document.addEventListener('contextmenu', function(e) { 
                    e.preventDefault();
                })
                // 2. 禁止选中文字 selectstart
            document.addEventListener('selectstart', function(e) { 
                e.preventDefault();
            })

***鼠标事件对象 MouseEvent***

document.addEventListener('click', function(e) { 
                // 1. client 鼠标在可视区的x和y坐标
                console.log(e.clientX);
                console.log(e.clientY);
                console.log('---------------------');
    
                // 2. page 鼠标在页面文档的x和y坐标
                console.log(e.pageX);
                console.log(e.pageY);
                console.log('---------------------');
    
                // 3. screen 鼠标在电脑屏幕的x和y坐标
                console.log(e.screenX);
                console.log(e.screenY);

**常用的键盘事件**

1.  keyup 按键弹起的时候触发
2.  keydown 按键按下的时候触发，能识别功能键
3.  keypress 按键按下的时候触发，不能识别功能键，如ctrl、shift、箭头等  
    ***三个事件的执行顺序*** keydown – keypress – keyup

键盘事件对象中的keyCode属性可以得到相应键的ASCII码值

1.  keyup 和keydown事件不区分字母大小写 a 和 A 得到的都是65
2.  keypress 事件 区分字母大小写 a 97 和，A 得到的是65