进阶任务8

题目：

题目1： dom对象的innerText和innerHTML有什么区别？
题目2： elem.children和elem.childNodes的区别？
题目3：查询元素有几种常见的方法？ES5的元素选择方法是什么?
题目4：如何创建一个元素？如何给元素设置属性？如何删除属性
题目5：如何给页面元素添加子元素？如何删除页面元素下的子元素?
题目6： element.classList有哪些方法？如何判断一个元素的 class 列表中是包含某个 class？如何添加一个class？如何删除一个class?
题目7： 如何选中如下代码所有的li元素？ 如何选中btn元素？

   

       
list1

       
list2

       
list3

   
   点我

答案：

1、
innerText从对象的起始位置到终止位置的文本内容，去除了HTML标签
innerHTML从对象的起始位置到终止位置的全部内容，包括HTML标签

我是h1标题，我是span标签

2、
elem.children和elem.childNodes区别在于前者children显示元素节点。而childNodes即显示元素节点也一同显示文本节点。

我是h1标题，我是span标签
我是h3标题
我是a链接

3、

//查询元素常见方式
var Id = document.getElementById(); //获取#id
var Class = document.getElementsByClassName(); //获取.class
var Tag = document.getElementsByTagName(); //获取标签
var Name = document.getElementsByName(); //获取名字

//ES5元素选择方式
var Obj = document.querySelector(); //获取元素，返回对象
var Array = document.querySelectorAll(); //获取元素，返回类数组

4、

//创建一个元素
var newDiv = document.createElement("div");
var newCont = document.createTextNode("我是Div标签")
//设置元素属性
newDiv.setAttribute("id","mydiv");
console.log(newDiv); //输出

//删除元素设置
newDiv.removeAttribute("id");
console.log(newDiv);//输出
;
//插入元素
newDiv.appendChild(newCont);
document.body.appendChild(newDiv); //输出
我是Div标签

5、

    It's oldDiv

6、
Element.classList 有以下方法。
contains(String) 检测元素的类属性中是否存在指定的值。
add(String[,String])添加指定的类值。如果已存在元素属性中的话那么它们则被忽略。
remove(String[,String])删除指定的类值。
item(Number)按集合中的索引返回类值。
toggle(String[,force])当只有一个参数时，即类值存在，则删除并返回false。如果不存在，则添加并返回true。
当存在第二参数时，第二参数计算结果为true，则添加指定的类值，计算结果为false，则删除它。

   
header
   
   
paragraph  in a word..

7、

querySelector()
var el1 = document.querySelector(".myclass"); Class 找到的是单个元素（只查找一个），不是数组；

Paste_Image.png

var el2 = document.querySelector('#myParent'); ID
var el2 = document.querySelector('#myParent span')

如果用老方法找span（麻烦）：

Paste_Image.png

Paste_Image.png

这样就太简单了：

Paste_Image.png

搞一个函数，用函数方便一些：

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

querySelectorAll()

querySelectorAll方法返回匹配指定的CSS选择器的所有节点，返回的是数组类型的对象。

elementList = document.querySelectorAll(selectors);
querySelectorAll方法的参数，可以是逗号分隔的多个CSS选择器，返回所有匹配其中一个选择器的元素。

var matches = document.querySelectorAll("div.note, div.alert");
上面代码返回class属性是note或alert的div元素。