1.dom对象的innnertext与innnerHTML有什么区别？

innerText 会返回一个节点及其后代的“渲染”文本内容

 <div>abc
    <p>
        123
        <span>456
            <span>789</span>
        </span>
    </p>
</div>
<script>
var div = document.getElementByTag("div")[0];
var a = div.innerText
console.log(typeof a)   //   string
console(a)
/*
abc
123 456 789
*/
 </script>

innerHTML 设置或获取描述元素后代的HTML语句

var b = div.innerHTML;
console.log(typeof b)   //   string
console(b)
/*
abc
    <p>
        123
        <span>456
            <span>789</span>
        </span>
    </p>
*/

2.elem.children与elem.childnodesd的区别？

console.log(div.children) 
 /*
[p]      //children只返回常规dom节点
*/    
console.log(div.childNodes) 
 /*
 [text, p, text]   childNodes还会将文本当做节点返回
第一个text内容是  abc
第二个text内容是  换行符 
*/  
其次，可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，
2是属性节点，3是文本节点
用法
node = document.documentElement.firstChild;
node.nodeType

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

• getElementById() 返回匹配指定ID的元素
• getElementByClassName() 返回匹配指定类名的元素类似数组的对象（HTML Collection），搜索结果是一个动态集合，任何元素的变化都会反映在返回集合中
• getElementsByTagName() 返回所有指定标签的元素HTML Collection对象。
  getElementsByName() 返回匹配指定name属性的元素对象NodeList ，NodeList 对象是一个节点的集合，不会实时反映元素变化

ES5方法

• querySelector() 返回匹配指定的CSS选择器的第一个元素
• querySelectorAll() 返回匹配指定的CSS选择器的所有节点，返回一个NodeList格式对象

ParentNode.querySelectorAll()
var matches = document.querySelectorAll("div.note, div.alert");
// NodeList(2)

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

var div = document.createElement("div");    //创建元素
div.setAttribute("class","d1")                 // 设置属性 设置class为d1
console.log(div)   //   <div class="d1"></div>
div.removeAttribute("class")   //  删除属性  删除class
console.log(div)   //    <div></div>

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

<div id="d1">
  <p>123</p>
</div>

    var div = document.getElementById("d1");
    var p2 = document.createElement("p");
    p2.setAttribute("class","p2")
    var text = document.createTextNode("456");
    p2.appendChild(text);                       //往p2中添加文本节点
    div.appendChild(p2);
    console.log(text);                        //往div中添加子节点p2
    var p1 = document.createElement("p");
    p1.setAttribute("class","p1")
    p1.appendChild(text);                      //往p1中添加文本节点
    div.insertBefore(p1,p2);                    //往div中添加子节点p1，并且插到p2前面

最后的结果是
<div>
  <p>123</p>
  <p class="p1">456</p>
  <p class="p2"></p>
</div>
p2中并无文本，看来创建的textNode只能添加到一个节点中，后添加的会覆盖前面添加的，不能像字符串那样重复使用。

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

<div id="d1" class="foo bar"></div>

var div = document.getElementById("d1");
div.classList.remove("foo")         //删除class
div.classList.add("anotherclass");   //添加class
div.classList.add("ac1","ac2")   //添加多个class，删除也是同样的语法
//  <div id="d1" class="bar anotherclass ac1 ac2"></div>

console.log(div.classList.contains("foo"))    // false  检查元素中是否存在指定的类
console.log(div.classList.contains("bar"))   // true

console.log(div.classList[1])  // anotherclass   根据索引访问到每个class

div.classList.toggle("visible");  //  如果visible类存在，则删除它并返回false，如果
不存在，则添加它并返回true

div.classList.toggle("visible",i < 10)  //如果第二个参数的计算结果为true，则添加指定的
类值，如果计算结果为false，则删除它

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

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

var li = document.getElementsByTagName("li");
var li2 = document.querySelectorAll(".mod-tabs>ul li"); 

var btn = document.getElementsByClassName("btn")[0];
var btn2 = document.querySelector(".btn");