文档对象模型（DOM）

1.获取节点
document.getElementById(id属性值)	通过id获取标签对应的节点
document.getElementsByClassName(class属性值)	以容器的形式返回
document.getElementsByTagName()	通过标签名获取标签对应的节点
节点对象.parentElement	获取当前节点的父节点
a.节点对象.children	获取指定节点所有的子节点
b.节点对象.firstElementChild	获取指定节点的第一个子节点
c.节点对象.lastElementChild	获取指定节点的最后一个子节点

<script type="text/javascript">
    // 1.获取节点(在js中获取html中的标签)
    // 1）通过id获取标签对应的节点
    // document.getElementById(id属性值)  -  获取当前页面中id属性值是指定值的标签对应的节点对象
    b1Node = document.getElementById('b1')
    console.log(b1Node, typeof(b1Node))
    
    // 2) 通过class获取标签对应的节点
    // document.getElementsByClassName(class属性值)  -  同时返回所有class是指定值的标签（以容器的形式返回）
    
    c1NodeArray = document.getElementsByClassName('c1')
    // 返回的是一个类似数组的容器，容器中的元素就是对应的标签
    console.log(c1NodeArray)
    // 可以通过下标依次取出每一个标签
    console.log(c1NodeArray[0], c1NodeArray[1])
    
    console.log('=======================')
    // 注意：不能用for-in的方式来遍历这个容器
    // for(x in c1NodeArray){
    //     console.log(x, c1NodeArray[x])
    // }
    // 遍历取到每一个标签
    for(x=0;x<c1NodeArray.length;x++){
        console.log(c1NodeArray[x])
    }
    
    // 3）通过标签名获取标签对应的节点
    // document.getElementsByTagName()
    pNodeArray = document.getElementsByTagName('p')
    console.log(pNodeArray)
    for(x=0;x<pNodeArray.length;x++){
        console.log(pNodeArray[x])
    }
    
    // 4)通过子节点获取父节点
    // 节点对象.parentElement   - 获取当前节点的父节点
    p2PNode = document.getElementById('p2').parentElement
    console.log('父节点:',p2PNode)
    
    // 5)通过父节点获取子节点
    // a.节点对象.children   -  获取指定节点所有的子节点
    // b.节点对象.firstElementChild  -  获取指定节点的第一个子节点
    // c.节点对象.lastElementChild  -  获取指定节点的最后一个子节点
    div3Node = document.getElementById('div3')
    allChild = div3Node.children
    console.log(allChild)
    console.log(div3Node.firstElementChild)
    console.log(div3Node.lastElementChild)

添加节点
document.createElement(标签名)	创建节点
节点1.appendChild(节点2)	添加节点
节点1.insertBefore(节点3, 节点2)	将节点3插入到节点1中的节点2的前面

    // 2. 添加节点
    // 1)创建节点
    // document.createElement(标签名)
    inputNode = document.createElement('input')
    // 2)添加节点
    // 节点1.appendChild(节点2)  -  在节点1的最后添加节点2（节点1和节点2是父子关系）
    document.getElementById('div2').appendChild(inputNode)
    
    // 节点1.insertBefore(节点3, 节点2)  -  将节点3插入到节点1中的节点2的前面
    btnNode = document.createElement('button')
    bodyNode = document.getElementsByTagName('body')[0]
    div1Node = document.getElementById('div1')
    bodyNode.insertBefore(btnNode, div1Node)
    
    // 在body的最前面插入一个div标签
    divNode = document.createElement('div')
    bodyNode.insertBefore(divNode, bodyNode.firstElementChild)

删除节点
节点对象.remove()	删除指定节点
父节点.removeChild(子节点)	删除指定父节点中指定的子节点

    // 3.删除节点
    // 1）节点对象.remove()   -   删除指定节点
    document.getElementById('p2').remove()
    
    // 2）(了解)父节点.removeChild(子节点)  -  删除指定父节点中指定的子节点
    document.getElementById('div3').removeChild(document.getElementById('a1'))

拷贝节点
节点对象.cloneNode()	浅拷贝
节点对象.cloneNode(true)	深拷贝

    // 4.拷贝节点
    // 节点对象.cloneNode()   -   浅拷贝
    // 节点对象.cloneNode(true)   -   深拷贝
    div4Node = document.getElementById('div4')
    // 拷贝产生新的节点
    newDiv4Node1 = div4Node.cloneNode()
    newDiv4Node2 = div4Node.cloneNode(true)

添加节点

    // 添加节点
    bodyNode.appendChild(newDiv4Node1)
    bodyNode.appendChild(newDiv4Node2)