JavaScript DOM操作之:元素属性基础

最新推荐文章于 2023-08-04 08:50:09 发布
最新推荐文章于 2023-08-04 08:50:09 发布
阅读量574 收藏 1
点赞数
分类专栏： 前端学习 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Morbidmuse/article/details/122022696
版权 
HTML属性操作
	使用javascript来操作一个元素的HTML属性
	两种方式:
		对象属性
		对象方法
	两种结果:
		获取HTML属性
		设置HTML属性
		
	获取属性值
		obj.attr 
		
	设置HTML属性值
	obj.attr = "值"
	
	属性操作(对象方法):
		getAttribute()
			获取某个属性的值
			// obj.getAttribute("attr") 其中attr参数必须用引号引起来
			等价于obj.attr
			既可以获取静态html元素的属性值,也可以获取动态DOM的属性值
			和obj.attr的区别:
				getAttribute()可以获取自定义的属性
		setAttribute()
			设置某个属性的值
			obj.setAttribute("attr","值")
			等价于obj.attr="值"
			设置自定义属性同样只能使用obj.setAttribute("attr","值")
		removeAttribute()
			移除某个属性
			obj.removeAttribute("attr")
			要移除某个属性就只能使用这种方式
			大多数时候是通过移动属性结合class属性来整体控制元素的样式的
		hasAttribute()
			判断是否有某个属性
			obj.hasAttribute('attr')
			返回布尔值
			严谨的做法是先判断元素是否存在某个属性,然后才能删除

01获取静态html的属性值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				// 要获取属性,先要找到元素节点
				var oBtn = document.getElementById('btn');
				oBtn.onclick=function(){
					alert(oBtn.id);
					console.log(oBtn.className);
				}
			}
		</script>
	</head>
	<body>
		<input type="button" id='btn' class='mybtn' value='获取' />
	</body>
</html>

02获取动态DOM的属性值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//动态创建一个DOM,然后获取其属性
			window.onload=function(){
				var oInput = document.createElement('input');
				oInput.id = 'submit';
				oInput.type = 'button';
				oInput.value = '提交';
				document.body.appendChild(oInput);
				oInput.onclick=function(){
					alert(oInput.id)
				}
			}
		</script>
	</head>
	<body>
	</body>
</html>

03获取文本框的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var oBtn=document.getElementById('btn');
				oBtn.onclick=function(){
					var oTxt=document.getElementById('txt');
					alert(oTxt.value);
				};
			}
		</script>
	</head>
	<body>
	<input type="text" name="" id="txt" />
	<input type="button" id='btn' value = '获取' />
	</body>
</html>

 04获取单选框的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var oBtn = document.getElementById('btn');
				console.log(oBtn.type);
				var oFruit=document.getElementsByName('fruit');
				console.log(oFruit[0].value);
				oBtn.onclick=function(){
					//遍历所有单选框
					for (var i;i<oFruit.length;i++){
						if (oFruit[i].checked){
							alert(oFruit[i].value)
						}
					}
				}
			}
		</script>
	</head>
	<body>
		<div class="">
			<label><input type="radio" name="fruit" id="" value="苹果" />苹果</label>
			<label><input type="radio" name="fruit" id="" value="香蕉" />香蕉</label>
			<label><input type="radio" name="fruit" id="" value="桃子" />桃子</label>
			<label><input type="radio" name="fruit" id="" value="樱桃" checked />樱桃</label>
		</div>
		<input type="button" name="" id="btn" value="获取" />
	</body>
</html>

 05获取复选框的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var oBtn=document.getElementById("btn");
				var oFruit = document.getElementsByName('fruit');
				var str = "";
				oBtn.onclick=function(){
					for (var i=0;i<oFruit.length;i++){
						if (oFruit[i].checked){
							str+=oFruit[i].value;
						}
					}
					alert(str);
				};
			}
		</script>
	</head>
	<body>
		<div >
			<label><input type="checkbox" name="fruit" id="" value="苹果" />苹果</label>
			<label><input type="checkbox" name="fruit" id="" value="香蕉" />香蕉</label>
			<label><input type="checkbox" name="fruit" id="" value="西瓜" />西瓜</label>
			<div id="">
				<input  id = 'btn' type="button" value="获取"/>
				
			</div>
			
			
			
		</div>
	</body>
</html>

 06获取下拉菜单的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var oBtn=document.getElementById("btn");
				var oSelect = document.getElementById("select");
				oBtn.onclick=function(){
					alert(oSelect.value);
				};
			}
		</script>
	</head>
	<body>
		<select id="select">
			<option value="成都">成都</option>
			<option value="康定">康定</option>
			<option value="南充">南充</option>
			<option value="遂宁">遂宁</option>
		</select>
		<input type="button" name="" id="btn" value="获取" />
	</body>
</html>

 07修改图片属性(图片切换的效果)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var oBtn=document.getElementById('btn');
				var oPic=document.getElementById('pic');
				var flag = true;
				oBtn.onclick=function(){
					if (flag){
						oPic.src='image/html.jpg';
						flag=false;
					}else{
						oPic.src='image/js.jpg';
						flag=true;
					}
				};
			}
		</script>
	</head>
	<body>
		<input type="button" name="" id="btn" value="切换" />
		<img src="image/html.jpg" id='pic'>
	</body>
</html>

 08获取自定义属性值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var oBtn=document.getElementById('btn');
				oBtn.onclick=function(){
					// alert(oBtn.data) 得到的值是"undefined"
					// 因为data属性是自定义的,不是元素固有的,所以只能使用getAttribute()方法获取
					alert(oBtn.getAttribute("data"))
				}
			}
		</script>
	</head>
	<body>
		<input type="button" name="" id="btn" value="获取" data="javascript"/>
	</body>
</html>

 09移除属性方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.main{
				color:red;
				font-weight: bold;
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				var oP=document.getElementsByTagName('p');
				var oBtnAdd=document.getElementById('btn_add');
				var oBtnRemove=document.getElementById('btn_remove');
				// 添加class属性
				oBtnAdd.onclick=function(){
					oP[0].setAttribute('class','main');
				};
				oBtnRemove.onclick=function(){
					oP[0].removeAttribute('class');
				}
				
			}
		</script>
	</head>
	<body>
		<p class="main">我自横刀向天笑</p>
		<p class="main">去留肝胆两昆仑</p>
		<p class="main">躲进小楼成一统</p>
		<input type="button" name="" id="btn_add" value="添加" />
		<input type="button" name="" id="btn_remove" value="移除" />
	</body>
</html>

从入门到入土.

Morbidmuse
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript学习笔记（第三章DOM--获取元素属性值）
dairuyu19971011的博客
10-12 821
javascript学习笔记（第三章DOM–获取元素属性值） 在上一节中我们大致总结了获取元素的三种方法，分别为：getElementById,getElementsByTagName,getElementsByClass,其中getElementById获取的是一个特定的元素，getElementsByTagName和getElementsByClass获取的是一系列特定对象组成的数组。这一点我...
JavaScript学习笔记之DOM基础操作实例小结
10-17
通过以上的实例演示，我们可以了解到JavaScript中对DOM元素进行操作的基本方法和技巧。这些基础操作包括但不限于子节点的获取、元素节点的区分、子元素的样式设置以及父节点的获取。掌握了这些基础操作，可以为后续...
JS操作DOM元素属性和方法
日々精進
10-17 396
参照
JavaScript操作元素属性
msdn_make的博客
10-16 94
JavaScript嵌入页面的方式 1、行间事件（主要用于事件） <input type="button" name="" onclick="alert('ok！');"> 2、页面script标签嵌入 <script type="text/javascript"> alert('ok！'); </script>...
JavaScript 操作元素属性
weixin_34221332的博客
01-03 302
1.获取元素方法之一 可以使用内置对象document上的getElementByld方法来获取页面上设置了id属性的元素，获取到的是一个HTML对象，然后将它赋值给一个变量 <div id="div1">hahahah</div><script type="text/javascript"> var odiv = document.getElementBy...
JavaScript操作元素属性方式的辨析
qq_61716556的博客
05-23 240
目录 读取属性 写入属性 移除属性 检测属性是否存在 getAttributeNS JavaScript操作元素属性具有很多方式。这里主要辨析Element.属性名与Element.getAttribute()这两类方式的区别。 读取属性 Element.属性名：这个方法可以读取title，id，className等，注意属性名要按照javascript的格式来。特例：类名是className。 Element.getAttribute()：这个方法同样是读取属性，但是略有不同。.
JavaScript操作DOM元素的childNodes和children区别
10-24
在JavaScript编程中，操作DOM（文档对象模型）是非常常见的任务，因为几乎所有的前端开发都需要通过DOM来与页面上的元素进行交互。DOM提供了丰富的API供我们操作网页上的各个元素。本文将重点讲解两个属性——...
JavaScript学习笔记之DOM操作实例分析
10-17
了解并熟练掌握DOM操作是JavaScript开发的基础，通过DOM，我们可以实现丰富的交互效果和动态更新页面。常用的DOM方法如`getElementById`、`getElementsByTagName`、`getElementsByClassName`、`getAttribute`和`...
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
10-20
JavaScript DOM 操作是Web开发中的核心技能之一，它允许开发者通过JavaScript与HTML页面进行交互，实现动态效果和用户交互。本篇文章将详细讲解如何利用DOM操作查找和修改HTML元素的内容及属性。 首先，理解DOM...
javascript DOM 操作.doc
01-15
javascript DOM 操作 javascript DOM 操作是指在客户端使用javascript语言来操作文档对象模型（Document Object Model，DOM），以便于动态地更改网页的内容和结构。下面是javascript DOM 操作的相关知识点： IE 中...
javascript学习之＜a＞ 元素相关属性及方法
最新发布
白话机器学习
08-04 294
a>元素用来设置链接。除了网页元素的通用接口（Node接口、Element接口、接口），它还继承了接口和接口。
71 DOM——HTML元素属性操作
Blog of Lytracy
11-15 1200
在DOM中，为了方便JavaScript获取、修改和遍历指定HTML元素的相关属性，提供了操作的属性和方法。 利用attributes属性可以获取一个HTML元素的所有属性，以及所有属性的个数length。 <div id="div1" value="2">123</div> //获取属性 console.log("我是改变前的id："+oDiv.getAttribute('id')) console.log("我是改变前的value："+oDiv.getAttribute('va
dom操作html,浅谈JavaScript中的DOM操作
weixin_33988332的博客
06-20 374
Document Object Model(文档对象模型)，提供操作文档的方法。每个html文件都视为一篇文档，操作文档实际围绕HTML标签进行。本文为大家介绍了JavaScript中的dom操作。1、理解DOM：DOM(Document Object Model ，文档对象模型)一种独立于语言，用于操作xml，html文档的应用编程接口。从两个角度理解：对于JavaScript，为了能够使Jav...
javascript DOM操作HTML文档
weixin_34233618的博客
01-08 158
文档对象模型（DOM）是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准。W3C将文档对象模型定义为：是一个能让程序和脚本动态 访问和更新文档内容、结构和样式的语言平台。提供了标准的HTML和XML对象集，并有一个标准接口来访问并操作他们，即任何一个 html 元素可以使用 JavaScript DOM 动态访问和控制。 1. DOM概述    文档对象模型定义了JavaSc...
JS中DOM文档对象模型操作实例
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
07-09 781
一、DOM DOM，全称Document Object Model文档对象模型。JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随 心所欲的操作WEB页面。 Document 文档 – 文档表示的就是整个的HTML网页文档 Object对象 – 对象表示将网页中的每一个部分都转换为了一个对象。 Model模型 – 使用模型来表示对象之间的关系，这样方便我...
JavaScript 操作 HTML DOM (文档对象模型) 相关知识点
u011280778的博客
07-05 269
HTML DOM 树 通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。 JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML 属性 JavaScript 能够改变页面中的所有 CSS 样式 JavaScript 能够对页面中的所有事件做出反应 查找 HTML 元素 通常，通...
JavaScript之DOM文档对象模型--对HTML元素的增删操作
diakuicu0780的博客
08-11 186
1、DOM创建节点的方法： document.createElement(Tag),Tag必须是合法的HTML元素；2、DOM复制节点的方法： 节点.cloneNode(boolean deep),当deep为true时，表示复制当前节点以及当前节点全部后代节点。为false时，只复制当前节点。3、DOM添加、删除节点的方法： appendChild(newNode):...
js常见的DOM操作
zxl1990_ok的博客
05-27 503
创建新节点： createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点 添加、移除、替换、插入 appendChild() removeChild() replaceChild() insertBefore() //在已有的子节点前插入一个新的子节...
JavaScript如何利用HTML DOM进行文档操作
li286487166的博客
03-27 806
一、DOM简介 DOM是W3C制定的用于访问诸如XML和XHTML等结构化文档的标准。 W3C文档对象模型(DOM)是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口 核心DOM：用于任何结构化文档的标准模型 XML DOM：用于XML文档的标准模型。是用于获取、更改、添加或删除XML元素的标准。 HTML DO
JavaScript动态DOM操作：创建元素与文本节点
在Web前端开发中，JavaScript提供了一种强大的能力，即动态创建和操作DOM（Document Object Model）元素。这使得网页内容可以在运行时被修改和更新，而非仅限于静态HTML。动态DOM操作通常用于响应用户交互或数据变化...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值