查找DOM节点
- getElementById()
- getElementsByTagName()
- getElementByName()
- getElementsByClassName()-----htmlCollection对象
- querySelector()
- querySelectorAll()-------NodeList对象（entries,forEach,keys,values方法）
- HTMLCollection 返回的对象是实时的，如果动态添加元素，前四种会主动更新，后两种不会
节点关系操作
- childrenNodes 返回nodeList对象，获取子节点
- firstChild 获 取第一个子节点
- lastChild获 取最后一个节点
- previousSibling 获取兄弟节点的前一个节点，没有则为null
- nextSibling 获取兄弟节点的后一个节点，没有则为null
- parentNode 获取父节点
- hasChildNodes 判断是否有子节点
- children 返回HTMLCollection对象，获取元素子节点---从这里开始不包括文本节点
- firstElementChild 获取的第一个子节点
- lastElementChild 获取最后一个子节点
- previousElementSibling获取兄弟节点的上一个节点，没有则为null
- nextElementSibling 获取兄弟节点后一个节点,没有则为null
- childrenElementCount 获取元素节点个数
节点操作
- createElement 创建新元素
- createTextNode 创建文字节点
- appendChild 节点末尾插入元素。若该元素存在，相当于把该元素移动到末尾。
- replaceChild 替换元素
- removeChild 移除元素
6.parentElement.removeChild(element) - element.parentNode.removeChild(element)
- cloneNode 复制元素，参数为true表示深度复制，子元素也会被克隆。
- innerHtml表示该元素内部的html内容；设置值，则替换该元素内部的全部元素
- outerHtml 直接访问表示该元素（包括自身）的html内容，设置值，则替换该元素内容，包括该元素。比上一个多一个自己,内容是代码和内容
- textContent,innerText 光是内容，没有代码
- createDocumentFragment 为了减少DOM操作，改善性能，可以先添加到这一个里面，然后统一添加到页面。
元素属性####
- tagName 元素名称
- id
- title
- className
- style
属性操作####
- getAttribute()
- setAttribute()
- removeAttribute()
- 这几个方法会导致浏览器重绘。
- classList DOM元素的实例，有以下方法
- 可读属性 length
- 操作属性 item(index) 按照索引寻找class ,add(),remove(),contains(),remove(),toggle()
- 操作class现在有四种方法.setAttribute(),className,classList,style
- style操作
- 对于属性名，驼峰。只包含定义在元素上的属性，不包含内联和外部的样式
- style.cssText:获取或设置多个属性
