JavaScript——DOM之操作元素

最新推荐文章于 2022-08-02 10:33:57 发布

sanma鱼

最新推荐文章于 2022-08-02 10:33:57 发布

阅读量680

点赞数

本文链接：https://blog.csdn.net/weixin_46558137/article/details/107927477

版权

本文介绍了JavaScript中操作DOM元素的方法，包括通过ID、标签名、类名获取元素，以及事件基础如事件三要素和常见鼠标事件。还详细讲解了如何改变元素内容、修改属性、样式和自定义属性，以及应用实例，如更换背景图片、表格隔行变色和表单全选、取消全选功能。

摘要由CSDN通过智能技术生成

一、如何获取元素

1、根据ID获取-getElementById

我们会用到 getElementById 来进行获取元素：
语法：var element = document.getElementById(id);

<body>
<div id="time">2020.8.11</div>
<script>
//因为我们的文档页面是从上往下加载，所以先得有标签，然后将script写到标签下面
//get ：获得，element：元素，by：通过
//参数id是大小写敏感的字符串
//返回的是一个元素对象
var timer = document.getElementById('time');
//console.dir，打印我们返回的元素对象
console.dir(timer);
</script>

</body>

2、根据标签名获取-getElementsByTagName

我们是用的getElementsByTagName来获取的；
语法：var element = document.getElementsTagName(‘字符’)

<script>
//返回的是获取过来元素对象的集合，以伪数组的形式储存
var element = document.getElementsByTagName('字符')
//我们想要依次打印里面对象，我们可以采用遍历的方式
for(var i=0;i<element.length;i++){
   
console.log(element[i]);
}
</script>

注意：1、如果页面中只有一个标签，返回的还是伪数组的形式
2、如果页面中没有这个元素，返回的是空的伪数组的形式

3、根据类名获取-getElementsByClassName

getElementsByClassName 来获取某些元素的集合
语法:var element=document.getElementsByClassName(‘类名’)；

<body>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
	<ul>
		<li>首页</li>
		<li>产品</li>
	</ul>
</div>
<script>
// 1. getElementsByClassName 根据类名获得某些元素集
var boxs = document . getElementsByClassName( 'box' ) ;
console . log(boxs);
// 2. querySelector 返回指定选择器的第一个元素对象,切记 里面的选择器要加符号
var firstBox = document . querySelector(' .box' );
console . log(firstBox);
var nav = document . querySelector( ' #nav' );
console .1og(nav);
var li = document . querySelector( ' li' );
console . log(1i);
// 3. querySelectorA11( )返回指定选择器的所有元素对象集
var al1Box = document . querySelectorAll(' . box' );
console .1og(al1Box);
var lis = document . querySelectorAl1('li' );
console.1og(lis);

</script>
</body>

// 2. querySelector 返回指定选择器的第一个元素对象,切记里面的选择器要加符号
// 3. querySelectorAll( )返回指定选择器的所有元素对象集

4、获取特殊元素

<body>
<script>
// 1.获取body元素
var bodyEle = document . body;
console . log(bodyEle);
console .dir (bodyEle);
// 2.获取html元素
// var htmlEle = document. html ; 错误！
var htmlEle = document . documentElement ;
console . log(htmlEle);
</script>
</body>

二、事件基础

1、事件三要素

三要素是：
事件源：事件被触发的对象，谁，比如按钮；
事件类型：如何触发，什么事件
事件处理程序：通过一个函数赋值的方式，完成

2、常见的鼠标事件

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

3、执行事件过程

<script>
//执行事件步骤
//点击div控制台输出我被选中了
// 1.获取事件源
var div = document . querySelector( 'div' );
// 2.绑定事件注册事件
// div. onclick 
// 3.添加事件处理程序
div. onclick = function() {
   
console.1og('我被选中了');

</script>

执行事件步骤：

点击div控制台输出我被选中了
1.获取事件源
var div = document . querySelector( ‘div’ );
2.绑定事件注册事件
div. onclick
3.添加事件处理程序
div. onclipk = function() {
console.1og(‘我被选中了’);

三、操作元素

1、改变元素内容

a、 element. innerText
从起始位置到终止位置的内容,但它去除html标签，同时空格和换行也会去掉

b、 element. innerHTML
起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行

<body>
		<button id="tim">
			显示当前时间
		</button >
		<p>123</p>
		<script >
			//1、获取元素
			var tim = document.querySelector("button");
			var show = document.querySelector('p');
			//2、注册事件
			tim.onclick = function(){
   
				show.innerText = getDate();
				tim.innerHTML = getDate() ;
			}
			function getDate(){
   
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth()+1 ;
				var dates = date.getDate() ;
				var arr = ['星期日','星期一','星期二','星期三','星期四',&