JavaScript 获取页面中的表标签元素

1.根据元素的 ID 获取页面中的元素

使用函数getElementByid()
ID是独一无二的所以可以通过这个方式来获取某个ID相应的标签

语法

var element = document.getElementById(id);

参数

• element是一个 Element 对象。如果当前文档中拥有特定ID的元素不存在则返回null.
• id是大小写敏感的字符串，代表了所要查找的元素的唯一ID.

返回值

返回一个匹配到 ID 的 DOM Element 对象。若在当前 Document 下没有找到，则返回 null。

示例

<div id = "time">2022-4-19</div>
<script>
    let timer = document.getElementById('time');//document表示文档 -->就是选取文档中id为time的标签
    console.log(timer);
    console.log(typeof timer);
    console.dir(timer);//打印出该对象的所有属性和属性值.
</script>

运行结果

可见返回的确实是一个object对象类型（因为typeof返回的是object）

2.根据标签名获取页面中的元素

使用函数getElementsByTagName()

语法

var elements = document.getElementsByTagName(name);

参数

• elements 是一个由发现的元素出现在树中的顺序构成的动态的HTML集合
• name 是一个代表元素的名称的字符串。特殊字符 “*” 代表了所有元素。

示例

<ul>
      <li>我是帅哥1</li>
      <li>我是帅哥2</li>
      <li>我是帅哥3</li>
      <li>我是帅哥4</li>
      <li>我是帅哥5</li>
    </ul>
    <script>
      let lis = document.getElementsByTagName('li');
      //返回的是 获取过来的元素对象的集合 以伪数组的形式存储
      console.log(lis); 
      console.log(lis[0]);
      //采用遍历的方式 依次打印出里面的元素的对象
      for (var i = 0; i < lis.length; i++)
      {
        console.log(lis[i]);
      }
   </script>

运行结果

特别的:当我们的页面中只存在0个或者1个li或者其他标签 返回的依然会是一个伪数组
分别是：[li] / [];

Another

我们还可以通过该函数获取某个元素（父元素）内部所指定标签名的子元素：
element.getElementsByTagName('标签名')
注意：父元素必须是单个对象（必须指明是哪一个元素对象）获取的时候不包括父元素自己

示例

<ul>
      <li>我是帅哥1</li>
      <li>我是大帅哥2</li>
    </ul>
    <script>
      let ul = document.getElementsByTagName('ul');//返回的是伪数组[ul];
      //所以我们使用ull[0]的方式表示第一个ul标签
      console.log(ul[0].getElementsByTagName('li'));
    </script>
      

除此之外我们还可以给ul一个ID来获取其标签再获取其中的元素(因为ID选择返回的是一个对象类型的

运行结果

3.根据HTML5的方法获取元素

1.根据类名返回元素对象集合:
var elements = document.getElementsByClassName(names);
2.根据选择器，返回指定选择器的第一个元素对象:
element = document.querySelector(selectors);
但是其中的的元素要加符号—>类（.box）|| ID(#nav) ||
3.升级版，根据选择器返回所有的元素
element= parentNode.querySelectorAll(names);

示例

<div class="b">大帅哥</div>
       <div class="b">超级无敌大帅哥</div>
       <div id="nav">
         <ul>
           <li>小帅哥</li>
           <li>帅哥</li>
         </ul>
       </div>
      <script>
        //1.getElementsByClassName() 根据类名获取某些元素集合
        let bs = document.getElementsByClassName('b');
        console.log(bs);
        //2.querySelector() 返回指定选择器的第一个元素对象
        let firstb = document.querySelector('.b');
        console.log(firstb);
        let nav = document.querySelector('#nav');
        console.log(nav);
        let li = document.querySelector('li');
        console.log(li);
        //3.querySelectorAll() 返回指定选择器的所有元素对象集合
        let allb = document.querySelectorAll('.b');
        console.log(allb);
        let lis = document.querySelectorAll('li');
        console.log(lis);
      </script>

运行结果（对照输出看）

4.特殊元素的标签获取方式

获取BODY元素
element = document.body

获取HTML元素
element = document.documentElement

以上就是所有的方法了，感谢你的阅读！！！