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

2022-05-26 00:01:01 阅读：140 来源： 互联网

标签：27 console log DOM text JavaScript 查找元素 document

前言

如何查找和访问 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 对象（和对象集合）也是可访问的：

document.anchors
document.body
document.documentElement
document.embeds
document.forms
document.head
document.images
document.links
document.scripts
document.title

标签：27,console,log,DOM,text,JavaScript,查找,元素,document
来源： https://www.cnblogs.com/yoyoketang/p/16311543.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9