DOM
2022-04-26 13:33:06 0 举报DOM操作基础
作者其他创作
大纲/内容
DOM树
根元素（html）
元素（head）
元素（title）
文本（文档标题）
元素（body）
元素（a）——属性（href）
文本（我的链接）
元素（h1）
文本（我的标题）
文档：一个页面就是一个文档，document表示
元素：页面中的所有标签，element表示
节点：所有内容（标签、属性、文本、注释），node表示
以上内容都看作对象
获取元素
根据 ID 获取：document.getElementById('ids');
根据标签获取：document.getElementsByTagName('li');
根据类名查找：document.getElementsByClassName('tage');
H5新增（常用）
获取该元素的第一个对象：document.querySelector('li')；
获取该元素的所有对象：document.querySelectorAll('li')；
特殊元素获取<body><html>
body对象：document.body；
html对象：document.documentElement；
事件基础
简单理解：触发——响应机制
事件三要素：
事件源：事件触发的对象（按钮）：var btn = document.querySelector('button')；
事件类型：触发后执行的事件（鼠标点击、鼠标经过）：onclick
事件处理程序：通过一个函数赋值的方式完成：btn.onclick = function( ){ }
执行事件步骤
获取元素：var btn
注册事件：btn.onclick
添加事件处理程序：btn.onclick = function( ){ }
innerText与innerHTML
innerText：可以改变元素对象的内容，将标签只读不执行地打印出来（标签、换行、空格）
innerHTML：可以改变元素对象内容，将标签执行输出
修改元素属性
修改属性后，在行内样式中生成
element.style.~ = ' ';
获取自定义属性
原本获取属性方法：element.属性；
获取自定义属性方法：element.getAttribute('属性')； //attribute 属性
区别：
element.属性：用来获取内置属性（className、display）
element.getAttribute('属性')：用来获取开发者自定义的属性（index、err）
设置自定义属性：element.setAttribute('属性', '值')；
移除自定义属性：element.removeAttribute('属性')；
自定义属性命名规范：在开头添加 data- （data-index、data-list-name）
自定义获取方法（H5新增）
div.element.Attribute('data-index')
div.element.Attribute('data-list-name')
div.dataset.index；
div.dataset.listName；
div.dataset['index']；
div.dataset['listName']
节点操作
节点类型：nodeType
元素节点：nodeType 为 1；
属性节点：nodeType 为 2；
文本节点：nodeType 为 3；
节点名称：nodeName
节点值：nodeValue
父级节点：node.parentNode
获取到元素节点的上一级父级（最近的父级）
lis.parentNode; // ul
子级节点：node.children
获取所有子元素节点
ul.children
获取子节点中的第一个和最后一个
第一个：element.children[0]；
最后一个：element.children[element.children.length - 1]；
创建新节点：
步骤
1. 创建节点：var li = document.createElement('节点')；
2. 节点添加到父级：ul.appendChild( li )；
添加节点到指定元素前面的位置：node.insertBefore(’child‘, 指定元素)；
ul.insertBefore( li, ul.children[0] )；将 li 添加到ul第一个子节点前面
事件高级导读
事件监听：element.addEventListenner('事件【不加on】', fn( ) )
移除事件监听：element.removeEventListenner('事件【不加on】', fn( ) )
DOM事件流过程
1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段
注意：
JS代码中只能执行捕获或者冒泡其中的一个阶段
onclick 和 attachEvent 只能得到冒泡阶段
element.addEventListenner('事件【不加on】', fn( ) ，【布尔值】)
false：冒泡阶段（默认为false）
true：捕获阶段
事件对象
在 element.addEventListenner('click', function(event){ } ) 中 event 就是事件对象
事件对象只有存在事件才会存在，系统自动创建，不用传参
事件对象是事件的一系列相关数据的集合（属性、方法）
可以自己拟定命名
e.target 和 this 区别
在点击事件中存在父级和子级时
点击父级和子级，返回的都是调用对象
点击子/父级时，返回的是子/父级对象
阻止默认行为
事件对象.preventDefault( )；根据事件来阻止事件的默认行为
如：onclick事件默认阻止点击、oncontextmenu事件默认阻止右键菜单
阻止冒泡行为
事件对象.stopPropagation( )；
如：在父子级弹出框中，点击子级框可以阻止父级框弹出
事件委托
在 ul 和 li 结构之间为减少请求 ，利用 ul设置监听器， target 获取子节点来实现事件委托
在 ul 的 onclick 事件监听器里面 通过 事件对象.target来获取子节点，改变子节点样式
获取鼠标的坐标
1. client 鼠标在可视区的 x 和 y 坐标
2. page 鼠标在页面文档中的 x 和 y 坐标
3. screen 鼠标在电脑屏幕的 x 和 y 坐标
常见的键盘事件
onkeyup：按键弹起的时候触发
onkeydown：按键按下的时候触发
onkeypress：按键按下的时候触发（功能键无法触发，如enter、ctrl）
收藏
收藏
0 条评论
下一页
