DOM操作

1.dom对象的innerText和innerHTML有什么区别？

innerText:获取元素内的的所有文本内容
innerHTML：获取元素内的HTML结构，但不含元素本身

2.elem.children和elem.childNodes的区别？

elem.childNodes输出的内容是含有空格节点的所有子节点，
elem.children输出的则是不含空节点的所有子节点

3.查询元素有几种常见的方法？ES5的元素选择方法是什么?

document.getElementById() 通过id获取元素，返回
document.getElementsByClassName()
document.getElementsByTagName()
document.getElementsByName()
ES5的有:
document.querySelector()
document.querySelectorAll()

4.如何创建一个元素？如何给元素设置属性？如何删除属性

var newEle = document.creatElement("div");//创建元素
newEle.setAttribute("id","box");//设置元素属性
console.log(newEle);//<div id="box"></div>
newEle.removeAttribute("id");//删除属性
console.log(newEle);//<div></div>

5.如何给页面元素添加子元素？如何删除页面元素下的子元素?

        var newEle = document.createElement("div");//创建元素div
        newEle.setAttribute("id","box");//设置div属性id="box"
        var btn = document.createElement("span");//创建元素span
        btn.setAttribute("class","btn");//设置span属性 class="btn"
        var span_text = document.createTextNode("jirengu");//创建文件节点"jirengu"
        btn.appendChild(span_text);//将文本节点插入到元素span中
        newEle.appendChild(btn);//将元素span插入到元素div中
        document.body.appendChild(newEle);//将元素div插入到body中
        newEle.removeChild(btn);//删除元素div的子节点span

6. element.classList有哪些方法？如何判断一个元素的 class 列表中是包含某个 class？如何添加一个class？如何删除一个class?

var ele = document.createElement('div');
ele.setAttribute('class','box1 box2 box3');
ele.classList //['box1','box2','box3']
ele.classList.add('box4') //添加一个class 
ele.classList.contains('box4') //是否包含box4返回true 
ele.classList.remove('box3') //删除class中的box3
ele.classList.toString() //将类数组对象转为字符串  "box1 box2 box4"

7.如何选中如下代码所有的li元素？如何选中btn元素？

<div class="mod-tabs">
   <ul>
       <li>list1<li>
       <li>list2<li>
       <li>list3<li>
   </ul>
   <button class="btn">点我</button>
</div>

          function $(ele){
              if(ele.length > 0 && ele[0]!=="#"){
                  return document.querySelector(ele);
              }else{
                  return document.querySelectorAll(ele)
              }
          }
          var li_lists = $(".mode-tabs ul li");//选中所有的li元素
          var btn  = $(".mode-tabs .btn")[0];//选中btn元素

        var  tab = document.getElementsByClassName("mod-tabs")[0];
        var li_lists = tab.getElementsByTagName("li");//选中所有的li元素
        var btn  = tab.getElementsByClassName("btn")[0];//选中btn元素

最后编辑于：2017.12.06 02:10:40