注：（代碼非本人所原創，只用於學習參考）
目錄
1.使用id獲取元素
document.getElementById("id屬性的值");
2.使用name屬性的值獲取元素
document.getElementsByName("name屬性的值");
3.使用類樣式的名字獲取元素
document.getElementsByClassName("類樣式的名字");
4.使用標簽名字獲取元素
document.getElementsByTagName("標簽的名字");
5.使用選擇器獲取元素
document.querySelector("選擇器");
document.querySelectorAll("選擇器");
1.使用id獲取元素
document.getElementById("id屬性的值");
document.getElementById('id')方法，是由document對象提供的用於查找元素的方法，該方法
返回的是擁有指定id的元素，如果沒有找到指定id的元素則返回null，如果存在多個指定id的元素
則返回undefined。
<body> <div id="box">你好</div> <script> var Obox = document.getElementById('box'); console.log(Obox); </script> </body>
效果圖
2.使用name屬性的值獲取元素
document.getElementsByName("name屬性的值");
document.getElementsByName()方法，是通過name屬性來獲取元素，一般用於獲取表單元
素。name屬性的值不要求必須是唯一的，多個元素也可以有同樣的名字，如表單中的單選框和
復選框。
<body> <p>請選擇你最喜歡的水果（多選）</p> <label><input type="checkbox" name="fruit" value="蘋果">蘋果</label> <label><input type="checkbox" name="fruit" value="香蕉">香蕉</label> <label><input type="checkbox" name="fruit" value="西瓜">西瓜</label> <script> var fruits = document.getElementsByName( 'fruit'); </script> </body>
效果圖
3.使用類樣式的名字獲取元素
document.getElementsByClassName("類樣式的名字");
document.getElementsByClassName()方法，用於通過類名來獲得某些元素集合。
<body> <span class="one">英語</span> <span class="two">數學</span> <span class="one">語文</span> <span class="two">物理</span> <script> var Ospan1 = document.getElementsByClassName('one'); var Ospan2 = document.getElementsByClassName('two'); Ospan1[0].style.fontWeight = 'bold'; Ospan2[1].style.background = 'red'; </script> </body>
效果圖
4.使用標簽名字獲取元素
document.getElementsByTagName("標簽的名字");
getElementsByTagName()方法獲取到的集合是動態集合，也就
是說，當頁面增加了標簽，這個集合中也會自動增加元素。
<body> <input type="button" value="改變" id="btn"> <div> <p>123</p> <p>123</p> <p>123</p> </div> <script> document.getElementById("btn").onclick = function () { var pObjs = document.getElementsByTagName("p"); for (var i = 0; i < pObjs.length; i++) { pObjs[i].innerText = "p標簽"; } }; </script> </body>
5.使用選擇器獲取元素
document.querySelector("選擇器");
document.querySelectorAll("選擇器");
querySelector()和querySelectorAll()
querySelector()方法用於返回指定選擇器的第一個元素對象。querySelectorAll()方法返回指定
選擇器的所有元素對象集合。
<body> <div class="box">box1</div> <div class="box">box2</div> <div id="nav"> <ul> <li>首頁</li> <li>產品</li> </ul> </div> <script> var firstBox = document.querySelector('.box'); console.log( firstBox); var allBox = document.querySelectorAll('.box'); console.log(allBox); ('li'); console.log(lis); </script> </body>
效果圖
2021-05-12 17:40:23