1. dom对象的innerText和innerHTML有什么区别？
- innerText从对象的起始位置到终止位置的文本内容，去除了HTML标签
- innerHTML从对象的起始位置到终止位置的全部内容，包括HTML标签
<div id="test">
<h1>welcome</h1>
<p>hello</p>world
</div>
d45b9345fca0aa9d55531db8955373989e5eb9c7.jpg
2. elem.children和elem.childNodes的区别？
- children：非标准的，它返回指定元素的子元素集合。它只返回元素节点，甚至不返回文本节点。需注意children在IE中包含注释节点。
- childNodes：标准的，它返回指定元素的子元素集合，包括元素节点、属性节点、文本节点（元素节点、属性节点和文本节点的属性类型分别是1、2、3）
e00278649d64172a46b77bb3c19e1a149812a3ae.jpg
3.查询元素有几种常见的方法？ES5的元素选择方法是什么?
- document.getElementById() ：匹配指定ID属性的元素节点
- document.getElementsByClasName()： 方法返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素
- document.getElementByTagName('')返回所有指定标签的元素
- document.getElementByName('')方法用于选择拥有name属性的HTML元素
- es5方法
1.querySelector()方法返回匹配指定的CSS选择器的元素节点,如document.querySelector(".myclass");
2.querySelectorAll方法返回匹配指定的CSS选择器的所有节点
其中，ES5元素选择的方法是querySelector和querySelectorAll，可以通过输入CSS选择器的形式来选中任意元素，比上面4种方法更加灵活方便。
为了书写方便可以将querySelector和querySelectorAll封装如下函数：
function $(str) {
return document.querySelector(str);
}
function $$(str) {
return document.querySelectorAll(str);
}
4.如何创建一个元素？如何给元素设置属性？如何删除属性
//创建元素节点
document.createElement(tagName[, options]);
//创建文本节点
document.createTextNode(data);
//获取元素属性
element.getAttribute(attName);
//设置或修改元素属性
element.setAttribute(name, value);
//删除元素属性
element.removeAttribute(attrName);
5.如何给页面元素添加子元素？如何删除页面元素下的子元素?
//在子元素末尾添加新的子元素
parentNode.appendChild(childNode);
//在某个元素前插入新的元素
parentNode.insertBefore(newChild, referenceChild);
//替换子元素
parentNode.replaceChild(newChild, oldChild);
//删除元素下的子元素
parentNode.removeChild(childNode);
6.element.classList有哪些方法？如何判断一个元素的 class 列表中是包含某个 class？如何添加一个class？如何删除一个class?
var ele = document.createElement('div');
ele.setAttribute('class','leftbar first');
ele.classList //['left','first']
//element.classList常用方法如下：
ele.classList.add('float') //添加一个class
ele.classList.contains('leftbar') //判断class列表中是否包含leftbar，返回true
ele.classList.remove('leftbar') //删除一个class
ele.classList.toString() //将类数组对象转为字符串
7. 如何选中如下代码所有的li元素？ 如何选中btn元素？
<div class="mod-tabs">
<ul>
<li>list1<li>
<li>list2<li>
<li>list3<li>
</ul>
<button class="btn">点我</button>
</div>
答：
document.querySelectorAll('li');//选中所有li元素
document.querySelector('.btn');//选中btn元素
