题目1： dom对象的innerText和innerHTML有什么区别？
innerHTML会显示元素内部的HTML结构，在写入的时候也会自动构建DOM
innerText显示的是元素的文本内容，可读可写。
另外从安全的角度来看：如果写入一段恶意的script代码，innerHTML则会将代码执行，会对网站造成很大的隐患。但是innerText只会将这段代码作为文本展示。
题目2： elem.children和elem.childNodes的区别？
<!-- 注意中间有空格 -->
<div id="hot_game">热门游戏<div>我是子节点</div> </div>
element.children只输出普通的DOM元素；
element.childNodes会输出所有的子元素，包括文本节点、文字；
大多数情况下我们应该使用element.children；
题目3：查询元素有几种常见的方法？ES5的元素选择方法是什么?
getElementById()：返回匹配指定ID属性的元素节点
getElementsByClassName()：返回一个指定class名的元素的数组
getElementsByTagName()：返回一个指定标签的数组
getElementsByName()：返回name属性的HTML元素
querySelector()：返回指定的CSS选择器的元素节点。
querySelectorAll()：方法返回匹配指定的CSS选择器的所有节点
ES5的元素选择方法是：querySelector()，querySelectorAll()
可以在https://caniuse.com/查看兼容性
题目4：如何创建一个元素？如何给元素设置属性？如何删除属性
createElement()
createElement方法用来生成HTML元素节点。
var newdiv = document.createElement("div");
setAttribute()
setAttribute()方法用于设置元素属性
newdiv.setAttribute("my_attrib", "newVal");
romoveAttribute()
removeAttribute()用于删除元素属性
newdiv.removeAttribute('my_attrib');
题目5：如何给页面元素添加子元素？如何删除页面元素下的子元素?
appendChild()：在元素末尾添加元素
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);
insertBefore()：方法在某个元素之前插入元素
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);
removeChild()：方法可用于删除某元素下的子元素
parentNode.removeChild(childNode);
题目6： element.classList有哪些方法？如何判断一个元素的 class 列表中是包含某个 class？如何添加一个class？如何删除一个class?
add:新增 class
remove:删除 class
toggle:新增/删除切换class
contains: 判断是否拥有 class
var div=document.querySelector(".box");
console.log(div.classList);
div.classList.add('active') ; //新增 class
div.classList.remove('active'); //删除 class
div.classList.toggle('active') ; //新增/删除切换
div.classList.contains('active') ; // 判断是否拥有 class
题目7： 如何选中如下代码所有的li元素？ 如何选中btn元素？
<div class="mod-tabs">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<button class="btn">点我</button>
</div>
//选择所有li元素
var lis=document.querySelectorAll(" .mod-tabs>ul>li");
//选中button元素
var btn=document.querySelector(".btn");
console.log(lis);
console.log(btn);
总结在创建比较多的节点的时候使用createDocumentFragment()
createDocumentFragment方法生成一个DocumentFragment对象。
var docFragment = document.createDocumentFragment();
DocumentFragment对象是一个存在于内存的DOM片段，但是不属于当前文档，常常用来生成较复杂的DOM结构，然后插入当前文档。这样做的好处在于，因为DocumentFragment不属于当前文档，对它的任何改动，都不会引发网页的重新渲染，比直接修改当前文档的DOM有更好的性能表现。
实例如下：
var fragment=document.createDocumentFragment();
for(var i=0;i<results.length;i++)
{
var node=document.createElement("li");
node.innerText=results[i];
fragment.appendchild(node);
}
ul.appendChild(fragement);
