JavaScript 学习-27.查找HTML DOM节点(元素)

上海-悠悠

发布于 2022-05-26 10:40:41

1.4K00

代码可运行

文章被收录于专栏：从零开始学自动化测试从零开始学自动化测试

运行总次数：0

代码可运行

前言

如何查找和访问 HTML 页面中的节点元素？也就是我们经常说的定位元素的一些方法。

查询 HTML 节点(元素)一些方法

查找 html 页面上的元素，可以用以下方法

方法	节点类型
getElementById()	通过 id 查找 HTML 元素
getElementsByClassName()	通过标 class 属性查找 HTML 元素
getElementsByName()	通过标 name 属性查找 HTML 元素
getElementsByTagName()	通过标 tag 标签查找 HTML 元素
querySelector()	CSS 选择器查找 HTML 元素
querySelectorAll()	CSS 选择器查找符合条件所有 HTML 元素
document.forms()	对象选择器查找 HTML 对象

以上方法中只有getElementById()和querySelector()查找到的是单个元素，其它都是查找到的元素集合（相当于一个数组）

getElementById()

通过 id 查找 HTML 元素，使用语法

document.getElementById("id属性")

示例

  <body>
    <h1>DOM 节点</h1>
    <p id="demo" class="text">Hello world!</p>
  <script>
      element =  document.getElementById('demo')
      console.log(element) // <p id="demo" class="text">Hello world!</p>
  </script>
  </body>

一般如果元素有id属性，id一般都是唯一属性，所以通过id查找是最简单的方法。如果元素被找到，此方法会以对象返回该元素, 如果未找到元素，返回null。

getElementsByClassName()

如果元素只有一个class属性，如下面的class="text"，会查找页面上所有的class属性带有text属性的元素。

  <body>
    <h1>DOM 节点</h1>
    <p class="text">Hello</p>
    <p id="demo" class="text text-info">Hello world!</p>
  <script>
      ele1 = document.getElementsByClassName('text')
      console.log(ele1.length)  // 2
      console.log(ele1)  // HTMLCollection(2) [p.text, p#demo.text.text-info, demo: p#demo.text.text-info]
  </script>
  </body>

返回的结果是HTMLCollection对象，可以看成是一个数组，会返回一个或多个元素，如果找不到会返回空的[]。

如果class属性有多个值class="text text-info",那么可以拿其中的一个属性去查找

      ele2 = document.getElementsByClassName('text-info')
      console.log(ele2.length)  // 1
      console.log(ele2)  // HTMLCollection [p#demo.text.text-info, demo: p#demo.text.text-info]

HTMLCollection对象有length属性，可以统计查找到元素的个数

我们也可以通过class属性查找同时满足多个条件的元素,getElementsByClassName('text text-info')会查找class属性同时有”text”和”text-info”属性。

<body>
    <h1>DOM 节点</h1>
    <p class="text">Hello</p>
    <p class="text text-info">world!</p>
    <p id="demo" class="text text-info text-center">Hello world!</p>
  <script>
      ele1 = document.getElementsByClassName('text text-info')
      console.log(ele1.length)  // 2
      console.log(ele1)  //
  </script>
  </body>

getElementsByName()

根据name属性查找所有name="username", 返回NodeList数组对象

 <body>
    <h1>DOM 节点</h1>
    <p class="text">Hello</p>
    <input name="username">
  <script>
      ele1 = document.getElementsByName('username')
      console.log(ele1.length)  // 1
      console.log(ele1)  // NodeList [input]
  </script>
  </body>

getElementsByTagName()

通过tag标签属性查找所有的<p>标签元素, 返回HTMLCollection 数组对象

  <body>
    <h1>DOM 节点</h1>
    <p class="text">Hello</p>
  <script>
      ele1 = document.getElementsByTagName('p')
      console.log(ele1.length)  // 1
      console.log(ele1)  // HTMLCollection [p.text]
  </script>
  </body>

querySelector()

CSS 选择器查找 HTML 元素

<body>
    <h1>DOM 节点</h1>
    <p id="demo" class="text text-info text-center">Hello world!</p>
  <script>
      ele1 = document.querySelector('#demo');  // id属性
      console.log(ele1)
      ele2 = document.querySelector('.text-info');  // class属性
      console.log(ele2)
      ele3 = document.querySelector('p');  // tag 标签
      console.log(ele3)
  </script>
  </body>

它始终返回的是单个元素对象，如果查找不到返回null

当页面上有多个元素属性一样的时候，此时会返回第一个元素

  <body>
    <h1>DOM 节点</h1>
    <p class="text-info">Hello</p>
    <p id="demo" class="text text-info text-center">Hello world!</p>
  <script>
      ele = document.querySelector('.text-info');  // class属性
      console.log(ele)  // <p class="text-info">Hello</p>
  </script>
  </body>

querySelectorAll()

CSS 选择器查找符合条件所有 HTML 元素

  <body>
    <h1>DOM 节点</h1>
    <p class="text-info">Hello</p>
    <p id="demo" class="text text-info text-center">Hello world!</p>
  <script>
      ele1 = document.querySelectorAll('#demo')
      console.log(ele1)  // NodeList [p#demo.text.text-info.text-center]
      ele2 = document.querySelectorAll('.text-info')
      console.log(ele2)  // NodeList(2) [p.text-info, p#demo.text.text-info.text-center]
  </script>
  </body>

对象选择器查找 HTML 对象

document.forms 获取form表单对象

  <body>
    <h1>DOM 节点</h1>
    <p class="text-info">Hello</p>
    <form id="form-user">
        <label for="user">用户名</label>
        <input id="user" name="username" value="yoyo">
    </form>
  <script>
      form = document.forms['form-user']
      console.log(form)
      for (let i = 0; i < form.length; i++) {
            console.log(form.elements[i].value)  // yoyo
        }
  </script>
  </body>

以下 HTML 对象（和对象集合）也是可访问的：