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、ES5的元素选择方法：querySelector()、querySelectorAll()
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?
- add(class1,class2,…)：在元素中添加一个或多个类名。如果指定的类名已存在，则不会添加。
- contains(class)：返回布尔值，判断指定的类名是否存在。
- item(index)：返回类名在元素中的索引值。索引值从 0 开始，在区间范围外则返回null。
- remove(class1,class2,…)：移除元素中一个或多个类名。移除不存在的类名，不会报错。
- 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>
