DOM（原生）

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

Element.innerHTML 属性设置或获取描述元素后代的HTML语句。Element.innerText innerText是一个可写属性，返回元素内包含的文本内容，在多层次的时候会按照元素由浅到深的顺序拼接其内容

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

    
        
        
    
    
        

            ddd
            span标签
            
111p标签
        
    

Paste_Image.png

通过对比我们可以发现
children：子元素列表（HTMLCollection），当前元素的子元素的集合
childNodes：子元素列表（NodeList），当前元素的子元素以及文本(空格也算文本)的集合

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

getElementById()getElementById方法返回匹配指定ID属性的元素节点。如果没有发现匹配的节点，则返回null。这也是获取一个元素最快的方法
var elem = document.getElementById("test");
诸如此类的还有getElementByClassName()、getElementsByTagName()、getElementsByName()、querySelector()

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

通过createElement()方法创建元素。通过元素的setAttribute()方法给元素设置属性。通过元素的removeAttribute()删除属性。

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

appendChild()
insertBefore()
removeChild()

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

只支持ie10以上（一般用不了）

定义和用法
classList 属性返回元素的类名。
该属性用于在元素中添加，移除及切换 CSS 类。
classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。

语法
element.classList
Properties
属性 Description
length 返回类列表中类的数量 该属性是只读的

方法
方法 描述
add(class1, class2, ...) 在元素中添加一个或多个类名。
如果指定的类名已存在，则不会添加

contains(class) 返回布尔值，判断指定的类名是否存在。
可能值：
true - 元素包已经包含了该类名
false - 元素中不存在该类名

item(index) 返回类名在元素中的索引值。索引值从 0 开始。
如果索引值在区间范围外则返回 null

remove(class1, class2, ...) 移除元素中一个或多个类名。
注意： 移除不存在的类名，不会报错。

toggle(class, true|false) 在元素中切换类名。
第一个参数为要在元素中移除的类名，并返 回 false。
如果该类名不存在则会在元素中添加类名，并返回 true。

// div是具有class =“foo bar”的
元素的对象引用
div.classList.remove("foo");
div.classList.add("anotherclass");

// 如果visible被设置则删除它，否则添加它
div.classList.toggle("visible");

// 添加/删除 visible，取决于测试条件，i小于10
div.classList.toggle("visible", i < 10);

//返回布尔值，判断指定的类名是否存在。
alert(div.classList.contains("foo"));

//添加或删除多个类
div.classList.add("foo","bar");
div.classList.remove("foo", "bar");

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

   

       
list1
       
list2
       
list3
   
   点我