JavaScript获取元素的方式

最新推荐文章于 2024-07-26 20:46:33 发布

一个想做架构师的前端开发学生

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量395

点赞数 2

分类专栏： JavaScript基础知识文章标签： javascript html5 前端 css

本文链接：https://blog.csdn.net/m_ik_z/article/details/117083770

版权

JavaScript基础知识专栏收录该内容

10 篇文章 0 订阅

订阅专栏

获取元素的三种基本方式

一、通过id名称获取元素:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
<body>
	<p>这是一段话。</p>
	<script>
		var p1 = document.getElementById('p1')	// 获取文档。
		p1.style.color = 'blue'	// 设置文档颜色为蓝色。
	</script>
</body>
</html>
// 输出结果是：蓝色字体的“这是一段话。”

二、通过标签名称获取元素:

<h1>标题1</h1>
<h1>标题2</h1>
<h1>标题3</h1>
<h1>标题4</h1>

<script>
var h1s = document.getElementsByTagName('h1')
for(var i = 0;i<h1s.length;i++){
	h1s[i].style.fontSize = 24px	// 设置h1的字体大小为24px。
}
</script>

三、通过类别名称获取元素：

<p class="c1">这是一段话</p>
<h1 class="c1">这是一个标题<h1>
<h1>这是第二个标题</h1>
<h1 class="c1">这是第三个标题</h1>

<script>
var ph = document.getElementByClassName('c1')
for(var i =0;i<=c1.length;i++){
	c1[i].style.color = 'red'	// 使每一个c1的字体颜色变为红色。
}

// 输出结果是带有class值的字体颜色变为红色。
</script>

四、获取元素基本方式总结：

1.getElementById只能获取一个元素。
2.getElementsByTagName根据标签获取多个元素，并返回一个伪数组。及时获取的元素只有一个，也是以数组的形式储存。
3.style只能设置某一个元素的属性，但是getElementsByTagName返回的是一个数组，所以必须遍历这个数组才可以使用。（可以使用for循环遍历数组。）
4.通过JavaScript操作的css属性，与css不相同：

如果css属性是一个单词，写法保持不变。（如：color，width等）。
如果css属性是多个单词组合而成，则需要将第一个单词首字母小写，其他首字母大写，并去除连接符。（如：background-color，font-size等）。

五、 HTML5新增的获取元素方式：

1.在HTML5中，新增的获取元素方式是：querySelector和querySelectorAll。
2.querySelector只能获取符合条件的第一个元素，而querySelectorAll可以获取符合条件的所有元素。
3.这个方法可以通过id，类别名称和标签名称获取元素，在使用的时候要遵循以下规则：

id在前面加上 #
类别名称在前面加上 .
标签名称前面什么也不加

一个想做架构师的前端开发学生

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript获取元素的方式

获取元素的三种基本方式一、通过id名称获取元素:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫