DOM操作

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

• innerText是一个可写属性，返回元素内包含的文本内容，在多层次的时候会按照元素由浅到深的顺序拼接其内容
• innerHTML属性作用和innerText类似，但是不是返回元素的文本内容，而是返回元素的HTML结构，在写入的时候也会自动构建DOM‘

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

• element.children只输出普通的DOM元素；
• element.childNodes会输出所有的子元素，包括文本节点、文字；
  大多数情况下我们应该使用element.children；

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

getElementById()
getElementsByClassName()
getElementsByTagName()
getElementsByName()

ES5元素选择方法

querySelectorAll()
querySelector()

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

• document.createElement()方法用来生成HTML元素节点。
• element.setAttribute()方法用于设置元素属性
• element.removeAttribute()用于删除元素属性

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

• document.appendChild()在元素末尾添加元素
• document.removeChild()删除元素

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

• element.classList 是一个只读属性，返回一个元素的类属性的实时 DOMTokenList集合。
• add(className)：添加类
• remove(className)：删除类
• contains(className)：是否包含指定类名，返回布尔值
• toString()：将类数组对象转为字符串
• element.classList.contains(className)：判断是否包含且返回布尔值
• element.classList.add(className)：添加类
• 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>

获取li

• document.getElementsByTagName("li");
• document.querySelectorAll('li')

选中btn

• document.querySelector('.btn')
• document.getElementsByTagName('button')
• document.getElementByClassName('btn')