JavaScript之Dom选择器

最新推荐文章于 2022-10-23 16:18:34 发布

c-Tomorrow

最新推荐文章于 2022-10-23 16:18:34 发布

阅读量476

点赞数 3

分类专栏： JavaScript JavaScript学习之路文章标签： JavaScript Dom选择器 Dom选择器的使用方法

本文链接：https://blog.csdn.net/c__dreamer/article/details/79337696

版权

JavaScript 同时被 2 个专栏收录

52 篇文章 1 订阅

订阅专栏

JavaScript学习之路

50 篇文章 6 订阅

订阅专栏

Dom

Dom即Document Object Model （文档对象模型），Dom定义了表示和修改文档所需的方法。DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和xml功能的一类对象的集合，也有人称DOM是对html以及xml的表追编程接口。

JavaScript进入Dom阶段是JS通过一些方法来增删改查html文档。

Dom选择器

Dom选择器有许多种，主要是基于JS对Html查结构。

ID选择器

通过进行查找html文档中的ID选中。（注：IE8以下的浏览器，不区分大小写，也可以访问name名）。

<!DOCTYPE html>
<html>
<head>
	<title>Dom</title>
</head>
<body>
	<div id = "only">
</body>
<script type="text/javascript">
var div = document.getElementById('only');
console.log(div);
</script>
</html>

标签名选择器

用标签名选择器查找的是html文档里的标签，所得到的是类数组形式。（一切由系统生成组的基本上全是类数组）。

<!DOCTYPE html>
<html>
<head>
	<title>Dom</title>
</head>
<body>
	<div id = "only">
	<div></div>
	<div></div>
</body>
<script type="text/javascript">
var div = document.getElementsByTagName('div');
console.log(div);
</script>
</html>

name选择器

所有有name属性的标签都可以，老版本只有部分name标签可以生效（表单，表单元素，img，iframe），生成的也是一组数。

<!DOCTYPE html>
<html>
<head>
	<title>Dom</title>
</head>
<body>
<input type="" name="myName">
</body>
<script type="text/javascript">
var input = document.getElementsByName('myName');
console.log(input);
</script>
</html>

类选择器

通过查找标签的class属性查到，IE8及IE8以下的IE版本都没有。查到的也是类数组。

<!DOCTYPE html>
<html>
<head>
	<title>Dom</title>
</head>
<body>
<div class = "demo"></div>
</body>
<script type="text/javascript">
var div = document.getElementsByClassName('demo');
console.log(div);
</script>
</html>

css选择器

通过标签的层级来选择，特别方便，但是缺点很大：唯一的缺点就是不是实时性，是静态的。就是如果你选出来一个元素，如果你下次删除这个元素，在这个选择器上还是有。IE7及IE7以下都没有。

querySelector/querySelectorAll

<!DOCTYPE html>
<html>
<head>
	<title>Dom</title>
</head>
<body>
<div>
	<span>
		<strong></strong>
	</span>
</div>
</body>
<script type="text/javascript">
var strong = document.querySelector('div > span > strong');
console.log(strong);
var strong1 = document.querySelectorAll('div > span > strong'); // 选出一组。
console.log(strong1);
</script>
</html>

在运用Dom选择器的时候灵活运用，避免各个选择器的缺点。

JavaScript语言我个人感觉是最有意思的了，我也是一个初学者，遇到问题，喜欢在博客上分享，也希望能帮到大家。

一个初学者，有什么不足或者纰漏的话，希望在下面评论出来，相互学习，共同进步。

--主页传送门--