DOM操作，HTMLCollection、NodeList

Node(节点)是一个接口,很多类型DOM节点都继承自他,nodeType有以下12种

{
    ELEMENT_NODE: 1, // 元素节点
    ATTRIBUTE_NODE: 2, // 属性节点
    TEXT_NODE: 3, // 文本节点
    DATA_SECTION_NODE: 4,
    ENTITY_REFERENCE_NODE: 5,
    ENTITY_NODE: 6,
    PROCESSING_INSTRUCTION_NODE: 7,
    COMMENT_NODE: 8, // 注释节点
    DOCUMENT_NODE: 9, // 文档
    DOCUMENT_TYPE_NODE: 10,
    DOCUMENT_FRAGMENT_NODE: 11, // 文档碎片
}

HTMLCollection、NodeList

区别：HTMLCollection是元素集合/NodeList是节点和元素的集合

1.  <div><span></span></div>
   

2.  <div>
        <span></span>
    </div>
   

3. 这2者所获取的NodeList是不一样的,因为2会把空节点也算进去

获取方法

1. HTMLCollection(元素顺序为文档流中的顺序，实时更新)
   1. Node.children
   2. document.getElementsByTagName
   3. getElementsByClassName
2. NodeList(节点列表,即使是空节点也会算进去)
   1. Node.childNodes
   2. document.getElementsByName
   3. document.querySelectAll() //返回的是固定的,前2者返回的结果是实时的

常见的DOM操作方法

节点查找API

查找HTMLCollection

1. 额外的: document.forms

节点创建API

1. createElement: 不是一个document对象
2. cloneNode(boolean): 是否复制子节点
3. createTextNode
4. createDucomentFragement: 文档碎片,大量操作DOM时能提升性能

节点修改API

1. parent.appendChild(child)
2. parent.insertBefore(newChild,oldChild)
3. parent.removeChild(child)
4. parent.replaceChild(newChild,oldChild)

节点关系API

父关系API

1. parentNode
2. parentElement: 返回父元素节点,父节点必须是element,否则返回null

子关系API

1. children: HTMLCollection
2. childNodes: NodeList
3. firstChild/firestElementChild
4. lastChild/lastElementChild

兄弟关系型API

1. previousSibling: 前一个节点
2. nextSibling: 后一个节点
3. previousElementSibling/nextElementSibling

元素属性型API

1. getAttribute('name')
2. setAttribute('name','bin')

样式相关API

直接修改样式

elem.style.color = 'red';
elem.style.setProperty('font-size', '16px');
elem.style.removeProperty('color');

动态添加样式

var style = document.createElement('style');
style.innerHTML = 'body{color:red} #top:hover{background-color: red;color: white;}';
document.head.appendChild(style);