任务23-DOM操作

题目1： dom对象的innerText和innerHTML有什么区别？

两个属性都是获取document对象的文本内容的。
innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。
innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。

同时，innerHTML 是所有浏览器都支持的，innerText 是IE浏览器和chrome 浏览器支持的，Firefox浏览器不支持。其实，innerHTML 是W3C 组织规定的属性；而innerText 属性是IE浏览器自己的属性，不过后来的浏览器部分实现这个属性罢了。

innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器（现在也适应chrome浏览器），因此，尽可能地去使用 innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签。

innerHTML.replace(/<[^>]*>/gim,"")

题目2： elem.children和elem.childNodes的区别？

childNodes 属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本，注释。
children 属性，它返回指定元素的子元素集合。它只返回HTML节点，不返回文本节点。

题目3：查询元素有几种常见的方法？ES5的元素选择方法是什么?

getElementById方法返回匹配指定ID属性的元素节点。如果没有发现匹配的节点，则返回null。这也是获取一个元素最快的方法

getElementsByClassName方法返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素（搜索范围包括本身），元素的变化实时反映在返回结果中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。
getElementsByClassName方法的参数，可以是多个空格分隔的class名字，返回同时具有这些节点的元素。

getElementsByTagName方法返回所有指定标签的元素（搜索范围包括本身）。返回值是一个HTMLCollection对象，也就是说，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。

getElementsByName方法用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会实时反映元素的变化。
注意，在IE浏览器使用这个方法，会将没有name属性、但有同名id属性的元素也返回，所以name和id属性最好设为不一样的值。

querySelector和querySelectorAll，这两个方法是ES5中新增的，他们的作用就想jq的选择器一样，你可以使用像css风格那样的描述来选择所需的元素
querySelector方法返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。

querySelectorAll方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。
querySelectorAll方法的参数，可以是逗号分隔的多个CSS选择器，返回所有匹配其中一个选择器的元素。

题目4：如何创建一个元素？如何给元素设置属性？如何删除属性

document.createElement()方法生成一个新的Html元素节点，接受一个参数，即要创建的元素名，返回创建的元素节点。

var div = document.createElement("div");//

elem.getAttribute()方法获取元素属性，参数为属性名称。
elem.setAttribute()方法设置元素属性，参数为两个字符串，前者为属性名称，后者为属性值。

var div = document.createElement("div");//新建元素
var attr =document.createAttribute("class");//生成一个新的属性对象class
attr.value ="warp";//设置calss属性值为"warp"
div.setAttributeNode(attr);//将attr属性对象设置给div
//或者
var div1 = document.createElement("div");//新建元素或已存在属性。
div1.setAttribute("class","warp");//用于设置元素属性class及其值"warp"

elem.removeAttribute()用于删除元素属性。

div.removeAttribute("class");

题目5：如何给页面元素添加子元素？如何删除页面元素下的子元素?

appendChild向一个元素添加子节点，追加在尾部。

var div1 = document.createElement('div');
div1.innerHTML = '我是父节点';
var div2 = document.createElement('div');
div2.innerHTML = '我是子节点';
div1.appendChild(div2);
var div3 = document.createElement("div")
div3.innerHTML = "我插队";
div1.insertBefore(div3,div1.firstChild);

insertBefore也是向一个元素添加子节点，不过可以指定添加在哪个子节点的前面，如果不指定第二个参数，会默认添加到最后，即与appendChild效果一样。

removeChild();//删除子元素
//----------------------
var div =document.getElementByTagName("div");
div.removeChild(div.childNodes[i]);//i为子元素序号

题目6： element.classList有哪些方法？如何判断一个元素的 class 列表中是包含某个 class？如何添加一个class？如何删除一个class?

add(value):将指定的字符串值添加到列表中。如果值已经存在，就不添加了。
contains(value):表示列表中是否存在给定的值，如果存在则返回true，否则返回false。
item(index)返回索引值对应的元素类名
remove(value)：从列表中删除指定的字符串类名。
toggle(value)一个参数时，如果列表中已经存在给定的类名值，删除它,返回false；如果列表中没有给定的值，添加它,返回ture。
toggle(value1，value2)二个参数时，如果value2为turn,则添加value1类名值，如果value2为false,则删除类名值为value1的类名。

题目7： 如何选中如下代码所有的li元素？ 如何选中btn元素？

<div class="mod-tabs">
   <ul>
       <li>list1<li>
       <li>list2<li>
       <li>list3<li>
   </ul>
   <button class="btn">点我</button>
</div>
//------------------------
var li = document.getElementByTagName("li");
var btn =document.getElementBycClassName("btn")
//或者
var li = document.querySelectorAll(".mod-tabs li");
var btn = document.querySelectorAll(".btn")