DOM操作

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

• innerText是一个可写属性, 返回元素内包含的文本内容,不包括标签, 在多层次的时候会按照元素由浅到深的顺序拼接其内容; 设定innerText值时,即便输入的内容是HTML标签, 也会以文本形式显示; 安全性比使用innerHTML显示用户输入的内容要高
• innerHTML属性作用与innerText类似, 但不是返回元素的文本内容, 而是返回元素的HTML结构,包括HTML标签和文本内容; 设定innerHTML值时如果输入的内容中包含HTML标签, 则会以HTML形式解析

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

• elem.children只会返回以HTML标签形成的节点
• elem.childNodes会返回包括文本, 注释在内的所有节点; 使用时容易出现问题, 因此多用elem.children

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

• getElementById(): 查询含指定id的元素节点, 返回单个对象,如果没有发现匹配的节点，则返回null。
• getElementByClassName(): 查询含指定class的元素节点, 可以是多个空格分隔的class名字，返回同时具有这些节点的元素。
• getElementByTagName(): 查询标签为指定tag的元素节点(搜索范围包括本身), 返回所有符合条件的元素节点组成的类数组对象; 注意，getElementsByTagName方法会将参数转为小写后，再进行搜索。
• getElementByName(): 查询name属性值为指定name的元素节点, 返回所有符合条件的元素节点组成的类数组对象
  ES5:
• querySelector(): 查询匹配指定的CSS选择器的元素节点, 返回第一个符合条件的对象; 如果没有发现匹配的节点，则返回null。
• querySelectorAll(): 返回所有符合条件的的元素节点组成的类数组对象, querySelectorAll方法的参数，可以是逗号分隔的多个CSS选择器，返回所有匹配其中一个选择器的元素。

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

• createElement()
  createElement方法用来生成HTML元素节点。

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

createElement方法的参数为元素的标签名，即元素节点的tagName属性。如果传入大写的标签名，会被转为小写。如果参数带有尖括号（即<和>）或者是null，会报错。

• setAttribute()

setAttribute()方法用于设置元素属性

var node = document.getElementById("div1");
node.setAttribute("my_attrib", "newVal");

• romoveAttribute()

removeAttribute()用于删除元素属性

node.removeAttribute('id');

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

• appendChild()

在元素末尾添加元素

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);

• insertBefore()

在某个元素之前插入元素

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);

• 删除元素使用removeChild()方法即可

parentNode.removeChild(childNode);

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

var nodeBox = document.querySelector('.box')
console.log( nodeBox.classList )
nodeBox.classList.add('active')   //新增 class
nodeBox.classList.remove('active')  //删除 class
nodeBox.classList.toggle('active')   //新增/删除切换
node.classList.contains('active')   // 判断是否拥有 class

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

<div class="mod-tabs">
   <ul>
       <li>list1</li>
       <li>list2</li>
       <li>list3</li>
   </ul>
   <button class="btn">点我</button>
</div>
var oTab = document.getElementsByClassName('mod-tabs');
  var aLi = oTab.getElementByTagName('li');
  var oBtn = document.getElementsByClassName('btn');
  //ES5
  var oTab = document.querySelectorAll('.mod-tabs li');
  var oBtn = document.querySelector('.btn');