DOM操作

一、dom对象的innerText和innerHTML有什么区别？

• innerText：返回元素内包含的文本内容，元素多层嵌套的时候，会按照元素由浅到深的顺序拼接其内容。
• innerHTML：不仅返回元素内包含的文本内容，同时也会返回元素的HTML结构。

二、elem.children和elem.childNodes的区别？

• elem.childNodes：获取子元素的节点，包括文本节点、元素节点、注释节点；
• elem.children：：获取子元素的元素节点（只包括元素节点）；

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

• getElementById()

• getElementsByTagName()

• getElementsByTagName()

• getElementsByName()

ES5的元素选择方法:

• querySelector()：

        

        
你好啊
        
你好啊
        
你好啊
    
    

• querySelectorAll()：

    

        
你好啊
        
你好啊
        
你好啊
    
    

四~五、如何创建一个元素？如何给元素设置属性？如何删除属性？如何给页面元素添加子元素？如何删除页面元素下的子元素?

HTML:
    

        
第一个
        
第二个
        
第三个
        
第四个
    
JS:
       var wrap = document.querySelector(".wrap");
       var innner = wrap.querySelectorAll(".inner"); 
       var newElem = wrap.createElement("div");// 产生元素节点；
       var newContent = wrap.createTextNode("第五个");//产生文本节点；
        newElem.setAttribute("class","inner");//设置新元素的属性；
        newElem.appendChild(newContent);//把文本节点插入生成的元素节点
        wrap.appendChild(newElem);//把生产的元素插入到wrap里面；
        inner[0].removeAttribute("class");//删除wrap第一个inner子元素的class属性；
       wrap.removeChild("inner[1]");//删除wrap第二个inner子元素；

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

• element.classList.add("className")：增加一个class；
• element.classList.remove("className")：删除一个class；
• element.classList.toggle("className")：新增删除切换；
• element.classList.contains("className")：判断是否有这样一个class；

HTML:
    

        
第一个
        
第二个
        
第三个
        
第四个
    
JS:
       var wrap = document.querySelector(".wrap");
       var inner = wrap.querySelector(".inner");
       console.log(inner.classList.contains("inner"))//true   查找是非有这个class；
       inner.classList.add("box"); //新增一个class；
       inner.classList.remove("inner"); //删除一个class；

七、 如何选中如下代码所有的li元素？ 如何选中btn元素？