JavaScript DOM获取方法！！

1.ID

     var ele=document.getElementById('id');

特点：只能找到一个

2.class

var ele=document.getElementsByClassName('list');
console.log(ele[0]);
ele[0].style.color='red';
ele[1].style.color='red';
ele[2].style.color='red';
for(var i=0;i<ele.length;i++){  
           ele[i].style.color='red';
           }  

特点：能找到多个,返回一个动态集合(数组)

3.TagName 标签名

      var ele=document.getElementsByTagName('tagname')

特点：能找到多个,返回一个动态集合(数组)

4.name属性适用于表单元素

      var ele=document.getElementsByName('name');

选择器：

       1.var el=document.querySelector('.container>ul>li>a>span>b');

特点：只能找一个

       2.var ele=document.querySelectorAll('.container>ul>li');

能找到多个，动态集合(数组)

通关元素间关系查找

父子关系：

     1. parentElement       //查找一个元素的父元素
     2. children          // 查找一个元素的所有子元素
     3.firstElementChild   // 查找父元素下的第一个子元素
     4.lastElementChild   // 查找父元素下的最后一个子元素

                        console.log(box.parentElement) ;   
                        console.log(box.children);   

兄弟关系

        1.  previouseElementSibling  //前一个兄弟
        2.  nextElementSibling  //下一个兄弟

如何动态创建一个元素

 var a=document.createElement('a'); 

父元素.appendChild(子元素)追加一个元素

添加内容

        a.innerHTML='去百度';
        a.href='http://www.baidu.com';
     document.querySelector('body').appendChild(a);   

``