JavaScript获取DOM对象常用方法

简介: JavaScript获取DOM对象常用方法

获取DOM对象的常用方法有如下几种:


getElementById() 通过元素的ID属性获取DOM对象,获取的是一个DOM对象。


getElementsByTagName() 通过元素的标签名获取DOM对象,获取的是一组DOM对象。


getElementsByClassName() 通过元素的class属性获取DOM对象,获取的是一组DOM对象。


getElementsByName() 通过元素的name属性获取DOM对象,获取的是一组DOM对象。


样例代码:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <p id="one">这是一个p标签</p>
    <p class="first">这是一个p标签</p>
    <p class="first" id="two">这是一个p标签</p>
    <p name="username">这是一个p标签</p>
    <p name="username">这是一个p标签</p>
    <script>
        let oneObj = document.getElementById('one'); // 通过Id获取
        oneObj.style.color = 'red';     //只有第一个p标签字体变红色
      let twoObj = document.getElementById('two'); // 通过Id获取
      twoObj.style.color = 'blue';     //id为two的p标签字体变蓝色
      twoObj.style.background = 'gray';     //id为two的p标签背景颜色变为灰色
        let pArr = document.getElementsByTagName('p'); // 通过元素的标签名获取
        console.log("p标签的个数:"+pArr.length);       //获取所有p标签对象,是数组,长度为5
        let firstArr = document.getElementsByClassName('first');  // 通过class获取
        console.log("class为first的对象个数:"+firstArr.length);   //获取所有class为first的对象,是数组,长度为2
        let userArr = document.getElementsByName('user');
        console.log("name属性为user的对象个数:"+userArr.length);    //获取所有name属性为user的对象,是数组,长度为0
      let userArr1 = document.getElementsByName('username');
      console.log("name属性为username的对象个数:"+userArr1.length);    //获取所有name属性为username的对象,是数组,长度为2
    </script>
  </body>
</html>

讲解都写到了注释里↑


效果截图:

1.png



相关文章
|
5天前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 节点列表
JavaScript HTML DOM 节点列表
11 5
|
5天前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 集合(Collection)
JavaScript HTML DOM 集合(Collection)
8 4
|
6天前
|
JavaScript 前端开发 索引
你可能没有听说过 js中的 DOM操作还有这个: HTMLCollection 和 NodeList
该文章详细解释了JavaScript中HTMLCollection和NodeList这两种DOM集合类型的特性、使用方法及其区别,并通过实例代码展示了如何操作这两种集合来选取和遍历DOM元素。
|
7天前
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
14 5
|
5天前
|
JavaScript 前端开发
JavaScript HTML DOM 元素 (节点)
JavaScript HTML DOM 元素 (节点)
12 2
|
7天前
|
JavaScript 前端开发
JavaScript HTML DOM - 改变CSS
JavaScript HTML DOM - 改变CSS
15 4
|
7天前
|
JavaScript 前端开发
JavaScript HTML DOM EventListener
JavaScript HTML DOM EventListener
12 2
|
7天前
|
XML 移动开发 JavaScript
js中BOM和DOM总结(基础篇)
文章总结了JavaScript的BOM和DOM知识点,包括window、screen、location、history、navigator对象,以及消息框、计时器和cookie。同时,介绍了DOM的概念、节点获取和修改方法,以及事件处理。
js中BOM和DOM总结(基础篇)
|
4天前
|
JavaScript 前端开发
JavaScript遍历数组用splice方法删除元素,这样写可能有遗漏,你遇到过吗?
JavaScript遍历数组用splice方法删除元素,这样写可能有遗漏,你遇到过吗?
|
4天前
|
JavaScript 前端开发
JavaScript从二维数组抽取元素组成新数组的三种方法
JavaScript从二维数组抽取元素组成新数组的三种方法
下一篇
无影云桌面