DOM查找（doucment object model）即对网页进行增删改查的操作--------API函数

最新推荐文章于 2024-08-05 22:43:05 发布

¡Venceremo

最新推荐文章于 2024-08-05 22:43:05 发布

阅读量130

点赞数

分类专栏： javascript 文章标签：前端

本文链接：https://blog.csdn.net/weixin_47295886/article/details/125905538

版权

javascript 专栏收录该内容

133 篇文章 0 订阅

订阅专栏

DOM定义：

W3C（万维网联盟）的标准是DOM，是中立于平台和语言的接口，允许程序和脚本动态的访问和更新文档的内容、结构、样式---------------------即对网页进行增删改查的操作

DOM操作：

查找节点
读取节点信息
修改节点信息
创建新节点
删除节点
...

按照id属性，精确查找一个元素对象

var elem=document.getElementById(’id‘)-----------效率非常高
getElementById前面的document是固定的
用于精确查找一个元素
不是所有元素都有id--如果要查找需要给id
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>首页</title>
</head>
<body>
	<ol id="list">
		<li>首页</li>
		<li>你好</li>
	</ol>

<script>
	var a =document.getElementById('list');
	console.log(a);
</script>
		
</body>
</html>

按照标签名查找

var elem=父元素.getElementByTagName(’tag‘)
getElementByTagName可以在任意父元素上
不仅查所有子节点，而且查找所有子代节点
返回一个动态集合，即使找到一个元素，也返回一个集合------------使用下标的调用
问题：查了不仅是直接而且是所有子代范围广----------
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>首页</title>
</head>
<body>
	<ul id="list">
		<li>首页</li>
		<li>你好</li>
	</ul>

<script type="text/javascript">
	var a =	document.getElementById('list');
	var b = a.getElementsByTagName("li");
	console.log(b);
</script>
		
</body>
</html>

按照name属性名查找

var elem=document.getElementByName(’name属性值‘)

返回DOM树中指定name属性值的所有子元素的集合

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>首页</title>
</head>
<body>
	<ul id="list">
		<li>首页</li>
		<li name="boy">你好</li>
		<li name="boy">不是</li>
	</ul>

<script type="text/javascript">

	var b = document.getElementsByName("name");
	console.log(b);
</script>
		
</body>
</html>

按照class查找

var elem=父节点.getElementByClassName(’class属性值‘)

查找父元素下指定的class属性的元素
有兼容性问题

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>首页</title>
</head>
<body>
	<ul id="list">
		<li>首页</li>
		<li name="boy" class="title">你好</li>
		<li name="boy" class="title">不是</li>
	</ul>

<script type="text/javascript">
	var a =	document.getElementById('list'); //a是父元素ul
	var b = a.getElementsByClassName("title");
	console.log(b);
</script>
		
</body>
</html>

通过CSS选择器查找：

元素选择器、类选择器、ID选择器、后代选择器、子代选择器、群组选择器

var elem=父节点.querySelector(’selector‘)

强调;selector支持一切CSS选择器

如果选择器匹配有多个，那就只返回第一个

找多个：var elem=父节点.querySelectorAll(’selector‘)

强调：此API函数返回的是非动态集合