奋斗30天Javascript之getElement* 和 querySelector*（Part14）_element.queryselector: ''name'='content-优快云博客

本文详细介绍了JavaScript中的DOM操作方法，包括getElementsByClassName(), getElementsByName(), getElementsByTagName()，以及动态集合querySelecotr*的使用。通过实例解析了这些方法的工作原理和注意事项，强调了在使用过程中保持元素唯一性的重要性。" 77369436,6872010,在个人电脑上安装GPAW：Python科学计算软件,"['python', '软件', '科学计算', '安装教程', 'GPAW']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

跟著大漠先生學習《DOM系列：getElement* 和 querySelector*》一文：

原文: https://www.w3cplus.com/javascript/searching-elements-dom.html © w3cplus.com

跟著大漠先生學習的筆記和自己總結的一些東西。

今天來講getElement*和querySelector*:

getElementById()
getElementsByClassName()
getElementsByTagName()
getElementsByName()
document.querySelector()
document.querySelectorAll()

* getElementById()

在HTML文档中，元素的id是唯一的，也就是说，一个页面只有唯一的id名，这个id就是一个全局变量（如果应用到JavaScript中的话）。

語法：

element.getElementById(id)

栗子一：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="demo">单击按钮来改变这一段中的文本。</p>

<script>
	document.getElementById("demo").innerHTML="Hello World";
</script>
</body>
</html>

結果為：

需要注意的是，id是唯一的，按规范的原则性来说，id也必须是唯一的。言外之意，文档中只有一个元素与给定的id相匹配。如果当文档中有多个具有相同id的元素时，那么相应的方法document.getElementById()获取的元素行为是不可预测的。浏览器可能会随机返回任何一个。所以，我们在使用的时候，必须保持id的独特性，唯一性。

document.getElementById()只能在document对象上调用，它在整个文档中查找给定的id。