获取节点

1。通过id获取元素（节点）

document.getElementById

       <div id="a" name="f" class="c">1</div>
       <div id="a" class="c" name="f">2</div>
     <script>
          let z = document.getElementById('a')
          console.log(z)
     </script>

2.通过类名获取节点

getElementsByClassName()[写下标，第一个出现的为0]

     <div id="a" name="f" class="c">1</div>
     <div id="a" name="f" class="c">2</div>
<script>
    let z = document.getElementsByClassName('c')[1]
    console.log(z)
</script>

3.通过标签名获取节点

getElementsByTagName()[写下标，第一个出现的为0]

     <div id="a" name="f" class="c">1</div>
     <div id="a" name="f" class="c">2</div>
<script>
    let z = document.getElementsByTagName('div')[1]
    console.log(z)
</script>

4.通过属性名获取节点()[写下标，第一个出现的为0]

getElementsByName

     <div id="a" name="f" class="c">1</div>
     <div id="a" name="f" class="c">2</div>
<script>
    let z = document.getElementsByName('f')[1]
    console.log(z)
</script>

5.querySelector​()

相同名称下只会出现第一个

 <div id="a" name="f" class="c">1</div>
<div id="a" name="f" class="c">2</div>
<script>
    let z = document.querySelector('.c')
    console.log(z)
</script>

6.给第一个div设置样式

      <div id="a" name="f" class="c">1</div>
      <div id="a" name="f" class="c">2</div>
<script>
    let z = document.querySelector('.c')
    z.style.cssText = 'border:3px solid black;background:red; width:300px; height:300px;'
</script>