JavaScript 温故而知新（八）DOM基础

最新推荐文章于 2024-01-07 15:29:21 发布
最新推荐文章于 2024-01-07 15:29:21 发布
阅读量258 收藏
点赞数
分类专栏： JS 基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AN_MEI/article/details/104547604
版权

文章目录

JavaScript的 DOM基础

DOM查找方法
document.getElementById(“id”)：

语法：document.getElementById(“id”)
功能：返回对拥有指定ID的第一个对象的引用
返回值：DOM对象
说明：id为DOM元素上id属性的值

	<body>
		<div id="box" class="box">元素</div>
		<script>
			//获取id为box的这个元素
			var box = document.getElementById("box");
			console.log(box);
			//输出 <div id="box" class="box">元素</div>
		</script>
	</body>
document.getElementsByTagName(“tag”)：

语法：document.getElementsByTagName(" tag ")
功能：返回一个对所有tag标签引用的集合
返回值：数组
说明：tag为要获取的标签名称

	<body>
		<ul id="list1">
			<li>前端开发</li>
			<li>服务器端开发</li>
			<li>UI设计</li>
		</ul>
		<ol>
			<li>js原生</li>
			<li>js框架</li>
		</ol>
		<script>
			//获取页面中所有的li
			var lis = document.getElementsByTagName("li");
			console.log(lis.length);
			//输出5,返回的是数组,表示5个li
			
			//获取id为list1下的所有的li
			var lis2 = document.getElementById("list1").getElementsByTagName("li")
			console.log(lis2.length);
			//输出长度3
		</script>
	</body>
设置元素样式
ele.style.styleName = styleValue

语法：ele.style.styleName = styleValue
功能：设置ele元素的CSS样式
说明：
1、ele为要设置样式的DOM对象
2、styleName为要设置的样式名称（不能使用" - "连字符形式 font-size 使用驼峰命名形式fontSize）
3、styleValue为设置的样式值

	<body>
		<div id="box" class="box">元素</div>
		<ul id="list">
			<li>前端开发</li>
			<li>服务器端开发</li>
			<li>UI设计</li>
		</ul>	
		<script>	
			//设置id为box的这个元素的文字颜色
			var box = document.getElementById("box");
			box.style.color = "#f00";
			//属性是减号链接的复合形式时,必须要转换为驼峰形式
			box.style.fontWeight = "bold";
			
			var lis = document.getElementById("list").getElementsByTagName("li");
			//因为getElementsByTagName返回的是数组
			//遍历每一个li
			for (var i=0,len=lis.length; i<len; i++){
				console.log(lis[i]);
				//输出lis[0],等于<li>前端开发</li>
				//输出lis[1],等于<li>服务器端开发</li>
				//输出lis[2],等于<li>UI设计</li>
				lis[i].style.color = "#00f";//设置为蓝色
				//设置li的背景颜色
				if(i == 0){
					lis[i].style.backgroundColor = "#ccc";
				}else if(i == 1){
					lis[i].style.backgroundColor = "#ff0";
				}else if(i == 2){
					lis[i].style.backgroundColor = "#0f0";
				}else{//其他
					lis[i].style.backgroundColor = "#333";
				}
			}
		<script>
	</body>
DOM(innerHTML和className)
innerHTML

1、语法：ele.innerHTML
1、功能：返回ele元素开始和结束标签之间的HTML

2、语法：ele.innerHTML = " html "
2、功能：设置ele元素开始和结束标签之间的 HTML内容为html

className

1、语法：ele.className
1、功能：返回ele元素的class属性

2、语法：ele.className=" cls "
2、功能：设置ele元素的class属性为cls

	<body>
		<div id="box" class="box">元素</div>
		<ul id="list">
			<li>前端开发</li>
			<li class="on">服务器端开发</li>
			<li>UI设计</li>
		</ul>
		<ol>
			<li>js原生</li>
			<li>js框架</li>
		</ol>
		<script>
			var lis = document.getElementById("list").getElementsByTagName("li");
			for(var i=0, len=lis.length; i<len; i++){
				console.log(lis[i].innerHTML);
				//输出li的HTML,包括li里的标签和文本
					//<i>前端开发</i>
					//<b>服务器端开发</b>
					//UI设计
				lis[i].innerHTML = lis[i].innerHTML + '程序';
				//简写：lis[i].innerHTML += '程序';
				//输出每个li文本后面都加上程序两个字
					//前端开发程序
					//服务器端开发程序
					//UI设计程序
				
				//添加类current
				lis[1].className = "current";
				//说明：li本身有class="on",className动态添加class,是重新设置类，会替换元素本身的class
			}
			console.log(document.getElementById("box").className);
			//输出box
		</script>
	</body>
DOM属性获取与设置、删除
获取属性、自定义属性的getAttribute()
	<body>
		<p id="text" class="text" align="center" data-type="title">文本</p>
		<input id="user" type="text" name="user" value="user" validate="true">
		<script>
			var p = document.getElementById("text");
			//除了获取class属性是className,其他是直接是html标签属性
			console.log(p.className);
			//输出text
			console.log(p.align);
			//输出center
			//data-type是自定义属性,所以console.log(p.data-type)获取不了
			console.log(p.getAttribute("data-type"));
			//输出title
			console.log(p.getAttribute("class"));
			//等于p.className
			
			var user = document.getElementById("user");
			//获取input自带的标签属性
			console.log(user.type);//输出text
			console.log(user.name);//输出user
			console.log(user.value);//输出user
			//获取input自定义属性
			console.log(user.getAttribute("validate"));//输出true
		</script>
	</body>
设置属性 ele.setAttribute(“attribute”,“value”)

语法：ele.setAttribute(“attribute”,“value”)
功能：在ele元素上设置属性
说明：
1、ele是要操作的dom对象
2、attribute为要设置的属性名称
3、value为设置的attribute属性的值
注意：
1、setAttribute方法必须要有两个参数
2、如果value是字符串，需加引号
3、setAttribute()有兼容性问题

删除属性 ele.removeAttribute(“attribute”)

语法：ele.removeAttribute(“attribute”)
功能：删除ele上的attribute属性
说明：
1、ele是要操作的dom对象
2、attribute为要删除的属性名称

	<body>
		<p id="text" class="text" align="center" data-type="title">文本</p>
		<input id="user" type="text" name="user" value="user" validate="true">
		<script>
			var p = document.getElementById("text");
			var user = document.getElementById("user");
			//给p设置一个自定义属性data-color的属性
			p.setAttribute("data-color","red");
			//给input设置一个isRead的属性
			user.setAttribute("isRead","false");
			//删除p上的align属性
			p.removeAttribute("align");
		</script>
	</body>
<李小狮 / >
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【温故而知新】JavaScript数据类型
日常笔记/总结/系列知识梳理
01-02 1035
原始类型：字符串（String）：用于表示文本数据，使用引号（单引号或双引号）括起来。数字（Number）：用于表示数值，包括整数和浮点数。布尔值（Boolean）：用于表示真或假。null：表示一个空值。undefined：表示一个未定义的值。Symbol：表示一个独一无二的值（ES6新加入的数据类型）。引用类型：对象（Object）：用于表示复杂的数据结构，可以包含多个键值对。数组（Array）：是对象的一种特殊形式，用于存储多个值。
【温故而知新】JavaScript的DOM操作.md
06-13
【温故而知新】JavaScript的DOM操作
JavaScript学习笔记(第七章—DOM)
qq_45585500的博客
09-27 732
JavaScript学习笔记(第七章—DOM) 1、DOM对象简介 1.1 什么事DOM对象 DOM(Document Object Model 文档对象模型)可以完成HTML和XML文档的操作，在JavaScript中利用DOM操作HTML和CSS样式是最常用的样式之一。DOM对JavaScript是一种可操作HTML文档得重要手段。利用DOM可完成对HTML文档内所有元素的获取、访问、标签属...
JS获取div里面的其它元素的两种方法
m0_63689815的博客
12-16 7042
通过JS的DOM获取div里面的其它元素的两种方法 getElementsByTagName 和 querySelector ，具体使用方法如下
【温故而知新】JavaScript的DOM操作
日常笔记/总结/系列知识梳理
01-03 513
DOM（Document Object Model）是JavaScript中的一个重要概念，它是一种编程接口，使得开发人员可以使用HTML和XML文档。它将文档解析为一个由节点和对象组成的结构，允许开发人员添加、移除和修改页面的某一部分。DOM提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。在JavaScript中，DOM是用来获得和操作HTML文档的节点属性。JavaScript通常是通过DOM来获得和操作HTML属性的。
JavaScript 温故而知新（九）DOM事件
李小狮
03-06 212
文章目录JavaScript的 DOM事件事件绑定***Html事件*** JavaScript的 DOM事件 事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。 事件绑定 Html事件 直接在HTML元素标签内添加事件，执行脚本 语法：< tag 事件 = " 执行脚本 " > < / tag > 功能：在HTML元素上绑定事件 说明：执行脚本可以是一个函数的调用 ...
JavaScript 温故而知新（一）语法
李小狮
10-20 247
JavaScript温故而知新（一） 最近挺到一句话本人小狮觉得很有道理："把js学好才是硬道理！不要老是想着学各种框架，框架的本身都离不开JavaScript。"所以就好好的温故而知新吧~ javaScript的组成 完整的javaScript是由ECMAScript(语法)+Browser Objects(DOM、BOM)（特性）组成的。 ECMAScript(语法) ，是核心语言的功能； ...
【温故而知新】JavaScript的Document对象
日常笔记/总结/系列知识梳理
01-05 1666
Document对象是JavaScript中代表整个HTML或XML文档的根节点。它是浏览器中内置的一个对象，可以通过document关键字来访问。Document对象提供了许多属性和方法，用于操作和访问文档中的元素、样式、事件等。通过Document对象，我们可以动态地修改和操作HTML或XML文档的内容、结构和样式，使得网页可以根据用户的交互行为进行动态更新和改变。
【温故而知新】JavaScript的事件模型
日常笔记/总结/系列知识梳理
01-07 977
JavaScript的事件模型是一种用于处理用户交互和其他事件的机制。事件模型基于事件驱动编程的概念，即在特定条件下触发相应的事件处理程序。通过使用事件模型，可以为用户交互和浏览器事件编写响应代码，增强网页的交互性和功能性。
JavaScript学习笔记（温故而知新）
qq_64510496的博客
07-14 137
JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
【温故而知新】JavaScript作用域.md
06-13
【温故而知新】JavaScript作用域
【温故而知新】JavaScript数据类型.md
06-13
【温故而知新】JavaScript数据类型
【温故而知新】JavaScript事件循环.md
06-13
【温故而知新】JavaScript事件循环
【温故而知新】JavaScript的事件模型.md
06-13
【温故而知新】JavaScript的事件模型
计算机网络实验三：UDP协议探索和分析
最新发布
08-24
【实验目的】 1、掌握UDP协议数据格式； 2、掌握UDP首部各字段含义； 3、了解网卡offload技术； 4、熟悉Linux下nc命令的使用方法。
基于springboot和vue的 一站式家装服务管理系统 源码 （优秀毕业设计源码）
08-24
1. 一站式家装服务管理系统 代码说明：经导师指导并认可通过的98分毕设项目代码。 2.适用对象：本代码学习资料适用于计算机、电子信息工程、数学等专业正在做毕设的学生，需要项目实战练习的学习者，也适用于课程设计、期末大作业。 3.技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 4. 作者介绍：大厂码农，java领域创作者，阿里云开发社区乘风者计划专家博主，专注于大学生项目实战开发，文章底部有博主联系方式，更多优质系统、项目定制请私信。 5. 最新计算机软件毕业设计选题大全: https://blog.csdn.net/weixin_45630258/article/details/135901374
Linux教程-磁盘相关-分区-文件系统-挂载-软连接硬连接.zip
08-24
涵盖了Linux系统管理的核心概念和技能。包含加密文件的知识点，逐步深入到磁盘分区的基础知识（分为两部分详细讲解），进而探讨文件系统和挂载的原理。教程还包括对挂载信息的详细解读，以及磁盘空间耗尽的两种常见情况分析。此外，重点讲解了软连接和硬链接的区别，并提供了额外的补充材料以加深理解。适合Linux初学者和系统管理员提升对文件系统管理、磁盘空间优化和链接应用的实战能力。
java源码资源一个支持servlet的web服务器
08-24
java源码资源一个支持servlet的web服务器提取方式是百度网盘分享地址
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值