这是我写的一个操作dom的小例子：

    
    
         
         
         
     
     
      
hello
      
world
      
       
        1
        
         2
        
        
         3
        
           
       
      
     
    

看这个位置的代码：

利用dom提供的选择器，我们可以找到节点和操作节点，

调用后，我们在预览就发现元素根据js的处理而变化了。

1.querySelectorAll和querySelector兼容性

能力检测属于常用技能之一，我们看下面的能力检测代码：

结果就是ie6 7不被支持，这个结果是很让人欣喜的，现在的ie6 7已经被几乎弃用，这2个方法我们至少在移动端是可以完美执行的。

2.querySelectorAll和querySelector使用方法

我们已经很熟悉这两个选择器：

document.getElementById(str);document.getElementsByTagName(str);

写我们的html结果，我们写个2 3级，有id和class就可以了：

    
    
         
         
         
         
     
              
      
1
        
      
2
        
      
                   
       3            
       4        
      
        
      
               
       
        5        
        
                     
         6            
         7               
         
        
       
      
     
    

为了测试是否选择到节点，我们元素内的内容作了区分，利用上面2个老的处理方式我们输出1-7。

是如此的麻烦，肯定问没有通过类名获取的方法吗？这是是有的，不过兼容性存在问题，假如我们找.bb1，我们就要获取所有元素利用classname进行判断，有的就存入一个数组最后返回。

我们利用最新的方法去获取和返回：

参数就是css选择器的形式，而且支持>这种关系选择器，返回的是类数组形式，我们根据下标就可指定获取了。

还有一个没有all的方法，他的用法和上面相同，不过不会以类似数组形式返回，返回的是单个，all的有无就是1和n的区别。

只会返回第一个p的内容。

3.利用querySelectorAll和querySelector开发tab切换效果

效果非常简单，我们简单实践开发使用：

    
    
         
         
         
         
     
           
      
                
       
        菜单1            
        菜单2            
        菜单3                
        
                  
         
          内容1
         
            
         
          内容2            
          
           内容3