getElementBy....（获取元素）

素心如月桠

已于 2022-09-12 14:12:33 修改

阅读量4.7k

点赞数 2

文章标签： javascript 前端 html

于 2021-05-02 17:59:37 首次发布

本文链接：https://blog.csdn.net/m0_47010003/article/details/116355043

版权

html 同时被 3 个专栏收录

43 篇文章 11 订阅

订阅专栏

vscode

35 篇文章 2 订阅

订阅专栏

JavaScript

34 篇文章 3 订阅

订阅专栏

一、getElementById


	<div id="time">
		2021-5-2
	</div>

	
	<script>


		var timer = document.getElementById('time');
		console.log(timer);//得到id为time的div
		console.dir(timer);	// 通过dir获取timer对象的属性和方法
		console.log(typeof timer);// timer类型的object
	</script>

在这里插入图片描述

二、getElementByTagName

<body>
	<!-- ul>li{知否知否，应是绿肥红瘦$}*5 -->
	<ul>
		<li>知否知否，应是绿肥红瘦1</li>
		<li>知否知否，应是绿肥红瘦2</li>
		<li>知否知否，应是绿肥红瘦3</li>
		<li>知否知否，应是绿肥红瘦4</li>
		<li>知否知否，应是绿肥红瘦5</li>
	</ul>

	<script>
		//返回的是 获取过来运算对象的集合 以伪数组的形式存储的
		var l=document.getElementsByTagName('li');
		console.log(l);//输出为数组：    HTMLCollection(5) [li, li, li, li, li]
		console.log(l[0]);//获取  l数组  的  0位置  的元素
		for(var i=0;i<l.length;i++){
			console.log(l[i]);
		}
	</script>
</body>

在这里插入图片描述

<body>
	<!-- ul>li{知否知否，应是绿肥红瘦$}*5 -->
	<ul>
		<li>知否知否，应是绿肥红瘦1</li>
		<li>知否知否，应是绿肥红瘦2</li>
		<li>知否知否，应是绿肥红瘦3</li>
		<li>知否知否，应是绿肥红瘦4</li>
		<li>知否知否，应是绿肥红瘦5</li>
	</ul>
	<ol>
		<li>生僻字1</li>
		<li>生僻字2</li>
		<li>生僻字3</li>
		<li>生僻字4</li>
		<li>生僻字5</li>
	</ol>
	<script>
		// 1. 返回的是 获取过来运算对象的集合 以伪数组的形式存储的
		var l = document.getElementsByTagName('li');
		console.log(l);//输出为数组：    HTMLCollection(5) [li, li, li, li, li]
		console.log(l[0]);//2.获取  l数组  的  0位置  的元素
		for (var i = 0; i < l.length; i++) {
			console.log(l[i]);
		}
		// 3. 如果页面中只有一个li 返回的has伪数组的形式
		// 4. 如果页面中没有这个元素 返回的是空的伪数组的形式
		// element.getElementsByTagName('标签名')
		var ol = document.getElementsByTagName('ol');
		console.log(ol[0].getElementsByTagName('li'));
		var ol = document.getElementById('ol');
	</script>
</body>

在这里插入图片描述

三、getElementByClassName


<body>
	<div class="box">盒子1</div>
	<div class="box">盒子2</div>
	<div id="nav">
		<ul>
			<li>首页</li>
			<li>产品</li>
		</ul>
	</div>
	<script>
		var na=document.getElementsByClassName('box');
		console.log(na);
	</script>
</body>

在这里插入图片描述

四、querySelector 返回指定选择器的第一个元素对象

在这里插入图片描述

五、获取body和html标签

<body>
	
	<script>
		// 1. 获取body 元素
		var b=document.body;
		console.log(b);
		console.dir(b);
		// 2. 获取html元素
		// var h = document.html 是错误的
		var h = document.documentElement;
		console.log(h);
	</script>
</body>

素心如月桠

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
getElementBy....（获取元素）

一、getElementById <div id="time"> 2021-5-2 </div> <script> var timer = document.getElementById('time'); console.log(timer);//得到id为time的div console.dir(timer); // 通过dir获取timer对象的属性和方法 console.log(typeof timer);// timer类型的
复制链接

扫一扫