6.DOM对象

最新推荐文章于 2022-08-07 00:10:48 发布

算前言，总轻负

最新推荐文章于 2022-08-07 00:10:48 发布

阅读量163

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/qq_36549593/article/details/102858848

版权

Web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.获取Dom对象的方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<body>
		<div id="show">这个是一个div</div>
		
		<ul>
			<li class="active">这个是一个列表1</li>
			<li class="active">这个是一个列表2</li>
			<li class="active">这个是一个列表3</li>
			<li class="active" name="liujianhong">这个是一个列表4</li>
			<li class="active">这个是一个列表5</li>
			<li class="active">这个是一个列表6</li>
			<li class="active">这个是一个列表7</li>
			<li class="active">这个是一个列表8</li>
		</ul>
		
		<input type="text" name="username" id="username" value="" />
		
		
		<script type="text/javascript">
			// 1、直接使用id获取对象，虽然很简单
			// 但是这种写法对于程序员阅读理解有难度，不推荐使用
//			console.info(show);
			// 2、利用api getElementById('标签的id') (必须掌握)
			var show = document.getElementById("show");
			console.info(show)
//			show.innerHTML = "真帅！！";
			
			// 3、使用类名称来获取对应的标签 (必须掌握)
			var acs = document.getElementsByClassName("active");
			console.info(acs)
//			acs[0].innerHTML = "和哈";
			
			
			// 4、通过标签名称
			var divs = document.getElementsByTagName("div");
			console.info(divs)
			
			// 5、通过name属性来获取对象
			// 注意：该api主要用来获取表单对象
			var unames = document.getElementsByName("username");
			console.info(unames)
			
			
		</script>
	</body>
</html>

2.操作DOM对象

<div id="box">嘿嘿，这个是一个光荣的div标签<span>这个是span中的内容</span></div>
		
		
		<script type="text/javascript">
			var box = document.getElementById("box");
//			console.info(box)

			// innerHTML 获取DOM对象的子标签及文本内容

//			console.info(box.innerHTML)
//			box.innerHTML = "<b style='color: royalblue;'>大帅哥</b>"


			// 只获取文本内容，包括子标签的文本内容，但是
			// 注意：不要去子标签本身
//			console.info(box.innerText);
//			box.innerText = "大帅哥"
//			box.innerText = "<b style='color: royalblue;'>大帅哥</b>"
			box.textContent = "<b style='color: royalblue;'>大帅哥</b>";
			
			
		</script>

3.操作DOM对象的属性

	<body>
		<div id="show"  title="这个是一个标题">这个是一个div</div>
		<script type="text/javascript">
			var show = document.getElementById("show");
			// 1、面向对象的方式
//			show.title = "新的标题";
//			show.style.color = "red";
			
			// 2、数组的方式
//			show['title'] = "新的标题";
			
			// 3、JavaScript提供的专门用来操作属性的API
//			alert(show.getAttribute("title"));
//			show.setAttribute("title", "这个是一个新的值1");

			// 注意：class属性的操作的时候使用的className这个属性。
			show.className = "a";
			
		</script>
	</body>

4.操作DOM对象的样式

	<body>
		<div id="show" class="show" style="height: 50px;"></div>
		
		<div id="box" class="box" onclick="run()"></div>
		
		<script>
//			var div = document.getElementById("show");
//			
//			// DOM对象.style.样式名称只能拿到标签样式
//			var h = show.style.height;
			console.info(h)
			console.info(typeof(h))
//
//			var w = show.style.width;
//			console.info(w)
//			
//			// 使用getComputedStyle才能拿到任意的样式值
//			let w2 = getComputedStyle(div).width;
//			console.info(w2)
			
			
			function run() {
				var box = document.getElementById("box");
//				var h = getComputedStyle(box).height;
//				var w = getComputedStyle(box).width;
//				
//				// 去掉单位
//				h = parseInt(h);
//				w = parseInt(w);
//				box.style.width = h + 10 + "px";
//				box.style.height = w + 10 + "px";

				// JavaScript专门提供用来操作宽和高的api，获取是没有单位的数值
				var h = box.offsetHeight;
				var w = box.clientWidth;
				
				box.style.width = h + 10 + "px";
				box.style.height = w + 10 + "px";
				
			}
			
		</script>
	</body>

算前言，总轻负

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6.DOM对象

1.获取Dom对象的方式<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="show">这个是一个div</div>...
复制链接

扫一扫