task8

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

innerText只返回子元素标签内部的文本，不会返回标签，innerHTML会返回HTML代码，包括了子元素的标签。

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

elem.childNodes: 返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点。可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。
elem.childNodes: 它返回指定元素的直接子元素集合，只返回HTML节点。

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

• getElementById("id") 返回一个匹配特定ID的元素。只能在document上使用，不能在element上使用
• getElementsByClassName("classname") 返回一个类似数组的对象，包含了所有指定 class 名称的子元素。当调用发生在document对象上时, 整个DOM都会被搜索, 包含根节点。你也可以在任意元素上调用getElementsByClassName方法，它将返回的是以当前元素为根节点，所有指定class名称的子元素。

  <div class="num1">something here</div>
  <div class="num2">something there</div>
  <div class="num1 num2">common</div>

var arr = document.getElementsByClassName("num1 num2")
console.log(arr[0].innerHTML);

"common"

• getElementsByTagName("tagname") 返回一个包括所有给定标签名称的元素的HTML集合HTMLCollection 。整个文件结构都会被搜索，包括根节点。返回的 HTML集合是动态的, 意味着它可以自动更新自己来保持和 DOM 树的同步而不用再次调用 document.getElementsByTagName()
• getElementsByName("name") 根据给定的name返回一个在 (X)HTML document的节点列表集合。name是元素的一个属性，需要自己设置。只能在document中使用，不能在element中使用。

ES5:

• querySelector("selector") 返回文档中匹配指定的选择器组的第一个元素。
• querySelectorAll("selector") 返回与指定的选择器组匹配的文档中的元素列表 。返回的对象是NodeList 。

<div class="num1">something here</div>
<div class="num2">something there</div>
<div class="num1 num2">common</div>

var ele = document.querySelector(".num1");
console.log(ele.innerHTML)
var elearr = document.querySelectorAll(".num1");
console.log(elearr[0].innerHTML,elearr[1].innerHTML);

"something here"
"something here"
"common"

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

• document.createElement("div");
  创建指定的html元素

• document.createTextNode("some words");
  创建指定的文本节点，文本节点可以被拼接至已有的文本之后。

• document.createDocumentFragment();
  创建一个新的空白的文档片段,可以将想要添加的元素先加入文档片段，然后把文档片段加入DOM树。由于每次向DOM树中添加元素都会引起重排，所以先把要加入DOM树中的元素加入到文档片段中，然后把文档片段加入DOM树的做法可以起到优化性能的作用。在DOM树中，文档片段被其所有的子元素所代替。

• element.setAttribute(name,value);
  设置指定元素上的一个属性值。
  如果属性已经存在，则更新该值; 否则将添加一个新的属性用指定的名称和值。

• element.removeAttribute(attrName)
  removeAttribute() 从指定的元素中删除一个属性。

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

• 添加子元素:
  parentNode.appendChild(childNode); 将childNode插入到父节点最后
  parentNode.insertBefore(node1,node2); 将node1插入到node2之前
• 删除子元素:
  parentNode.removeChild(childNode); 删除parentNode下的childNode

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

• add( String [, String] )
  添加指定的类值。如果这些类已经存在于元素的属性中，那么它们将被忽略。

• remove( String [,String] )
  删除指定的类值。

• item ( Number )
  按集合中的索引返回类值。

• toggle ( String [, force] )
  当只有一个参数时：切换 class value; 即如果类存在，则删除它并返回false，如果不存在，则添加它并返回true。
  当存在第二个参数时：如果第二个参数的计算结果为true，则添加指定的类值，如果计算结果为false，则删除它

• contains( String )
  检查元素的类属性中是否存在指定的类值。

• 如何判断一个元素的 class 列表中是包含某个 class？

element.classList.contains("classname");

• 如何添加一个class？

element.classList.add("classname");

• 如何删除一个class?

element.classList.remove("classname");

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

<div class="mod-tabs">
   <ul>
       <li>list1</li>
       <li>list2</li>
       <li>list3</li>
   </ul>
   <button class="btn">点我</button>
</div>

var arr1 = document.querySelectorAll("li");
var arr2 = document.getElementsByTagName("li");
var foo1 = document.querySelector(".btn")
var foo2 = document.getElementsByClassName("btn")[0];