DOM选择器&方法封装

3HTMLDOM树.png

3HTMLDOM树访问.png

3简单了解dom.png

3查找元素.png

3查找元素2.png

例如通过类名寻找的div集合，想要给他们全部设置为红色，不可以divs.style.color='red';只能通过for循环给他们一个个设置：

    var divs=document.getElementsByClassName("box");
    for(var i=0;i

即使类名为box的只有一个元素，得到的也是一个集合，也需要通过下标获取。

学习css时有嵌套选择器，如div下的p标签，js如何做到

    var myText=document.getElementsByTagName("p");//找到所有的p标签
    var box=document.getElementsByClassName("box");
    var p=box.getElementsByTagName("p");//找到类名为box内面的p标签
    //这个得到的也是集合
    p[0].style.color='red';

简单的选择器封装：

  
    
1
    

      
div内面的p标签
    
    
div外面的p标签
    
box
    
box
  
  

  
    
1
    

      
div内面的p标签
    
    
div外面的p标签
    
box
    
box
  
  

//选择器嵌套封装

    
        
1
        

            span
            
div内面的p标签
        
        

            
div内面的p标签span
        
        
div外面的p标签
        
box
        
box
    

只能是document.getElementById,不能是divs.getElementById因为整个dom结构中只有唯一的id所以只能由document来调用。

document.getElementsByTagName这样得到的是伪数组，不能调用数组的slice等方法，需要将伪数组转换成数组，Array.prototype.slice.call(伪数组)来转换成数组。但是[1,2,3].concat(伪数组)好像可以

var xx=document.getElementsByTagName("p");
console.log([1,2,3].concat(xx));
// [1, 2, 3, HTMLCollection(3)]

(所以说数组内面什么都可以装)