题目：
题目1： dom对象的innerText和innerHTML有什么区别？
题目2： elem.children和elem.childNodes的区别？
题目3：查询元素有几种常见的方法？ES5的元素选择方法是什么?
题目4：如何创建一个元素？如何给元素设置属性？如何删除属性
题目5：如何给页面元素添加子元素？如何删除页面元素下的子元素?
题目6： element.classList有哪些方法？如何判断一个元素的 class 列表中是包含某个 class？如何添加一个class？如何删除一个class?
题目7： 如何选中如下代码所有的li元素？ 如何选中btn元素？
<div class="mod-tabs">
<ul>
<li>list1<li>
<li>list2<li>
<li>list3<li>
</ul>
<button class="btn">点我</button>
</div>
答案：
1、
innerText从对象的起始位置到终止位置的文本内容，去除了HTML标签
innerHTML从对象的起始位置到终止位置的全部内容，包括HTML标签
<h1>我是h1标题，<span>我是span标签</span></h1>
<script>
var text = document.getElementsByTagName('h1')[0];
//innerText
console.log(text.innerText); //输出:我是h1标题，我是span标签
//innerHTML
console.log(text.innerHTML);//输出:我是h1标题，<span>我是span标签</span>
</script>
2、
elem.children和elem.childNodes区别在于前者children显示元素节点。而childNodes即显示元素节点也一同显示文本节点。
<h1>我是h1标题，<span>我是span标签</span></h1>
<h3>我是h3标题</h3>
<a href="#">我是a链接</a>
<script>
var elem = document.body;
console.log(elem.children); //输出[h1, h3, a, script]
console.log(elem.childNodes);//输出[text, h1, text, h3, text, a, text, script]
</script>
3、
//查询元素常见方式
var Id = document.getElementById(); //获取#id
var Class = document.getElementsByClassName(); //获取.class
var Tag = document.getElementsByTagName(); //获取标签
var Name = document.getElementsByName(); //获取名字
//ES5元素选择方式
var Obj = document.querySelector(); //获取元素，返回对象
var Array = document.querySelectorAll(); //获取元素，返回类数组
4、
//创建一个元素
var newDiv = document.createElement("div");
var newCont = document.createTextNode("我是Div标签")
//设置元素属性
newDiv.setAttribute("id","mydiv");
console.log(newDiv); //输出<div id="mydiv"></div>
//删除元素设置
newDiv.removeAttribute("id");
console.log(newDiv);//输出<div></div>;
//插入元素
newDiv.appendChild(newCont);
document.body.appendChild(newDiv); //输出<div>我是Div标签</div>
5、
<div id="oldDiv">
It's oldDiv
</div>
<script>
//获取body元素
var elem = document.body;
//创建元素节点
var newDiv = document.createElement("div");
//创建文本节点
var newCont = document.createTextNode("I's newDiv");
//newDiv插入文本节点
newDiv.appendChild(newCont);
//设置newDiv属性
newDiv.setAttribute("id",newDiv);
//页面添加newDiv元素
elem.appendChild(newDiv);
//创建元素节点
var oldSpan = document.createElement("span");
//创建文本节点
var oldCont = document.createTextNode("I's oldSpan");
//oldSpan插入文本节点
oldSpan.appendChild(oldCont);
//获取oldDiv并插入oldSpan子元素
var oldDiv = document.getElementById("oldDiv");
oldDiv.appendChild(oldSpan);
//删除oldDiv子元素节点和newDiv元素
oldDiv.removeChild(oldSpan);
elem.removeChild(newDiv);
</script>
6、
Element.classList 有以下方法。
contains(String) 检测元素的类属性中是否存在指定的值。
add(String[,String])添加指定的类值。如果已存在元素属性中的话那么它们则被忽略。
remove(String[,String])删除指定的类值。
item(Number)按集合中的索引返回类值。
toggle(String[,force])当只有一个参数时，即类值存在，则删除并返回false。如果不存在，则添加并返回true。
当存在第二参数时，第二参数计算结果为true，则添加指定的类值，计算结果为false，则删除它。
<div id="main" class="wrap">
<h1 class="header">header</h1>
<input type="button" name="btn" value="button">
<p id="para">paragraph <span> in a word..</span></p>
</div>
<script>
//获取元素节点
var main = document.getElementById("main");
var para = document.getElementById("para");
var mydiv = document.getElementsByTagName("div");
console.log(main); //输出<div id="main" class="warp">...</div>
//判断指定的类值是否存在
console.log(main.classList.contains("wrap")); //输出true
//添加单个类值
main.classList.add("clearfix");
console.log(main); //输出<div id="main" class="wrap clearfix">...</div>
//添加多个类值
main.classList.add("xx0","xx1");
para.classList.add("xx0","xx1");
console.log(main,para); //输出<div id="main" class="wrap clearfix xx0 xx1">...</div><p id="para" class="xx0 xx1">...</p>
//删除指定类值
main.classList.remove("xx0","xx1");
para.classList.remove("xx0","xx1");
console.log(main,para); //输出<div id="main" class="wrap clearfix">...</div><p id="para" class="">...</p>
//返回指定类值
console.log(main.classList.item(0)); //输出wrap
//当传入一个参数时，类值存在删除并返回false，类值不存在则添加并返回true
console.log(main.classList.toggle("wrap")); //false
console.log(main.classList.toggle("xx")); //true
//当传入两个参数时，第二参数为true时添加指定类值，如果为false则删除指定类值
main.classList.toggle("wrap",true);
console.log(main); //输出<div id="main" class="clearfix xx wrap">...</div>
main.classList.toggle("xx",false);
console.log(main);//输出<div id="main" class="clearfix wrap">...</div>
</script>
7、
<script>
var SelectorLi1 = document.getElementsByTagName("li");
console.log(SelectorLi1); //输出[li, li, li, li, li, li]
var SelectorLi2 = document.querySelectorAll("ul li");
console.log(SelectorLi2); //输出[li, li, li, li, li, li]
var btn0 = document.getElementsByTagName("button");
console.log(btn0[0]);
var btn1 = document.getElementsByClassName("btn");
console.log(btn1[0]);
var btn2 = document.querySelector(".btn");
console.log(btn2);
var btn3 = document.querySelectorAll(".btn");
console.log(btn3[0]);
</script>
querySelector()
var el1 = document.querySelector(".myclass"); Class 找到的是单个元素（只查找一个），不是数组；
var el2 = document.querySelector('#myParent'); ID
var el2 = document.querySelector('#myParent span')
如果用老方法找span（麻烦）：
这样就太简单了：
搞一个函数，用函数方便一些：
querySelectorAll()
querySelectorAll方法返回匹配指定的CSS选择器的所有节点，返回的是数组类型的对象。
elementList = document.querySelectorAll(selectors);
querySelectorAll方法的参数，可以是逗号分隔的多个CSS选择器，返回所有匹配其中一个选择器的元素。
var matches = document.querySelectorAll("div.note, div.alert");
上面代码返回class属性是note或alert的div元素。
