题目1: dom对象的innerText和innerHTML有什么区别？
- innerText是一个可写属性, 返回元素内包含的文本内容,不包括标签, 在多层次的时候会按照元素由浅到深的顺序拼接其内容; 设定innerText值时,即便输入的内容是HTML标签, 也会以文本形式显示; 安全性比使用innerHTML显示用户输入的内容要高
- innerHTML属性作用与innerText类似, 但不是返回元素的文本内容, 而是返回元素的HTML结构,包括HTML标签和文本内容; 设定innerHTML值时如果输入的内容中包含HTML标签, 则会以HTML形式解析
题目2： elem.children和elem.childNodes的区别？
- elem.children只会返回以HTML标签形成的节点
- elem.childNodes会返回包括文本, 注释在内的所有节点; 使用时容易出现问题, 因此多用elem.children
题目3：查询元素有几种常见的方法？ES5的元素选择方法是什么?
- getElementById(): 查询含指定id的元素节点, 返回单个对象,如果没有发现匹配的节点，则返回null。
- getElementByClassName(): 查询含指定class的元素节点, 可以是多个空格分隔的class名字，返回同时具有这些节点的元素。
- getElementByTagName(): 查询标签为指定tag的元素节点(搜索范围包括本身), 返回所有符合条件的元素节点组成的类数组对象; 注意，getElementsByTagName方法会将参数转为小写后，再进行搜索。
- getElementByName(): 查询name属性值为指定name的元素节点, 返回所有符合条件的元素节点组成的类数组对象
ES5: - querySelector(): 查询匹配指定的CSS选择器的元素节点, 返回第一个符合条件的对象; 如果没有发现匹配的节点，则返回null。
- querySelectorAll(): 返回所有符合条件的的元素节点组成的类数组对象, querySelectorAll方法的参数，可以是逗号分隔的多个CSS选择器，返回所有匹配其中一个选择器的元素。
题目4：如何创建一个元素？如何给元素设置属性？如何删除属性
- createElement()
createElement方法用来生成HTML元素节点。
var newDiv = document.createElement("div");
createElement方法的参数为元素的标签名，即元素节点的tagName属性。如果传入大写的标签名，会被转为小写。如果参数带有尖括号（即<和>）或者是null，会报错。
- setAttribute()
setAttribute()方法用于设置元素属性
var node = document.getElementById("div1");
node.setAttribute("my_attrib", "newVal");
- romoveAttribute()
removeAttribute()用于删除元素属性
node.removeAttribute('id');
题目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?
var nodeBox = document.querySelector('.box')
console.log( nodeBox.classList )
nodeBox.classList.add('active') //新增 class
nodeBox.classList.remove('active') //删除 class
nodeBox.classList.toggle('active') //新增/删除切换
node.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>
var oTab = document.getElementsByClassName('mod-tabs');
var aLi = oTab.getElementByTagName('li');
var oBtn = document.getElementsByClassName('btn');
//ES5
var oTab = document.querySelectorAll('.mod-tabs li');
var oBtn = document.querySelector('.btn');
