【Javascript】getElementById 和 getElementByClassName()[0] 的使用方法

<!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></head><body> <h1>getElementByID测试</h1> <div id="did1" class="dc1">第一个div测试，本内容存在于div</div> <button id="btnid1" class="btnc1">按钮1控制第一个div</button> <button class="btnc2">按钮2使用ByClassName[0]第二次控制第一个div</button> <script> var div1=document.getElementById('did1'); var bt1=document.getElementById('btnid1'); var bt2=document.getElementsByClassName('btnc2')[0]; bt1.onclick=function(){ div1.innerHTML='点击了按钮，更改了文字内容'; } bt2.onclick=function(){ div1.innerHTML="点击了第二个按钮，更改了div标签内的文字内容，<br>特别需要注意我们是这样使用的：<br>getElementsByClassName('btnc2')[0];<br>重要知识：ByClass选中的是一个集合，哪怕只有一个元素他也是一个集合，必须得跟下标指向集合内的特定标签才能工作！"; } </script></body></html>