JS获取元素

Posted 2020-11-15 宅到深夜

1.   document.getElementsByTagName(‘标签名‘)     //通过标签名获取多个元素  返回一个伪数组

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

var res=document.getElementsByTagName(‘div‘)
console.log(res)

2.  document.getElementById(‘id名‘)   通过id获取元素，返回对应的元素

<div id="box">哈哈</div>

var res=document.getElementById(‘box‘)
console.log(res)

3.通过元素调用   .getElementsByTagName(‘标签名‘) 

<div id="box">
  <div>1</div>
  <div>2</div>
</div>
var box=document.getElementById(‘box‘)
var res=box.getElementsByTagName(‘div‘)
console.log(res)

4. document.getElementsByClassName("类名")     //通过类名获取多个元素  返回一个伪数组

var res=document.getElementsByClassName("box")
console.log(res)

5.通过元素调用  .getElementsByClassName("类名")

<div id="app">
<div class="box">1</div>
<div class="box">2</div>
</div>

var app=document.getElementById(‘app‘)
var res=app.getElementsByClassName("box")
console.log(res)

6.document.querySelector(‘.选择器‘)    //通过选择器查找元素，返回符合条件的第一个

var res=document.querySelector(‘.box‘)
console.log(res)

  document.querySelectorAll(‘选择器‘)    // 通过选择器查找元素，返回一个伪数组

var res=document.querySelectorAll(‘.box‘)
console.log(res)