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

• innerText 返回元素内包含文本内容
• innerHTML 返回元素的HTML结构，在写入的时候也会自动构建DOM
• outerHTML 返回内容还包括本身
  例：

<div id="box">
  <p class="num num1">123<span class="num num2">456</span></p>
</div>

var elem = document.getElementById('box')
console.log(elem.innerText)     //123 456
console.log(elem.innerHTML)     //<p>123<span>456</span></p>
console.log(elem.outerHTML)    //<div id="box"> <p>123<span>456</span></p> </div>

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

• elem.children 不包含空白节点
• elem.childNodes 包含空白节点
  

3、4种常见查询元素方法

• 通过id查找，由于id只有一个，注意只有这个才是Elelment 没有带s
  var elem = document.getElementById('box')

• 通过class名称查找
  var elements = document.getElementsByClassName("num")

• 通过标签名称查询
  var paras = document.getElementsByTagName("p")

• 用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会实时反映元素的变化。
  var images = document.getElementsByName("image")

4种常见查询元素方法

4、ES5的元素选择方法：querySelector()、querySelectorAll()

ES5的元素选择方法：querySelector()

function $(str){
    return document.querySelector(str)    //返回匹配的第一个节点
} 
runction $$(str){
    return document.querySelectorAll(str)   //返回全部匹配的节点
}
$('#box')   //调用函数查找id为box的
$$('.num')

5、getElementsByID 和 querySelector的区别

var btn1 = document.getElementByID('btn')
var btn2 = document.querySelector('#btn')

1、区别

getXXXByXXX 获取的是动态集合，querySelector获取的是静态集合。
简单的说就是，动态就是选出的元素会随文档改变，静态的不会，取出来之后就和文档的改变无关了。
先看看一个例子：

<ul>  
    <li>aaa</li> 
    <li>ddd</li>  
    <li>ccc</li>
</ul>

//demo1
var ul = document.getElementsByTagName('ul')[0],
    lis = ul.getElementsByTagName("li");
for(var i = 0; i < lis.length ; i++){   
    ul.appendChild(document.createElement("li"));
}
console.log( lis.length);  //6

//demo2
var ul = document.querySelectorAll('ul'),    
    lis = ul.querySelectorAll("li");
for(var i = 0; i < lis.length ; i++){    
   ul.appendChild(document.createElement("li"))
   //这个时候就创建了3个新的li，添加在ul列表上。
}
console.log( lis.length);  //3 ，输出的结果仍然是3，不是此时li的数量6

Demo1 中的 lis 是一个动态的 Node List， 每一次调用 lis 都会重新对文档进行查询，导致无限循环的问题。

2、性能

可通过该网站测试：https://jsperf.com/getelementsby-vs-queryselectorall/7
测试结果：getElementBy系列的执行速度基本都是querySelectorAll的100+倍

3、querySelector和querySelectorAll()

querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。

4、总结

如果只要一次查找就可得到元素时，首选getXXXByXXX ，因为它快一些；
如果需要经过多级查找，才能得到元素时，首选querySelector，因为它方便

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

增 创建一个元素 var newElem = document.createElement()
删 删除属性newElem.removeAttribute('属性名')
改 设置元素属性newElem.setAttribute('属性名','属性值')

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

appendChild() 在元素末尾添加元素
removeChild() 删除某元素下的子元素
insertBefore() 在元素之前插入元素
replaceChild() 接受两个参数：要插入的元素和要替换的元素

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

1. add(class1,class2,…)：在元素中添加一个或多个类名。如果指定的类名已存在，则不会添加。
2. contains(class)：返回布尔值，判断指定的类名是否存在。
3. item(index)：返回类名在元素中的索引值。索引值从 0 开始，在区间范围外则返回null。
4. remove(class1,class2,…)：移除元素中一个或多个类名。移除不存在的类名，不会报错。
5. toggle(class,true|false)：在元素中切换类名。第一个参数为要在元素中移除的类名，并返回 false。 如果该类名不存在则会在元素中添加类名，并返回 true。 第二个是可选参数，是个布尔值用于设置元素是否强制添加或移除类，不管该类名是否存在。

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

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

<script>
    //ES5
    document.querySelector('.btn')
    document.querySelectorAll('li')

    //常见
    document.getElementsByClassName('btn');
    document.getElementsByTagName("li")
</script>