document

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

innerText返回元素内的的文本内容，innerHTML返回元素内容包括标签

elem.children和elem.childNodes的区别？

childNodes是子节点列表集合（包括空白字符等非元素类型的节点如文本节点）,children是只获取元素类型的节点，（但在IE中，children包含注释节点）。这样通过数组的下标更能精准的访问每一个子节点.

Snip20170403_8.png

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

getElementById() 匹配指定ID属性的元素节点
getElementsByClassName() 匹配一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素（搜索范围包括本身）
getElementsByName() 用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会实时反映元素的变化。
getElementsByTagName() 匹配有指定标签的元素（搜索范围包括本身）。返回值是一个HTMLCollection对象
ES5的方法：
querySelector() 匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。
querySelectorAll() 匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。
封装一个选择器函数
function $(str) {
if (str.length > 0 && str[0] === '#') {
return document.querySelector(str);
}else {
return document.querySelectorAll(str);
}
}

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

首先创建一个元素,document.createElement();
然后设置一个属性,setAttribute(attributeName,attributeValue);
删除一个属性,removeAttribute(attributeName);

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

appendChild()方法在元素末尾添加元素
removeChild()方法可用于删除某元素下的子元素
insertBefore(newelem,oldelem)方法在某个元素之前插入元素
当然这些是基于父级节点元素的应用.

6.element.classList有哪些方法？如何判断一个元素的 class 列表中是包含某个 class？如何添加一个class？如何删除一个class?
>>
classList这个属性用于返回元素的类名，作为 DOMTokenList 对象，该属性用于在元素中添加，移除及切换 CSS 类，classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。
如何判断一个元素的class是否包含某个class,classList.contains('xxx');
添加一个,classList.add('');
如何删除一个,classList.remove('')；
当然还可以切换者用,classList.toggle('');
当然还有，item()索引.

var ele = document.createElement('div');
ele.setAttribute('class','leftbar first');
ele.classList //['left','first']
ele.classList.add('float') //添加一个类
ele.classList.contains('leftbar') //是否包含leftbar返回true
ele.classList.remove('leftbar') //删除类
ele.classList.toString() //将类数组对象转为字符串
判断class列表中是否包含某个class:利用contains方法。

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

var li = document.getElementsByTagName('li');
或者 var li = document.querySelectorAll('li'),
当然这样返回的是NodeList对象的一个实例。
var btn = document.getElementsByClassName('btn');
var btn = document.querySelector('.btn')

document

推荐阅读更多精彩内容