1）id选择器

基本语法

 document.getElementById("id名称");

功能

通过 id 找到 HTML 元素。
在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。

示例

通过id获取元素           

        function hello(){
            var a = document.getElementById("div1");
            a.style.backgroundColor = "orange";
        }

        var a = document.getElementById("div1");  获取id为div1的元素
        a.style.backgroundColor = "orange";  给元素设置背景色为桔色

2）class选择器

基本语法

 document.getElementsByClassName("class名称");

功能

通过类名找到 HTML 元素。
一个文档中的 class属性可能不唯一，getElementsByClassName() 方法返回的是元素的数组，而不是一个元素。。

示例

通过class获取元素           

        function hello(){    
            var arr = document.getElementsByClassName ("div1");    
            for(var i = 0;i<arr.length;i++){    
              arr[i].style.backgroundColor = "orange";    
            }    
          }    

       var arr = document.getElementsByClassName("div1");  获取类名为div1的所有元素
       for(var i = 0;i<arr.length;i++)  遍历arr数组    
       arr[i].style.backgroundColor = "orange";  给每个元素设置背景色为桔色

3）name选择器

基本语法

  document.getElementsByName("class名称");

功能

通过查询元素的 name 属性，获取页面元素。
一个文档中的 name 属性可能不唯一，getElementsByName()方法返回的是元素的数组，而不是一个元素。

示例

通过name属性获取元素           

        function hello(){    
            var arr = document.getElementsByName("div1");    
            for(var i = 0;i<arr.length;i++){    
              arr[i].style.backgroundColor = "orange";    
            }    
         }    

        var arr = document.getElementsByName("div1");  获取name名为div1的所有元素
        for(var i = 0;i<arr.length;i++)  遍历arr数组    
        arr[i].style.backgroundColor = "orange";  给每个元素设置背景色为桔色

4）标签选择器

基本语法

  document.getElementsByTagName("标签");

功能

通过标签名查找 HTML 元素。

示例

通过标签名称获取元素           

        function hello(){    

            var arr = document. getElementsByTagName("div");    
            for(var i = 0;i<arr.length;i++){    
              arr[i].style.backgroundColor = "orange";    
            }    
          }    

        var arr = document.getElementsByTagName("div");  获取所有div标签元素
        for(var i = 0;i<arr.length;i++)  遍历arr数组    
        arr[i].style.backgroundColor = "orange";  给每个元素设置背景色为桔色