js获取页面元素的 7种方法

1、通过ID来获取页面元素：

document.getElementById('id');

    <div id='box'></div>
    <script>
        let box = document.getElementById('box');
        console.log(box);         // 输出是整条语句 <div id='box'></div>
    </script>

获取类的话需要用到className,因为class是一个关键字：

    div id="box" class="one"></div>
    <script>
        let box = document.getElementById('box');
        box.className;
        console.log(box.className);  // 输出是类名 one
    </script>

注意：

1、如果页面上没有这个id的元素,通过这个id来获取的就是一个null

 2、有些浏览器认为id是唯一的,所以可以用id来代替那个元素.，但是不建议这样用, 建议还是先获取元素

 2、通过类名来获取页面元素：

document.getElementsByClassName('类名');

 .获取到的是一个集合，伪数组. 里面存放的是一个个的元素

    <ul>
        <li class="one">1</li>
        <li class="one">2</li>
        <li class="one">3</li>
    </ul>
    <script>
        let lis = document.getElementsByClassName('one');
        console.log(lis);    //输出的是伪数组 [li.one, li.one, li.one]   
    </script>

  如果要得到第2个li标签，可以通过数组的下标得到：

    <script>
        let lis = document.getElementsByClassName('one');
        let li2 = lis[1];
        console.log(li2);            //输出 <li class='one'>2</li>
    </script>

 类名的获取：

    <ul>
        <li class="one">我是第1个li标签</li>
        <li class="one">我是第2个li标签</li>
        <li class="one">我是第3个li标签</li>
    </ul>
    <script>
        let lis = document.getElementsByClassName('one');
        let li2 = lis[1];
        li2.className += ' two'
        console.log(li2.className);   //输出 one two
    </script>

 注意：

1、下面这样设置会把原来的类名覆盖掉

  li2.className = 'two';         //会得到<li class="two">2</li>

2、如果不覆盖,要先获取再追加

li2.className += ' two';     //这里需要空格一下，类名才不会相连

 3、通过标签名来获取页面元素：

document.getElementsByTagName('标签名');

是获取页面上的所有该标签，得到的是一个对象,是伪数组（并不是数组）,里面放的是一个个的元素

类似于类名的获取,需要通过下标去取里面的值，但是getElementsByTagName是通过"标签名"来获得

    <ul>
        <li>我是第1个li标签</li>
        <li>我是第2个li标签</li>
        <li>我是第3个li标签</li>
    </ul>
    <script>
        let li2 = document.getElementsByTagName('li')[1];
        console.log(li2);                  //'<li>我是第2个li标签</li>'
        console.log(Array.isArray(lis));         //false   不是数组
    </script>

4、通过name属性获取页面元素：

document.getElementsByName('name属性的值');

<!-- div标签默认没有name,但是我们可以给他添加一个name属性 --> 

<div name='one'></div>

 
  <!-- 表单元素,是默认有name属性 -->
  <input type="text" name="one" id="">
  <input type="password" name="one" id="">
  <input type="radio" name="one" id="">
  <input type="checkbox" name="one" id="">
  <script>
    //需求: 通过name属性去获取元素们.
    let eles = document.getElementsByName('one');
    console.log(eles);
 
  </script>

注意: 这种获取元素的方式用的不多.

5、H5新增的获取元素的方式(需考虑浏览器兼容)

1、document.querySelector('选择器');       //获取满足条件的第一个元素 id带#,  类带. 

  <ul>
    <li>我是第1个li标签</li>
    <li class="one">我是第2个li标签</li>
    <li class="one">我是第3个li标签</li>
    <li>我是第4个li标签</li>
    <li class="one">我是第5个li标签</li>
    <li>我是第6个li标签</li>
    <li>我是第7个li标签</li>
    <li id="one">我是第8个li标签</li>
    <li id="two">我是第9个li标签</li>
    <li>我是第10个li标签</li>
    <span class="one">span1</span>
    <span class="one">span2</span>
  </ul>
 
  <ol>
    <li class="one">我是ol中的第1个li标签</li>
    <li>我是ol中的第2个li标签</li>
  </ol>
 <script>
    let ele = document.querySelector('#one');
    console.log(ele);       //输出 <li id="one">我是第8个li标签</li>
 
    let eles = document.querySelector('.one');
    console.log(eles);  //输出 <li class="one">我是第2个li标签</li>
 </script>

6、H5新增的获取元素的方式(需考虑浏览器兼容)

2.document.querySelectorAll('选择器');         //获取满足条件的所有元素

let ele = document.querySelectorAll('ol>li');
console.log(ele);          //获取到的是ol下的所有li元素

7、直接通过标签获取，例如：body

document.body.样式.属性 = ‘ 属性值 ’；              //设置body元素的样式

AND: document.documentElement是专门获取html这个标签的，几乎很少用到