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选择器时，返回所有匹配其中一个的选择器匀元素）的元素节点
- querySeletor()
如何创建一个元素？如何给元素设置属性？如何删除属性
- 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>
