DOM操作

1 dom对象的innerText和innerHTML有什么区别?

innerText返回元素内的的文本内容,innerHTML返回元素内的HTML结构(不包括元素本身)

2 elem.children和elem.childNodes的区别?

elem.childNodes返回所有的子节点,包括HTML元素,属性,文本.
elem.childNodes只返回HTML元素节点

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

常见方法
getElementById() 通过ID查询元素
getElementsByClassName() 通过class查询元素
getElementsByTagName() 通过标签查询元素
getElementsByName() 通过选择有name属性的元素查询元素
es5
querySelector() 通过匹配指定的CSS选择器的元素节点查询元素
querySelectorAll() 通过匹配指定的CSS选择器的所有节点查询元素

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

创建元素
createElement()
设置元素属性
setAttribute()
删除属性
romoveAttribute()

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

添加子元素到元素末尾
appendChild()
删除页面元素下的子元素
removeChild()

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

方法
add():添加一个类名
item(index):查找第index个类名
remove(className):删除一个类名
contains(className):是否包含指定类名,返回布尔值

contains(className)判断一个元素的 class 列表中是包含某个 class,包含返回true,不包含返回false.

remove(className)用来删除一个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 list = document.getElementsByTagName('li');
console.log(list);
var btn = document.getElementsByClassName('btn');
console.log(btn);
var list1 = document.querySelectorAll('li');
console.log(list1);
var btn1 = document.querySelector(".btn");
console.log(btn1);