測試代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>document中存在相同id</title>
<style>
#demo{
color:red;
}
</style>
</head>
<body>
<p id="demo">單擊按鈕來改變這一段中的文本。</p>
<div id="demo">單擊按鈕來改變這一段中的文本。</div>
<p id="demo">單擊按鈕來改變這一段中的文本。</p>
<button onclick="myFunction()">點我</button>
<script>
function myFunction(){
document.getElementById("demo").innerHTML=document.getElementById("demo");
//document.querySelector("#demo").innerHTML=document.querySelector("#demo");
//document.querySelector("#demo").innerHTML=document.querySelectorAll("#demo");
};
</script>
</body>
</html>
運行結果
定義
id是元素的屬性，大小寫敏感的字符串，在整個document中應該是唯一的。
ID選擇器
ID選擇器，包括CSS選擇器和JS選擇器，當ID不唯一時，通過代碼測試和文檔，可以得出如下結論：
- 對於CSS選擇器，ID選擇器對應的所有元素都會受到影響；
- 對於JS選擇器，
document.querySelector()和document.getElementById()都只會返回第一個查找到的Element，如果沒有則返回null。如果你想要得到所有的相同id屬性的Element可以使用document.querySelectorAll()。