2019-03-18 关于DOM

积累最近用到过的DOMapi

1. 节点创建型
   1.1 createElement
   createElement通过传入指定的一个标签名来创建一个元素，如果传入的标签名是一个未知的，则会创建一个自定义的标签
   var div = document.createElement("div");
   使用createElement要注意：通过createElement创建的元素并不属于html文档，它只是创建出来，并未添加到html文档中，要调用appendChild或insertBefore等方法将其添加到HTML文档树中。
2. 页面修改型api
   2.2 appendChild
   将指定的节点添加到调用该方法的节点的子元素的末尾。
   parent.appendChild(child);
   如果被添加的节点是一个页面中存在的节点，则执行后这个节点将会添加到指定位置，其原本所在的位置将移除该节点，也就是说不会同时存在两个该节点在页面上，相当于把这个节点移动到另一个地方。
   2.3 removeChild
   removeChild顾名思义，就是删除指定的子节点并返回
   var deletedChild = parent.removeChild(node);
   deletedChild指向被删除节点的引用，它等于node，被删除的节点仍然存在于内存中，可以对其进行下一步操作。
   如果被删除的节点不是其子节点，则程序将会报错。
3. 节点查询型api
   3.1 document.getElementById
   根据元素id返回元素，返回值是Element类型，如果不存在该元素，则返回null。
   使用这个接口有几点要注意：
   （1）元素的Id是大小写敏感的，一定要写对元素的id
   （2）HTML文档中可能存在多个id相同的元素，则返回第一个元素
   （3）只从文档中进行搜索元素，如果创建了一个元素并指定id，但并没有添加到文档中，则这个元素是不会被查找到的
   3.2 document.querySelector和document.querySelectorAll
   这两个api很相似，通过css选择器来查找元素，注意选择器要符合CSS选择器的规则。
   首先来介绍一下document.querySelector。
   document.querySelector返回第一个匹配的元素，如果没有匹配的元素，则返回null。
   document.querySelectorAll的不同之处在于它返回的是所有匹配的元素，而且可以匹配多个选择符
4. 节点关系型api
   4.1 父关系型api
   parentNode：每个节点都有一个parentNode属性，它表示元素的父节点。Element的父节点可能是Element，Document或DocumentFragment。
   parentElement：返回元素的父元素节点，与parentNode的区别在于，其父节点必须是一个Element，如果不是，则返回null
   4.2 兄弟关系型api
   previousSibling：节点的前一个节点，如果该节点是第一个节点，则为null。注意有可能拿到的节点是文本节点或注释节点，与预期的不符，要进行处理一下。
   previousElementSibling：返回前一个元素节点，前一个节点必须是Element，注意IE9以下浏览器不支持。
   nextSibling：节点的后一个节点，如果该节点是最后一个节点，则为null。注意有可能拿到的节点是文本节点，与预期的不符，要进行处理一下。
   nextElementSibling：返回后一个元素节点，后一个节点必须是Element，注意IE9以下浏览器不支持。
   4.3 子关系型api
   childNodes：返回一个即时的NodeList，表示元素的子节点列表，子节点可能会包含文本节点，注释节点等。
   children：一个即时的HTMLCollection，子节点都是Element，IE9以下浏览器不支持。
   firstNode：第一个子节点
   lastNode：最后一个子节点
   hasChildNodes方法：可以用来判断是否包含子节点。
5. 元素样式型api
   5.1 getBoundingClientRect
   getBoundingClientRect用来返回元素的大小以及相对于浏览器可视窗口的位置
   clientRect是一个DOMRect对象，包含left，top，right，bottom，它是相对于可视窗口的距离，滚动位置发生改变时，它们的值是会发生变化的。