在javascript中获取网页元素可以使用

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

document.getElementById('id');

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

获取类的话需要用到className,因为class是一个关键字：
    div id="box" class="one">

let box = document.getElementById('box'); box.className; console.log(box.className); // 输出是类名 one

注意：

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

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

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

document.getElementsByClassName('类名');

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

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

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

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

类名的获取：

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

注意：

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

  li2.className = 'two';         //会得到2

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

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

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

document.getElementsByTagName('标签名');

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

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

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

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

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


  
  
  
  
  
  
    //需求: 通过name属性去获取元素们.
    let eles = document.getElementsByName('one');
    console.log(eles);

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

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

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

  
    我是第1个li标签
    我是第2个li标签
    我是第3个li标签
    我是第4个li标签
    我是第5个li标签
    我是第6个li标签
    我是第7个li标签
    我是第8个li标签
    我是第9个li标签
    我是第10个li标签
    span1
    span2
  

  
    我是ol中的第1个li标签
    我是ol中的第2个li标签
  
 
    let ele = document.querySelector('#one');
    console.log(ele);       //输出 我是第8个li标签

    let eles = document.querySelector('.one');
    console.log(eles);  //输出 我是第2个li标签

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这个标签的，几乎很少用到

胖熊NET