DOM

DOM 对象的innerText和innerHTML有什么区别

• innerText
  innerText是一个可写属性，返回元素中包含的文本内容，在多层次的时候会按照元素之间的包含顺序拼接文本内容
• innerHtml
  在读模式下，innerHtml返回调用元素的所有子节点对应的HTML的标记；在写模式下，会根据指定的值自动构建DOM树，替换原来DOM树

elem.children和elem.childNodes的区别

• children
  children属性是一个非标准的，他返回指定元素的子元素的集合（只返回HTML节点）
• childNodes
  childNodes接口包含特定于Node对象的方法，标准的，返回指定元素的子元素集合（HTML节点、属性、文本），通过nodeType判断节点的类型

var message = document.getElementById('test')
console.log(message.childNodes)
console.log(message instanceof Element)
console.log(message instanceof Node)
console.log(message.nodeType == 1)

console.log(message.children)
console.log(message instanceof Element)
console.log(message instanceof Node)

结果

查询元素有几种常见的方法？ES5的元素选择方法是什么

• getElementById()
  返回匹配指定ID属性的元素节点。匹配不到则返回null
• getElementByClassName()
  返回指定class名字（可以是多个class名，用空格分隔）的类数组的对象，而且遇上你素的变化同步反映在返回结果中，不仅可以在document对象上调用也可以在任何他元素节点上调用
• getElementByTagName()
  返回指定标签的元素，由于返回值是一个HTMLCollection对象，所以元素的变化会实时反映在返回的集合中不仅可以在document对象上调用也可以在任何他元素节点上调用
• getElementByName()
  匹配拥有name属性的HTML元素，返回一个NodeLIst格式的对象，不能实时反映元素的变化（IE浏览器中使用该方法会返回没有name属性却拥有同名id属性的元素，所以做到name和id尽量不同名）
• ES5中的元素选择方法
  • querySeletor()
    返回匹配指定的css选择器的元素节点（无法匹配到伪元素）
  • qureySeletorAll()
    返回匹配到的所有指定css选择器（当参数是多个用，分隔的的css选择器时，返回所有匹配其中一个的选择器匀元素）的元素节点

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

• createElement()
  生成HTML元素节点
• createTextNode()
  生成文本节点
• createDocumentFragment()
  生成一个DocumentFragment对象
• 设置元素的属性
  • getAttribute()获取元素的属性值
  • creatAttribute()生成一个新的属性对象节点，并返回
  • setAttribute()设置元素属性、
  • removeAttribute()删除元素属性

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

• appendChild()在元素末尾添加元素
• insertBefore()在某个元素前插入元素
• removeChild()删除元素

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

var nodeBt = document.querySelector('.bt')
console.log(nodeBt.classList)
nodeBt.classList.add('cn')  //新增class
nodeBt.classList.remove('cn')  //删除切换
nodeBt.classList.toggle('csn')  // 新增/删除切换
console.log(nodeBt.classList.contains('csn')) //判断是否拥有 class ‘csn’

如何选中如下代码所有的li元素？ 如何选中btn元素

<div class="mod-tabs">
   <ul>
       <li>list1</li>
       <li>list2</li>
       <li>list3</li>
   </ul>
   <button class="btn">点我</button>
</div>
<script>
    document.querySelectorAll('li')
     document.querySelector('.btn')
</script>