DOM
2022-04-26 13:33:06 0 举报
DOM操作基础
作者其他创作
大纲/内容
文本（文档标题）
元素（title）
元素（head）
文本（我的链接）
元素（a）——属性（href）
文本（我的标题）
元素（h1）
元素（body）
根元素（html）
文档：一个页面就是一个文档，document表示
元素：页面中的所有标签，element表示
节点：所有内容（标签、属性、文本、注释），node表示
以上内容都看作对象
DOM树
根据 ID 获取：document.getElementById('ids');
根据标签获取：document.getElementsByTagName('li');
根据类名查找：document.getElementsByClassName('tage');
获取该元素的第一个对象：document.querySelector('li')；
获取该元素的所有对象：document.querySelectorAll('li')；
H5新增（常用）
body对象：document.body；
html对象：document.documentElement；
特殊元素获取<body><html>
获取元素
简单理解：触发——响应机制
事件源：事件触发的对象（按钮）：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.removeAttribute('属性')；
自定义属性命名规范：在开头添加 data- （data-index、data-list-name）
div.element.Attribute('data-index')
div.element.Attribute('data-list-name')
div.dataset.index；
div.dataset.listName；
div.dataset['index']；
div.dataset['listName']
自定义获取方法（H5新增）
获取自定义属性
元素节点：nodeType 为 1；
属性节点：nodeType 为 2；
文本节点：nodeType 为 3；
节点类型：nodeType
节点名称：nodeName
节点值：nodeValue
获取到元素节点的上一级父级（最近的父级）
lis.parentNode; // ul
父级节点：node.parentNode
获取所有子元素节点
ul.children
第一个：element.children[0]；
最后一个：element.children[element.children.length - 1]；
获取子节点中的第一个和最后一个
子级节点：node.children
1. 创建节点：var li = document.createElement('节点')；
2. 节点添加到父级：ul.appendChild( li )；
步骤
创建新节点：
节点操作
事件高级导读
1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段
JS代码中只能执行捕获或者冒泡其中的一个阶段
onclick 和 attachEvent 只能得到冒泡阶段
false：冒泡阶段（默认为false）
true：捕获阶段
注意：
DOM事件流过程
事件对象只有存在事件才会存在，系统自动创建，不用传参
事件对象是事件的一系列相关数据的集合（属性、方法）
可以自己拟定命名
事件对象
点击父级和子级，返回的都是调用对象
点击子/父级时，返回的是子/父级对象
在点击事件中存在父级和子级时
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）
常见的键盘事件
DOM
收藏
收藏
0 条评论
回复 删除
下一页
