操作DOM
本文对DOM节点操作的介绍，希望对您有所帮助
一. 获取元素
非常规
html document.documentElement
设置根节点font-size时可能用到
head document.head
body document.body
常规
id document.getElementById()
class document.getElementsByClassName()
伪数组 像数组但不具备数组函数 有length值
可以转化 var ans = Array.from(…)
标签 document.getElementsByTagName()
name document.getElementsByName()
querySelector
document.querySelector() 参数为在css中使用选择的方法
只会返回遇到的第一个
querySelectorAll
可以选出所有
二.操作元素属性
自定义属性
约定 data-**
.dataset 可以获取 也可以在这上面加
删除用delete * .dataset. *
增 改
setAttribute()
删
removeAtrribute()
获取
getAttribute()
操作元素内容
innerHtml
会解析
innerText
不解析html 获取的只有文本
value
操作样式
获取
行内 .style.###
例如 background-color —–>
用中括号括起来.style[ ] / 驼峰规则 .style.backgroundColor
内部样式 外部样式
getComputedStyle(参数为对象(id / get函数获取)) 获取不能赋值写样式
批量操作
- .className 操作dom的类名 修改的话是覆盖原来的
可以使用 += 重复的也会直接加进去
- .classList
- 增加 add 重复的不会加进去
- 删除 remove
- 切换 toggle 有就删掉 没有就加
三. DOM节点
元素节点 getElementBy..
childNodes 所有节点 children 所有元素
nodeType 属性返回节点类型。
如果节点是一个元素节点，nodeType 属性返回 1。
如果节点是属性节点, nodeType 属性返回 2。
如果节点是一个文本节点，nodeType 属性返回 3。
如果节点是一个注释节点，nodeType 属性返回 8。
nodeName
nodeValue 属性节点的叫属性值 文本节点是文本内容 元素节点没有值
firstChild firstElementChild
lastChild lastElementChild
previousSibling previousElementSibling 找哥哥
nextSibling nextElementSibling 找弟弟
parentNode parentElement 差不多
属性节点 getAttribute
id.attributes[1]
文本节点 innerText
四. 操作DOM节点
节点操作
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17//创建节点
var odiv = document.createElement("div")
//box 为父节点id
//插入节点
box.appendChild(odiv)
// insertBefore(要插入的节点，谁的前面) 可以实现在任何地方插入
//删除节点
// removeChild(节点对象)
box.removeChild()
box.remove() // 自我销毁以及后代
//替换节点 replaceChild(新的节点，老的节点)
//克隆
//cloneNode() 默认参数为false 不包括孩子
五. 获取元素信息
懒加载
获取元素的占地面积
offsetWidth/offsetHeight content+padding+border
注意：单位 数字类型
display:none 无法拿到值
clientWidth/clientHeight content+padding 不包括border
获取元素偏移量
offsetLeft/offsetTop
注意：偏移量是相对有定位的父级
如果父级元素都没有定位，偏移量相对于body
clientLeft/clientTop 了解即可
计算的是距离自己左上角(也就是边框宽)
获取可视窗口的尺寸
window.innerHeight / innerWidth 获取的包含滚动条
document.documentElement.clientWidth / clientHeight 不包含滚动条
六. 事件
绑定事件
- .onclick = …
- .addElementListener(“click”,function(){…})
解绑事件
- this.onclick = none
- .removeElementListener(“onclick”,….[函数名字])
事件类型
鼠标事件
click
dbclick 双击
contextmenu 右键单击 常用于自定义右键菜单
mousedown 鼠标按下
mousemove 鼠标在身上移动
mouseup 鼠标抬起
移入移出
mouseover mouseout
在孩子上也会触发
mouseenter mouseleave
只会在自己上触发
键盘事件
- keydown 按下键盘
- keyup 抬起键盘
表单事件
获取焦点 focus
失去焦点 blur
change 获取焦点和失去焦点时内容不一样才会触发
input 适用于类似百度搜索 边输入边模糊查询
submit 提交 reset 重置
必须要有form表单结构
两者都得给form绑
触摸事件 针对移动端
- touchstart
- touchmove
- touchend
事件对象
2
3username.onkeyup = function(event){
//事件对象也就是形参
}鼠标事件
event.clientX / clientY 距离可视窗口的值
event.pageX / pageY 相对于文档的
event.offsetX / offsetY 相对于自己盒子(触发元素)的左上角的距离
做鼠标跟随时有可能会误触到别的盒子可以设置pointer-events = none
阻止事件传播
stopPropagation()
阻止默认行为 例如 鼠标右键
dom0 return false
dom2 preventDefault()
事件委托
利用冒泡机制
把子元素的事件委托给父元素来做
七. 正则表达式
格式
2
3
4//字面量
var reg = /abc/ //包含abc 这个串
//内置构造函数
var reg2 = new RegExp("abc")元字符
一位数字 /\d/
一位非数字 /\D/
一位空白(空格 缩进 换行) /\s/
一位非空白 /\S/
字母数字下划线 /\w/
一位非字母数字下划线 /\W/
/./ 任意符号 不包括换行
转义字符 .
边界符
^ 开始
/^\d/ 开头必须是数字
$ 结尾
/\d$/ 结尾必须是数字
限定符
只能修饰紧挨的一个
- *代表0-多次
- +代表1-多次
- ？代表0-1
- {n} 指定次数
- {n,} 大于等于n
特殊符号
- ( ) 括起来表示一个整体
- | 或者 管的是两边的两个整体
- [ ]代表一个 例：[abcdf] 代表一个出现就行
- [^abc] 不包含abc范围内
捕获
全局标识符 g 全局 克服懒惰 i 不区分大小写
reg.exec(“”)
贪婪特性 加？克服
/\d{1,4}/ 选择时会尽量多选 加？之后只选择最小值