var li = document.getElementsByTagName('li');//標簽獲取元素
  li[0].innerHTML;// 查看獲取元素的內容
  l" />

JavaScript獲取頁面元素的常用方法詳解

 更新時間:2019-09-29 08:00:11   作者:佚名   我要評論(0)

1、通過標簽獲取元素,返回一個數組


  var li = document.getElementsByTagName('li');//標簽獲取元素
  li[0].innerHTML;// 查看獲取元素的內容
  l

1、通過標簽獲取元素,返回一個數組

  var li = document.getElementsByTagName('li');//標簽獲取元素
  li[0].innerHTML;// 查看獲取元素的內容
  li[0].innerHTML = "content";//修改獲取到標簽中的內容

2、通過id獲取頁面元素

  var header = document.getElementById("header");//id獲取元素

3、通過class名字獲取頁面元素

  var list = document.getElementsByClassName('list');//返回一個數組,通過下標訪問文本

4、通過CSS選擇符方式獲取頁面元素

  //querySelector:返回符合條件的第一個
  var str = document.querySelector('li');
  var str1 = document.querySelectorAll('li');//全部返回,每個li都是一個對象
<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>JavaScript獲取頁面的常用方法</title>
  <script>
      // 1、通過標簽獲取元素,返回一個數組
      var li = document.getElementsByTagName('li');
      
      //2、通過id獲取頁面元素
      var header = document.getElementById("header");

      // 3、通過class名字獲取頁面元素
      var list = document.getElementsByClassName('list');//返回一個數組,通過下標訪問文本

      // 4、通過CSS選擇符方式獲取頁面元素
      //querySelector:返回符合條件的第一個
      var str = document.querySelector('li');
      // querySelectorAll:返回符合條件的每一個
      var str1 = document.querySelectorAll('li');
  </script>
</head>
<body>
  <p id="header">JavaScript學習</p>
  <ul class="list">
    <li>HTML</li>
    <li>jQuery</li>
    <li>JavaScript</li>
  </ul>
  <ul class="list">
    <li>HTML</li>
    <li>jQuery</li>
    <li>JavaScript</li>
  </ul>
</body>
</html>

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

您可能感興趣的文章:

  • JS獲取動態添加元素的方法詳解
  • js jquery 獲取某一元素到瀏覽器頂端的距離實現方法
  • JS中獲取 DOM 元素的絕對位置實例詳解
  • AngularJS遍歷獲取數組元素的方法示例
  • JS獲取數組中出現次數最多及第二多元素的方法
  • 詳解angularjs獲取元素以及angular.element()用法
  • 詳解JS獲取HTML DOM元素的8種方法
  • js 獲取元素所有兄弟節點的實現方法

相關文章

最新評論

亿宝娱乐黑钱