[JavaScript]了解Dom中_byid元素节点属性

最新推荐文章于 2022-08-10 22:36:52 发布

初露微微

最新推荐文章于 2022-08-10 22:36:52 发布

阅读量863

点赞数

分类专栏： Javascript 文章标签： javascript js html

本文链接：https://blog.csdn.net/wy1948/article/details/119561976

版权

Javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

生活明朗，万物可爱？

1、 document.getElementById(id)用法

1、 document.getElementById(id);
[作用] 通过当前元素节点的id，获取对应的元素节点

2、元素节点属性

通过这个节点对象，访问它的一系列属性。
tagName 获取元素节点的标签名
innerHTML 获取元素节点标签中的内容，解析标签

3、HTML中的属性和方法

id
title
style
className 对应的是class
访问这些节点的方法
元素节点.属性名
或者
元素节点（属性名）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>dom_byid元素</title>
		<script type="text/javascript">
			/* 
			 document.getElementById(id);
			 [作用] 通过当前元素节点的id，获取对应的元素节点。
			 
             元素节点属性
			 通过这个节点对象，访问它的一系列属性。
			 tagName 获取元素节点的标签名
			 innerHTML 获取元素节点标签中的内容，解析标签
			 
			 HTML属性的属性
			 id
			 title
			 style
			 className 对应的是class
			 
			 访问这些节点
			 元素节点.属性名
			 或者
			 元素节点（属性名）
			 
			 */
		/* 	var oDiv1=document.getElementById("Div1");
			alert(oDiv1);//运行结果为null，原因为代码自上而下运行，因此我们运行这部分的内容并没有加载
			 解决办法：直接将整个script标签放入body中(语法规范，一般放入head中)
			 或者用window.onload
			 */
			window.onload=function(){/* 在页面加载完成以后的函数 */
				var oDiv1=document.getElementById("Div1");
					// alert(oDiv1.tagName); 获取标签名
					// alert(oDiv1.innerHTML);/* 获取标签中的内容 */
					// oDiv1.innerHTML="<h1>测试</h1>";/* innerHTML赋值时如果含有标签会直接解析 */
					// alert(oDiv1.id);
					// alert(oDiv1.title);
					// alert(oDiv1.className); 这三个为取值操作
					/* oDiv1.title="tt";
					oDiv1.className="obt"; */
					// alert(oDiv1.style);//(object MStyeCSSPropries css样式
					// alert(oDiv1.style.width);
				/* 	oDiv1.style.width="400px"; */
				
				/* 
				 在style样式中，background-color属性需要去掉-，然后再将单个单词color的首字母大写
				 */
                 // alert(oDiv1.style.backgroundColor);输出red;
				 oDiv1.style.backgroundColor="yellow";
			}
			
		</script>
	</head>
	<body>
		<div id="Div1" title="helloworld" class="box" style="width: 300px;height: 300px; background-color: red;"><en>测试div</en></div>
	</body>
</html>

初露微微

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
[JavaScript]了解Dom中_byid元素节点属性

生活明朗，万物可爱？1、 document.getElementById(id)用法1、 document.getElementById(id);[作用] 通过当前元素节点的id，获取对应的元素节点 2、元素节点属性通过这个节点对象，访问它的一系列属性。tagName 获取元素节点的标签名innerHTML 获取元素节点标签中的内容，解析标签 3、HTML中的属性和方法idtitlestyleclassName 对应的是class访问这些节点的方法元素.
复制链接

扫一扫