javascript学习笔记dom-获取元素，事件，操作元素

最新推荐文章于 2023-02-23 15:39:43 发布

火星土豆饼

最新推荐文章于 2023-02-23 15:39:43 发布

阅读量168

点赞数

本文链接：https://blog.csdn.net/weixin_43412366/article/details/104800705

版权

DOM简介

DOM：文档对象模型

获取元素

console.dir() 打印返回的元素对象查看里面的属性和方法

根据ID获取

document.getElementById();

根据标签名获取
getElementsByTagName()方法可以返回带有指定标签的对象的集合,以伪数组的形式存储
根据标签名获取
element(父元素).getElementsByTagName(‘标签名’);
注意：父元素必须是单个对象，获取是不包括父元素
根据类名获取（html5新增）

document.getElementsByClassName()；

HTML5新增的方法获取

 document.querySelector('选择器')；//根据指定选择器返回第一个元素对象
 document.querySelectorAll('选择器');//根据指定选择器返回所有的元素对象

获取body和html元素

doucument.body();//获取body元素
doucument.documentElement();//获取html元素

事件基础

事件由三部分组成：事件源，事件类型，事件处理程序
（1）事件源：事件被触发的对象
（2）事件类型：如何触发什么事件比如鼠标点击，经过
（3）事件处理程序通过一个函数赋值的方式

执行事件的步骤
1.获取事件源
2.注册事件（绑定事件）
3.添加事件处理程序（采取函数赋值形式）
常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

操作元素

改变元素内容

从起始位置到终止位置的内容，去除html标签，同时空格和换行也会换掉
element.innerText
从起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行
element.innerHTML
innerText和innerHTML区别

<body>
	<div></div>
	<script>
		var div = document.querySelector('div');
		div.innerText = '<strong>今天</strong>2020';
		// <strong>今天</strong>2020
		div.innerHTML = '<strong>今天</strong>2020';
		//今天2020
	</script>
</body>

总结：
innerText不识别html标签非标准去除空格和换行
innerHTML识别html标签标准保留空格的换行
这两个属性可读写
元素属性操作
element.attribute
样式属性操作
1.element.style 行内式操作（样式少）
2.element.className 类名样式操作（样式多）
注意：element.style里面的属性，采取驼峰命名法
修改style样式操作，产生的是行内样式，css权重比较高
className 会直接更改元素的类名，会覆盖原先的类名

自定义属性的操作

获取属性值
element.属性
element.getAttribute(‘属性’)
区别：
element.属性获取内置属性值（属性本身自带的属性）
element.getAttribue(‘属性’) 主要获得自定义的属性
自定义属性的操作
设置属性值
element.属性 = ‘值’
element.setAttribute(‘属性’,‘值’)
移除属性
element.removeAttribute(‘属性’)
自定义属性的目的:是为了保存并使用的数据，有些数据可以保存到页面而不用保持到数据库
H5规定自定义属性data开头作为属性名并且赋值
H5新增element.dataset.index 或者element.dataest[‘index’] ie11以上支持

火星土豆饼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript学习笔记dom-获取元素，事件，操作元素

DOM简介DOM：文档对象模型获取元素console.dir() 打印返回的元素对象查看里面的属性和方法根据ID获取document.getElementById();根据标签名获取getElementsByTagName()方法可以返回带有指定标签的对象的集合,以伪数组的形式存储根据标签名获取element(父元素).getElementsByTagName(‘标签...
复制链接

扫一扫