DOM操作

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

• innerText返回的是元素内的纯文本内容，多层次时由浅入深的排序内容
• innerHTML返回是该元素文本内容和内部标签及内容

js-console

2、elem.children和elem.childNodes的区别？

console

DOM中，children是文档对象中的子对象，不包含tag之间隐形存在的textNode，而childNodes包括tag之间的隐形存在的textNode对象

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

• 查询元素的常见方法

getElementById()             //返回一个指定ID属性的元素节点
getElementByTagName()        //返回一个对象数组，每个对象分别对应文档有着给定标签的一个元素
getElementByClassName()      //返回一个具有相同类名的元素的数组
getElementsByName()          //返回拥有name属性的HTML元素           

• ES5的元素选择方法

querySelector()      //返回指定的CSS选择器的元素节点
querySelectorAll()     //返回指定的CSS选择器的所有节点

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

• 创建元素：createElement()生成HTML元素节点
• 获取元素属性值：getAttribute()
• 设置元素属性值：setAttribute()
• 删除元素属性：removeAttribute()

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

appendChild()         //在元素末尾添加元素
insertBefore()        //在某个元素之前插入元素
removeChild()         //删除某元素下的子元素
replaceChild()        //可以接受两个参数，要插入的元素和要替换的元素

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

element.classList.contains(class)           //返回布尔值，判断指定的类名是否存在
element.classList.add(class1,class2,...)             //在元素中添加一个或多个不存在的类名
element.classList.remove(class1,class2,...)  
//在元素中移除一个或多个类名
element.classList.item(index)
//返回索引值对应的元素类名。从 0 开始，在区间范围外则返回 null。

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

例子

解答