JavaScript-DOM操作
DOM是W3C标准,DOM定义了访问HTML和XML文档标准
DOM(Document Object Models)W3C文档对象模型中立平台和语言的接口,它允许程序和脚本动态访问和更新文档,结构和样式
DOM分为三个部分
核心 DOM 针对任何结构化文档标准模型
XML DOM 针对XML文档标准模型,定义了所有XML元素对象和属性,已经访问它们的方法。
HTML DOM 针对HTML文档标准模型,定义了所有HTML元素对象和属性,已经访问它们的方法
DOM节点
根据W3C的HTML DOM标准,HTML文档中的所有内容都是节点(Node)
- 整个文档是一个文档节点(document对象) #整个HTML文档
- HTML元素都是元素节点(element对象) #相当于标签
- HTML元素内的文本是文本节点(text对象) #相当于文本
- HTML元素中属性都是属性节点(attribute对象) #相当于标签属性
- HTML文档中注释是注释节点(comment对象)
DOM |
---|
节点属性
节点自身的属性
attributes
指定节点的属性集合
nodeType
以数字值返回指定节点的节点类型,如果是1则是元素节点,如果是2则是属性节点
nodeValue
根据节点类型设置或返回节点值
nodeName
节点是元素nodeName返回标签,节点是属性nodeName返回属性
innerHTML
节点元素文本值
导航属性
parentNode
节点元素
firstChild
节点下第一个元素
lastChild
节点下最后一个元素
childNode
节点(元素)子节点常用导航属性
parentElement
父节点标签属性
children
所有子节点标签
firstElementChild
第一个子标签元素
lastElementChild
最后一个子标签元素
nextElementSibling
下一个兄弟标签元素
previousElementSibling
上一个兄弟标签元素
节点彼此层级关系
父
,子
,兄弟
等属于描述这些关系
父节点(parent)
拥有子节点(child)
,同级子节点统称为兄弟节点(sibling)
在节点数中,顶端节点称为
根(root)
,也就是<html></html>
节点每个节点都有父节点,除了
根节点
一个节点可拥有任意数量的
子节点
兄弟节点
是拥有相同父节点的节点
DOM操作
元素查询
getElementById()
查询ID属性,返回对拥有指定ID第一个对象的引用
getElementsByTagName()
查询标签属性,返回带有指定标签名的对象集合,返回所有元素列表
getElementByClassName()
查询class属性,返回文档中所有指定类名的元素集合
getElementsByName()
查询name属性,返回带有指定名称的对象集合
查询示例
1 | <body> |
局部查询
局部查找不支持
getElementById()
和getElementsByName()
但是
getElementsByTagName()
和getElementsByClassName()
支持
示例
1 | <body> |
事件
DOM Event事件
HTML4.0的特性之一是由能力使HTML事件触发游览器中的Action动作
比如:当用户点击某个HTML元素时触发一段JavaScript
Event对象代表事件状态,比如时间在其中发送的元素、键盘按钮、鼠标位置、鼠标按钮等状态
Event通常和函数结合使用,函数不会发送在事件发送前被执行!
Event对象在时间发生时系统以及创建好,并且会在事件函数被调用时传给事件函数,只需要接受下即可
如:onkeydown,我们想知道那个按键被按下,需要通过event对象的属性,这里就是keycode
事件属性
onclick
点击某个对象时调用的句柄
ondblclick
双击某个对象时调用的句柄
onfocus
元素获得焦点(通常用于点击输入框后效果)
onblur
元素失去焦点(用于表单验证,当用户离开某个输入框,代表完成输入,可以对他验证)
onchange
域的内容被改变(用于表单元素,当元素内容被改变时触发(三级联动))
onkeydown
键盘按下(用户在最后输入框后,按回车时,表单提交)
onkeypress
键盘按下并松开
onkeyup
键盘松开
onload
页面/图片完成后加载
onmousedown
鼠标按钮被按下
onmousemove
鼠标移动
onmouseout
鼠标离开元素
onmouseover
鼠标在某元素之上
onmouseleave
鼠标离开被选元素
onselect
文本被选中
onsubmit
确认按钮被提交
事件传播
通过
event.stopPropagation()
方法阻止事件传播
事件绑定
1 | 实例1 |
示例
1 | <body> |
onsubmit
实例
1 | <body> |
事件传播示例
1 | 想象下,有一个大div盒子,里面有一个小div盒子,如何使小盒子不受大盒子影响 |
元素操作
所有操作都是先要找到元素,然后在进行操作
增
需要先创建元素,在将元素添加到指定位置。
createElement(name)
创建name元素
appendChild()
将元素添加
1 | <head> |
删
在删除元素前,需要获取所要删除的元素
removeChild()
删除元素
1 | <head> |
改
修改HTML内容方法
innerHTML
如果内部有html标签,会显示html标签,也会被渲染
innerText
如果内部有html标签,直接显示html标签,不会渲染
1 | <head> |
修改CSS样式
找到标签后,直接设置样式即可
1 | <body> |
修改HTML属性
先找到标签,在修改属性
setAttribute(name,value)
getAttribute(name)
==>elementNode.value(DHTML)
查看属性也可以增加class名称属性
className
classList.add
1 | <head> |
常见实例
正反选
1 | <div> |
两级联动
1 |
|