dom操作

所有节点共有的属性：

 

nodeType: 返回的是数字，每一个数字代表一种节点类型。

 

nodeName：对于元素节点，返回的是元素的标签名。

 

nodeValue：对于元素节点，返回的始终是null。对于文本节点返回的是文本内容（可以直接赋值设置）。

节点关系：

 

childNodes：返回的是所有的子节点，数据结构类似于数组的NodeList对象。可以像数组一样使用索引取值。

 

children：返回的是所有的元素元素的元素子节点。

 

childElementCount：返回子元素的个数。

 

parentNode：返回的是节点的父节点。

 

previousSibling: 节点的前一个同级节点。

 

previousElementSibling：指向前一个同辈元素。

 

nextSibling: 节点的下一个同级节点。

 

nextElementSibling：指向后一个同辈元素。

 

firstChild: 节点的第一个子节点。

 

firstElementChild：指向第一个子元素。

 

lastChild: 节点的最后一个子节点。

 

lastElementChild：指向最后一个子元素。

 

 

元素操作：

 

appendChild：向元素的childNodes的NodeList最后面添加上一个元素。如果元素是已经是文档的一部分，那只是换位置，不会增加相同的元素。返回的是添加的那个元素。

 

insertBefore：将元素的childNodes的NodeList中插入一个节点，接受两个参数，要被插入的节点，和作为参考位置的节点。将插入的节点放在参考位置节点的前面。新节点被返回。

 

replaceChild：将元素的childNodes的NodeList中的某个元素替换。接受两个参数，要插入的节点，和要被替换的节点。这个方法返回要被替换的节点。

 

removeChild：将元素的childNodes的NodeList的某个元素删除。这个方法接受一个参数，即要被删除的元素。返回的是值是被删除的节点。

 

cloneNode：将元素进行复制，这个方法接受一个Boolean值，如果是true，复制元素包括子节点。否则只是复制元素本身。复制的元素需要通过以上的方法才能在文档中显示。不会复制js的事件处理程序。

 

Document:

 

document：是HTMLDocument（继承自Document）的实例，表示整个html页面。

 

document.documentElement：取到的是html元素。

 

document.body：取到的是body元素。

 

document.title: 取到的是文档的标题，可以直接给它赋值来修改标题。

 

元素属性：

 

HTMLElement:所有的元素都通过这个类型或者它的子类型来表示，它继承自Element并添加了一些属性。添加了这么几个属性：id、title、lang（元素内部的语言代码）、dir（语言的方向，从左到右ltr或者从右到左rtl。这里影响的是对齐方式）、className。这些属性所有的元素都都存在。并且可以通过赋值直接修改这些属性。

 

元素的特性：所有公认的属性都可以直接通过元素获取。自定义的不行。一般自定的属性都通过getAttribute方法。设置自定义属性也需通过setAttribute，否则不生效。

 

 

attributes：这个属性包含了元素的所有特性，每个节点的nodeName就是特性的名称。nodeValue就是就是特性的值。

 

getNamedItem（name）：返回nodeName属性等于name的节点。

 

removeNamedItem（name）：从列表中删除nodeName属性等于name的节点。会返回删除的节点。

 

setNamedItem（node）：向列表添加节点，以节点的nodeName属性为索引。

 

item（pos）：返回位于数字pos位置处的节点。

 

 

获取某个元素的文本可以这样获取：document.getElementById(‘a’).childNodes[0].nodeValue。直接赋值可以修改其内容

 

通过data-xx设置的属性可以直接通过该元素的dataset属性访问到，也可以直接通过这个dataset属性给元素增加data-xx格式的属性。

 

元素查询：

 

querySelector: 接收css选择符，返回与该模式匹配的第一个元素。可以用在元素上，作用于该元素的后代元素。

 

querySelectorAll: 接收css选择符，但是返回的是一个nodeList的实例的快照，即不会动态的随着增加删除元素而改变。

 

操作class：

 

classList：返回给定元素的所有class，它内部的方法可以操作className。

 

add：将给定的字符串添加到列表中。

 

contains：表示列表中是否存在给定的值，存在返回true，否则返回false。

 

remove：从列表中删除给定的字符串。

 

toggle：如果列表存在给定的值，那就删除，否则的话添加。

 

 

焦点管理：

 

document.activeElement：这个属性始终会引用dom中当前获得了焦点的元素。

 

document.hasFocus：这个方法用于确定文档是否获得了焦点。

 

focus: 给某个元素获取到焦点。

 

 

滚动到指定元素：

 

scrollIntoView：这个方法可以使用任何元素调用，调用以后页面滚动到指定元素。如果传入了true或者不传，将滚动到元素的最顶部与页面对齐，如果传入false元素会尽可能的全部出现在页面中。

 

scrollIntoViewIfNeeded：只有在视口中不可见的情况下，才滚动浏览器窗口或者容器元素，否则什么也不做，，如果传入true，则尽量将元素显示在视口中部。(兼容性不是很好，专有扩展)