【前端学习】 DOM进阶

最新推荐文章于 2024-07-11 17:37:13 发布

s-fox

最新推荐文章于 2024-07-11 17:37:13 发布

阅读量127

点赞数 1

分类专栏：前端学习之路文章标签：前端

本文链接：https://blog.csdn.net/qq_38930905/article/details/80297042

版权

前端学习之路专栏收录该内容

4 篇文章 0 订阅

订阅专栏

获取动态DOM中的属性值

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

设置HTML属性操作方法
getAttribute() 获取元素的某个属性值 obj.getAttribute("attr")
setAttribute() 设置 obj.setAttribute("attr",值）
removeAttribute() 删除
hasAttribute() 判断属性

CSS属性操作
getComputedStyle(obj).attr 获取CSS属性值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#box{
				width: 100px;
				height: 100px;
				background-color: hotpink;
			}
		</style>
		<script>
			window.οnlοad=function()
			{
			var oBtn=document.getElementById("btn");
			var oBox=document.getElementById("box");
			oBtn.οnclick=function()
			{
				alert(getComputedStyle(oBox).backgroundColor);
			};
			}
		</script>
	</head>
	<body>
		<input id="btn" type="button" value="获取颜色" />
		<div id="box"></div>
	</body>
</html>

设置CSS属性值两种方法 style对象和csisText()方法
obj.style.attr="值”
obj.style.cssText="值” 同时设置多个值

DOM遍历

查找父元素
```
obj.parentNode
```
查找子元素 childNode firstChild lastChild children firstElementChild lastElementChild
查找兄弟元素 previousSibling nextSibling previousElementSibling和nextElementSibling

innerHTML和innerText

innerHTML方便获取和设置一个元素的内部元素
innerText获取和设置一个元素的内部文本

s-fox

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端学习】 DOM进阶

获取动态DOM中的属性值&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script&gt; window.onload = function(){ var oBtn=documen
复制链接

扫一扫