JavaScript的DOM

最新推荐文章于 2024-02-01 22:05:42 发布

原创最新推荐文章于 2024-02-01 22:05:42 发布 · 248 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #dom操作 #dom #javascript

本文详细介绍了DOM的基本操作，包括创建和获取标签的方法、获取或添加内容的方式、节点属性的使用等。此外，还深入探讨了事件处理机制，如事件三要素、自定义属性设置及事件流的概念。

DOM

在这里插入图片描述

创建和获取标签

createElement()  //传入创建的标签名
getElementById()    //传入id名，返回一个标签
getElementByTagName(）  //传入标签名，返回类数组
getElementByName()	//传入name属性，返回节点列表
//以下三个都是IE8以上兼容
getElementByClassName()	//传入类名，返回类数组
querySelector()	//可以传入id名，类名，标签名，返回的是一个标签
querySelectorAll()	//返回的是一个NodeList数组
//获取body
document.body()
//获取HTML
document.documentElement()

获取或添加内容

innerHTML() //获取的是所有内容，包括标签
innerText() //获取的是所有文本内容

添加标签

appendChlid() //默认是添加到指定父级内最后
insertBefore(a,b) //默认传两个参数，第一个为添加的元素，第二个是添加到哪里

节点属性

childNodes 	//获取所有节点，包括文本节点
chirdren 	//获取所有子标签
firstNode 	//获取第一个子标签
lastNode	//获取最后一个子标签
parentsNode		//获取其父节点
previousSibling		//获取其前一个兄弟节点
nextSibling		//获取后一个兄弟节点
attributes 		//获取制定标签的所有属性节点
removeChild()  //删除节点
replaceChild()	//替换节点

事件三要素

事件源、事件类型、事件处理程序
在这里插入图片描述

自定义属性

getAttributes() //获取
setAttributes('属性'，'值') //设置、修改
removeAttributes()	//移除

H5自定义属性

H5一般在设置属性时都以 data- 开头；
在这里插入图片描述

三种创建元素方式区别

1、document.write('标签名')；
2、innerHTML；
3、createElement()；

在这里插入图片描述

注册事件

传统方式注册事件具有事件唯一性
W3C标准
事件侦听注册事件 addEventListenr(‘事件类型’，事件处理程序/侦听器) ie9以上
使用事件侦听可以注册多个事件；
在这里插入图片描述

删除事件

传统的绑定事件
让事件 = null 即可；

removeEventListener(‘事件类型’，事件处理函数)
这里的事件处理函数不能是匿名函数，所以我们在用addEventListener绑定时就可以先将事件处理函数写在外面。

DOM事件流

在这里插入图片描述

事件对象e.target与this的区别

this //是指向绑定事件的对象；
e.target //指向的是触发事件的对象；

常规方法

e.type  //查看事件类型
e.preventDefault() //阻止浏览器默认行为  普通浏览器
e.returnValue    //ie678
return false  // 这三种都可以朱志浏览器默认行为

阻止事件冒泡

在这里插入图片描述

事件委托（代理，委派）

在这里插入图片描述

常用的鼠标事件

在这里插入图片描述
禁止选中文本，取消selectStart的默认行为
鼠标右键菜单不显示，取消contextmenu的默认行为

鼠标事件对象

在这里插入图片描述

键盘对象事件

在这里插入图片描述
通过键盘对象的keyCode属性返回用户的按键