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");
