DOM基础（一）

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

innerText 与 innerHTML都是可以返回元素内包含的内容。
但是innerText返回的是元素内的文本内容。不包括HTML标签。
而innerHTML返回的内容是包含HTML标签的。使用outerHTML还可以返回自生元素的HTML标签。

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

elem.children获取到的是目标元素的所有元素子节点。
elem.childNodes获取到的是目标元素的所有元素子节点、文本节点、注释节点等内容。

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

getElementById()：返回指定id的元素
getElementsByClassName()：返回指定class的元素集
getElementsByTagName()：返回指定标签的元素集
getElementsByName()：返回指定name值的元素集
querySelector()：返回指定的css选择器的元素
querySelectorAll()：返回指定的css选择器的所有节点

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

var myDiv = document.createElement('div')
myDiv.setAttribute('id',ssr)//设置属性
myDiv//
myDiv.removeAttribute("id")//删除属性
myDiv//

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

var parents = document.getElementById("parents")
var myDiv = document.createElement("div")//创建元素节点
parents.appendChild(myDiv)//将myDiv插入到父元素中
parents.removeChild(myDiv)//将myDiv从父元素中删除

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

add( String [, String] )
添加指定的类值。如果这些类已经存在于元素的属性中，那么它们将被忽略。
remove( String [,String] )
删除指定的类值。
item ( Number )
按集合中的索引返回类值。
toggle ( String [, force] )
当只有一个参数时：切换 class value; 即如果类存在，则删除它并返回-
false，如果不存在，则添加它并返回true。
当存在第二个参数时：如果第二个参数的计算结果为true，则添加指定的类值，如果计算结果为false，则删除它
contains( String )
检查元素的类属性中是否存在指定的类值。

// div是具有class =“color str”的元素
div.classList.contains("color");
div.classList.remove("color");
div.classList.add("apple");

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

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

alert(div.classList.contains("color"));

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

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


   
       list1

       
list2

       
list3

var allLi = document.getElementsByTagName("li");
var btn = document.getElementsByClassName("btn")