DOM

DOM

Document(文档) Object(对象) Model(模型)
常用节点类型

元素节点 --- 1 
属性节点 --- 2
文本节点 --- 3
注释节点 --- 8
文档节点 --- 9
查看节点类型

obj.nodeType (返回值是数字)
obj.nodeName (返回值是大写的元素节点 'DIV')
查看属性节点

obj.attribute[name] ;
节点关系

1 , 父子关系
    <!--查找父级-->
    child.parentNode
    
    <!--查找子级-->
    parent.children(使用此方法比较好)
    
    parent.childNodes(此方法会返回空格节点)
    
2 , 兄弟关系
    <!--下一个元素节点-->
    obj.nextElementSibling
    
    <!--上一个元素节点-->
    obj.previousElementSibling
    
    <!--第一个元素子节点-->
    obj.firstElementChild
    
    <!--最后一个子节点-->
    obj.lastElementChild
创建节点

let div = document.createElement('div')
添加节点

(1),在父节点元素后面添加元素
    parent.appendChild(child) ; 
    
(2),插入到指定节点的前面

    <!--将child1放在child2的前面-->
    parent.insertBefore(child1 , child2)
剪切操作

<!--child1为已有的元素节点-->
parent.insertBefore(child1 , child2)
删除节点

parent.removeChild(nodeName)
替换节点

<!--用node1替换node2-->
parent.replaceChild(node1 , node2)
克隆节点

node.cloneNode(Boolean)
    Boolean:
        true(深度克隆,除事件之外)
        false(只克隆元素标签)