dom进阶知识详解

Bertha 。 2022-11-15 11:38 232阅读 0赞

故心故心故心故心小故冲啊

--------------------

### 文章目录 ###

*   *  一.JS的组成
     *  二.事件
     *   *  1.注册事件,解绑事件
         *  2. 事件的三个阶段
         *  3. 解决冒泡
         *  3.事件对象
         *  4.事件委托
     *  三.获取元素
     *  四. 修改样式
     *  五.开关属性
     *  六.自定义属性
     *   *  1.JS的自定义属性
         *  2. H5 的自定义属性
     *  七.节点
     *   *  节点校验
     *  八.定时器
     *  九.跳转页面
     *  十.三大家族
     *  十一.拖拽

--------------------

## 一.JS的组成 ##

ECMAScript : 规范，规定了js的基本语法和功能

DOM ： document object model 文档对象模型，浏览器提供的一套操作元素的API

BOM ： browser object model 浏览器对象模型，浏览器提供的一套操作浏览器功能的API

**API**

API ： application programing interface 应用程序编程接口

—— 别人已经写好的一套代码，多以对象的形式存在，我们要学习这些对象的属性的方法，结合自己的思路，完成效果

WebAPI : 浏览器里面专有的API ，就是DOM+BOM

**DOM**

document —— 整个页面，把整个页面看成一个对象，使用对象把页面里面的所有东西管理起来

## 二.事件 ##

事件:

1.  事件通常是浏览器里面的交互瞬间，比如我们点下的瞬间
2.  也就是说事件的功能之一是处理浏览器和用户的交互
3.  注册事件:要使用事件处理交互，需要先注册事件

事件源.on事件类型 = 事件处理程序
    翻译过来可以看成
    元素对象.on操作 = function(){ }
    事件源、事件类型、事件处理程序，并称为   事件三要素

onclick        单击         ondblclick     双击
    onmouseover    鼠标移入     onmouseout      鼠标移出
    onmouseenter   鼠标移入     onmouseleave    鼠标移出
    onfocus        聚焦         onblur          失焦
    onmousedown    鼠标按下     onmouseup      鼠标松开
    onmousemove    鼠标移动

### 1.注册事件,解绑事件 ###

移除事件的三种方式小结如下：

1.  onclick：让按钮的事件处理函数只能执行一次，οnclick=null ；
2.  removeEventListener：如果想要移除事件，注册事件的时候就不能使用匿名函数；
3.  detachEvent：谷歌中不支持，IE9-IE11中支…持，了解即可；

// 注册事件方式 1
    	元素.on事件类型 = function(){ }
    // 解绑
    	解绑元素.on事件类型 = null;
    // 注册事件 2
    	元素.addEventList('事件类型' , 回调函数 , 布尔值)   // 不兼容 IE
    // 解绑
    	解绑元素.removeEventListener('事件类型' , 函数)   // 注意:这个函数必须和注册事件的函数是同一个
    // 注册事件 3
    	元素.attachEvent('on事件类型' , 回调函数)       // 只兼容 IE
    // 解绑
    	元素.detachEvent('on事件类型' , 回调函数)      // 注意: 这个函数必须和注册的函数是同一个
    
    // 如果需要同时兼容 Chrome 和 IE 就需要做一个判断
    // 判断的标准是: window.addEventListener
    if(window.addEventListener){ 
        // 此时是 Chrome
        元素.addEventListener('事件类型' , 回调函数 , 布尔值)
    }else { 
        // 此时是 IE
        元素.attachEvent('事件类型' , 回调函数)
    }
    
    
    // 回调函数(callback) : 就是一个匿名函数 作用: 当监听事件发生时.触发执行函数

### 2. 事件的三个阶段 ###

// e.eventPhase 
    1----捕获阶段
    2----目标阶段 (执行当前点击的元素)
    3----冒泡阶段
    // addEventListener 第三个参数是布尔值,当为true时,可以模拟事件捕获,当为false时,代表冒泡,默认是false

### 3. 解决冒泡 ###

事件冒泡:多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了.

// 使用事件对象来阻止冒泡
    btn.onclick = function(e){ 
        e.stopPropagation();   // e---event的简写 指事件对象 不兼容IE 
    }
    btn.onclick = function(e){ 
        widow.event.cancelBubble = true ;     // IE 解决冒泡
    }
    
    // 鼠标移入 onmouseenter 自带解决冒泡

### 3.事件对象 ###

// js里面提供了一个包含当前事件信息的对象 —— 事件对象
    // 获取事件对象只要给事件处理函数添加一个形参就可以了
    element.onclickc = function(e){  
        e 就是事件对象
    }
    element.addEventListener('click',function(e){  
        e 也是事件对象
    })
    // 事件对象的属性和方法
    event.type
    event.pageX/pageY   // 鼠标移动的横,纵坐标
    event.clientX/clientY
    event.target    // 可以获取到点击的的实际对象
    event.stopPropagation()    // 解决冒泡 
    event.preventDefault()

### 4.事件委托 ###

// 在页面中可以随时操作这些新增的 dom 节点
    // 页面没有 li 把点击 li 这件事情委托为父级
    e.target        // 可以获取到点击的实际对象
    e.currentTarget  // 可以当前真正被点击的对象
    当只有一层盒子时, e.currentTage === e.target;
    当盒子嵌套时,如果进行了事件委托,那么 e.currentTarget  >  e.target

## 三.获取元素 ##

// 通过 id 获取元素
    		document.getElementById('id名');
    // 通过 标签名 获取元素
    		document.getElementsByTagName('标签名'); // 无论页面上满足条件的元素有多少个，都是返回伪数组，必须把里面的元素使用索引取出来才能操作
    // 通过 类名 获取 元素
    		document.getElementsByClassName('类名'); // 无论页面上满足条件的元素有多少个，都是返回伪数组，必须把里面的元素使用索引取出来才能操作
    // 通过 name 名获取元素
    		document.getElementsByName('name名');   // 无论页面上满足条件的元素有多少个，都是返回伪数组，必须把里面的元素使用索引取出来才能操作
    // 通过 querySelector 获取元素
    		document.querySelector('#id名')      // 获取id名
    		document.querySelector('.类名')      // 获取 同类名 的第一个元素
    		document.querySelector('标签名')     // 获取 同标签名 的一个元素
    		document.querySelector('选择器')     // 通过选择器获取元素
    		document.querySelectorAll('.类名')   // 获取 全部的类名 伪数组的方式
      // 注意点: 这个后面一定是选择器 选择器 选择器

## 四. 修改样式 ##

// 修改 标签 身上的属性
    		元素.属性名 = '新的值';
    // 修改 标签 的 css 行内样式
    		元素.style.属性名 = '新的值';
    // 修改 标签 里面的 文本内容
    		元素.innerText = '新的值';
    		元素.innerHTML = '新的值';
    // 通过 类名 对样式进行控制
    		元素.className = '新的类名';
    
    		元素.classList.add('类名','类名')       // 添加类名
    		元素.classList.remove('类名', '类名')   // 删除类名
    		元素.classList.toggle('类名')           // 切换类名

1.  innerText 和 innerHTML 的区别
    
    1.  读取的时候
        
        1.  innerText只能读取到文本的内
        2.  innerHTML可以获取到html标签和文本内容
    2.  写入的时候
        
        1.  innerText无法将标签尽心编译,只能以文本的形式呈现标签
        2.  innerHTML可以解析 html 标签,让浏览器可以识别
2.  JS里面创建元素的方式
    
        // 1. innerHTML
        	元素.innerHTML = 'html'格式的字符串   // 会覆盖之前的内容,实现效率低
        // 2. document.createElement
            用法:
        		var element = document.createElement('tagname')
                	element   是一个元素对象
                    tagname   是一个标签名
           	创建之后,不会自己出现在页面里面,需要我们手动添加内容,属性都是空的,需要自己定义
        appendChild  用法:
        		父元素.appendChild(子元素)            // 是把元素 a 作为 元素b 的子元素 ,在最后
        insertBefore 
        		父元素.insertBefore(新元素 , 旧元素)   // 把一个元素插入到另一个元素的前面
        removeChild 
        		父元素.removeChild(子元素)            // 移除子元素

## 五.开关属性 ##

标准属性里面有一类属性比较特殊

1.  checked 是否被选中------------单选框,多选框
2.  selected 是否被选中-------------下拉框
3.  disabled 是否禁用

它们只会有两个结果,都使用 Boolean 表示

可以通过 true 或者 false 操作开关属性

// 操作开关属性
    元素.checked = true;   // 禁用文本框
    
    // 阻止 a 标签的默认事件
    a元素.onclick = function(){ 
        return false ;   // 阻断所有的代码
    }

## 六.自定义属性 ##

### 1.JS的自定义属性 ###

// 设置自定义属性
    	元素.setAttribute('key(变量)' , 'value(值)');
    // 获取自定义属性
    	元素.getAttribute('key');
    // 删除自定义属性
    	元素.removeAttribute('key');

### 2. H5 的自定义属性 ###

// 一种在标签里面
    data-属性名='值';   // 设置
    dataset.属性名;     // 获取
    // 在JS里面
    dataset.属性名.'值';
    dataset.属性;        // 获取

## 七.节点 ##

节点:页面中所有的内容(标签,属性,文本(文字,换行,空格,回车)),Node

// 获取父节点
    	子元素.parentNode
    // 获取父元素
    	子元素.parentElement
    // 获取子节点
    	父元素.childNodes
    // 获取子元素
    	父元素.children
    // 获取第一个子节点
    	父元素.firstchild
    // 获取第一个子元素
    	父元素.firstElementchild
    // 获取最后一个子节点
    	父元素.lastchild
    // 获取最后一个子元素
    	父元素.lastElementchild
    // 获取上一个兄弟节点
    	元素.previousSibling
    // 获取上一个兄弟元素
    	元素.previousElementSibling
    // 获取下一个兄弟节点
    	元素.nextSibling
    // 获取下一个兄弟元素
    	元素.nextElementSibling

### 节点校验 ###

节点属性: (可以使用标签–元素.出来,可以使用属性节点.出来,文本节点.点出来)

1.  节点的类型 : . nodeType
    
    1.  标签节点 : 1
    2.  属性节点: 2
    3.  文本节点: 3
2.  节点的名字 : . nodeName
    
    1.  标签节点 : 大写的标签名字
    2.  属性节点: 小写的属性名字
    3.  文本节点: \#text
3.  节点的值 : . nodeValue
    
    1.  标签节点 : null
    2.  属性节点 : 属性值
    3.  文本节点 : 文本内容

## 八.定时器 ##

// 单次定时器
    	setTimeout(回调函数 , 毫秒,传入的参数);
    // 清除单次定时器
    	clearTimeout(定时器的名称);
    
    // 循环定时器
    	setInterval(回调函数 , 毫秒);
    // 清除单次定时器
    	clearInterval(定时器名称);
    
    // 注意点 : 循环定时器需要手动清除,要么给判断条件清除
    // 在点击事件里面,一定记得在最开始的位置清除定时器,不然点击次数越多,速度会越来越快

## 九.跳转页面 ##

// 第一个方式
    	<a href = "http://baidu.com">
    // 第二种方式
        window.location.href = 'http://baidu.com'
    // 第三种方式
    	window.history.go()   // 正数代表往前跳转一个页面 负数代表往后跳转一个页面
    	window.history.forward()    // 往前跳转一个页面
    	window.history.back()       // 往后跳转一个页面
    // 必须在同一个文件夹

## 十.三大家族 ##

// 第一个 : offset 位移.偏移
    	元素.offsetLeft    // 到父级元素左侧的距离 (很重要)
        元素.offsetTop     // 到父级元素顶部的距离 (很重要)
        元素.offsetWidth   // 获取元素的实际高度 (实际高度 = 内容+内边距+边框)
    	元素.offsetHeight  // 获取元素的实际宽度
    // 第二个 : client 客户
    	元素.clientWidth    // 获取元素的内容宽度 (内容宽度 = 边框以内的东西 内边距+内容)
    	元素.clientHeight   // 获取元素的内容高度
    	元素.clientLeft     // 元素左边边框的大小
    	元素.clientTop      // 元素顶部边框的大小
    // 第三个 : scroll 滚动
    	元素.scrollTop      // 获取元素垂直滚动超出的的距离 (很重要)
    	元素.scrollLeft     // 获取元素水平滚动超出的距离 
    	元素.scrollWidth    // 可滚动的宽度 == 盒子的实际宽度
    	元素.scrollHeight   // 可滚动的高度 == 盒子的实际高度

## 十一.拖拽 ##

1.  拖拽的本质就是 鼠标按下去加 移动
2.  注意点:
    
    1.  拖拽的元素需要定位,鼠标按下先获取到 鼠标到盒子的宽高 = e.pageX - 元素.offsetLeft
    2.  在鼠标按下里面添加鼠标移动事件, 获取拖拽盒子到文本的距离.
    3.  元素margin一定要清零
    4.  鼠标移开清除移动事件
    5.  一定要定位才会有top和left值

模态框:大盒子里面还有内容.可以再创建一个盒子跟父元素宽高一样,然后内容跟这个做兄弟元素