JavaScript——DOM（1）

最新推荐文章于 2022-06-21 23:18:47 发布

「iuЯ」Weirdo

最新推荐文章于 2022-06-21 23:18:47 发布

阅读量106

点赞数

分类专栏： WEB

本文链接：https://blog.csdn.net/weixin_43398639/article/details/102984756

版权

WEB 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、认识DOM

DOM（Document Object Model）文档对象模型

首先我们需要知道它与其他标签或对象的关系

JavaScript中页面的所有标签都被DOM化，也就是说每一个标签就是一个对象，整个页面存在这个DOM树的继承关系。

二、如何操作DOM？

想要操作DOM需要先找到DOM对象，

1.查找DOM对象的几种方式

（1）直接获取（不推荐）

直接使用id获取对象，但这种写法阅读难度大，影响代码的阅读

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<body>
		<div id="show">这个是一个div</div>
		

		
		<script type="text/javascript">
			// 1、直接使用id获取对象，虽然很简单
			// 但是这种写法对于程序员阅读理解有难度，不推荐使用
		console.info(show);

			
		</script>
	</body>
</html>

（2）利用api getElementById('标签的id')

因为document本身就是一个对象，因此可以使用它其中的getElementById

返回一个div标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
    </head>
    <body>
        <div id="show">这个是一个div</div>

        <input type="text" name="username" id="username" value="" />
        
        
        <script type="text/javascript">

            // 2、利用api getElementById('标签的id') (必须掌握)
            var show = document.getElementById("show");
            console.info(show)
       show.innerHTML = "JS第一";

        </script>
    </body>
</html>

（3）使用类名称来获取对应的标签

var asc = document.getElmentsByClassName(" ")

返回一个类似数组的东西

如果想访问某一个（例如修改其中一个标签），acs[0].innerHTML=" "

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<body>
		
		<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>
		
		
		<script type="text/javascript">

			
			// 3、使用类名称来获取对应的标签 (必须掌握)
			var acs = document.getElementsByClassName("active");
			console.info(acs)
    		acs[0].innerHTML = "和哈";
			

			
		</script>
	</body>
</html>

（4）通过标签名称

document.getElmentsByTagName(" ")

返回一个列表

<!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>		
		
		<script type="text/javascript">

			
			// 4、通过标签名称
			var divs = document.getElementsByTagName("div");
			console.info(divs)
	
			
		</script>
	</body>
</html>

（5）通过name属性来获取对象

document.getElementsByName("username")

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<body>

		
		<input type="text" name="username" id="username" value="" />
		
		
		<script type="text/javascript">

			
			// 5、通过name属性来获取对象
			// 注意：该api主要用来获取表单对象
			var unames = document.getElementsByName("username");
			console.info(unames)
			
			
		</script>
	</body>
</html>