JS 之找对象

最新推荐文章于 2022-07-16 19:27:12 发布

Xiao_Tommy

最新推荐文章于 2022-07-16 19:27:12 发布

阅读量1.3k

点赞数

分类专栏： IT--前端

本文链接：https://blog.csdn.net/xiao_tommy/article/details/53183650

版权

IT--前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

初学JS 时一直不明白什么document.getElementById 之类的。后来学习了xml之后才渐渐明白了节点的意思。这里做一下简单的回顾。其实也就是一些最最基本的知识点了。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>

<body>
	<h1>找对象</h1>
	<div id="test1">
		<p>p1</p>
		<p>p2</p>
		<p>p3</p>
	</div>
	<div class="test2">class test2</div>
	<input type="text" name="username" id="" value="poly">
</body>

<script>
	//找对象

	//通过ID寻找，返回类型是对象
	alert(document.getElementById('test1'));
	
	//通过标签寻找,返回值是“对象的集合”，即使是一个对象，也会包装成集合
	alert(document.getElementsByTagName('p'));
	
	//表单元素，可以用name查询,返回的是对象的集合.类型为数组
	alert(document.getElementsByName('username')[0].value);
	
	//类名查找
	document.getElementsByClassName('test2')[0].style.background = 'red';

	//通过子节点
	alert(document.getElementById('test1').childNodes.length); //显示7 包含空白节点
	alert(document.getElementById('test1').children.length); //显示3  不包含空白节点 非标准文本，但是兼容性很好

	操作对象
	<img src="" alt="" title="" style="width:100px; height:100px;"/>

</script>

</html>

Xiao_Tommy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 之找对象

初学JS 时一直不明白什么document.getElementById 之类的。后来学习了xml之后才渐渐明白了节点的意思。这里做一下简单的回顾。其实也就是一些最最基本的知识点了。 Document 找对象 p1 p2 p3 class test2 //找对象 //通过ID寻找，返回类型是对象 alert(document.g
复制链接

扫一扫