DOM操作小记

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

innerText是一个可写属性，返回元素内包含的文本内容，在多层次的时候会按照元素由浅到深的顺序拼接其内容

innerHTML属性作用和innerText类似，但是不是返回元素的文本内容，而是返回元素的HTML结构，在写入的时候也会自动构建DOM

elem.children和elem.childNodes的区别？

element.children返回一个由子元素节点 (只是元素节点) 构成的集合
children 属性为只读属性，对象类型为 HTMLCollection，你可以使用 elementNodeReference.children[1].nodeName 来获取某个子元素的标签名称。

element.childNodes返回包含指定节点的子节点的集合,（是子节点不光是子元素节点）该集合为即时更新的集合为NodeList 类型，且为只读

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

document.getElementById()
如果没有查找到对应的元素，方法会返回null。注意ID参数是大小写敏感的，所以document.getElementById("Main")无法获取到元素

，因为'M'和'm'是不一样的。
getElementById方法不会搜索不在文档中的元素。当创建一个元素，并且分配ID后，你必须要使用insertBefore或其他类似的方法把元素插入到文档中之后才能使用 getElementById 获取到

document.getElementsByTagName()
方法返回一个动态的包含所有指定标签名的元素的HTML集合HTMLCollection。指定的元素的子树会被搜索，不包括元素自己。返回的列表是动态的，这意味着它会随着DOM树的变化自动更新自身。所以，使用相同元素和相同参数时，没有必要多次的调用Element.getElementsByTagName()

document.getElemenstByClassName()
返回一个类似数组的对象，包含了所有指定 class 名称的子元素（HTMLCollection类型的对象）。当调用发生在document对象上时, 整个DOM都会被搜索, 包含根节点。你也可以在任意元素上调用getElementsByClassName() 方法，它将返回的是以当前元素为根节点(搜索范围包含自己)，所有指定class名称的子元素。

document.getElementsByClassName('test shake');  class名称通过空格分隔

document.getElementsByName
用于选择拥有name属性的HTML元素，比如form、img、frame、embed和
object，返回一个NodeList格式的对象，不会实时反映元素的变化。

ES5
document.querySelector()返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。
document.querySelectorAll()querySelectorAll方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。

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

document.createElement('div') 

element.setAttribute('align','center')
如果属性已经存在，则更新该值; 否则将添加一个新的属性用指定的名称和值

element.removeAttribute('align')

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

Node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾
var child = node.appendChild(child);
node 是要插入子节点的父节点 child 即是参数又是这个方法的返回值.
appendChild 方法会把要插入的这个节点引用作为返回值返回哟
// 创建一个新的段落p元素,然后添加到body的最尾部
var p = document.createElement("p");
document.body.appendChild(p);

Node.removeChild() 方法从DOM中删除一个子节点。返回删除的节点
Node为参数的父节点 参数为要删除的节点
let oldChild = node.removeChild(child);
//OR
element.removeChild(child);
被移除的这个子节点仍然存在于内存中,只是没有添加到当前文档的DOM树中,因此,你还可以把这个节点重新添加回文档中
当然,实现要用另外一个变量比如上例中的oldChild来保存这个节点的引用. 如果使用上述语法中的第二种方法
即没有使用 oldChild 来保存对这个节点的引用, 则认为被移除的节点已经是无用的, 在短时间内将会被内存管理回收

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

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

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


  
   list1
   list2
   list3
  
  


  var allLi = document.getElementsByTagName('li')
  var theBtn = document.getElementsByClass('btn')

  document.querySelectorAll('li')
  document.querySelector('.btn')