DOM及DOM二级事件

DOM Document Object Model 文档对象模型

javascript由三部分组成：ECMAScript、BOM、DOM

DOM提供API来操作HTML页面，如：document下面的东西

1、常用子节点（子节点有十二种）

• 元素节点
• 文本节点（text)，回车就会产生文本节点
• 注释节点(comment)

    <div id="wrap">
        <p>p1</p>
        <p>p2</p>
        <a href="">a</a>
        呜呼啦呼，黑魔变身
        <b>b</b>
    </div>
    
     let owrap = document.getElementById("wrap")
     console.log(owrap.childNodes);
     // 注释节点的话，修改nodevalue
     owrap.childNodes[7].innerText = "小兰，哪里逃"

     console.log(document.querySelector("#wrap a") === owrap.childNodes[5]);  // true
     //document.querySelector("#wrap a")  返回的是节点对象；owrap.childNodes[6]返回的是对象。获取方式不同，但是是同一个a

2、节点的属性

每个节点本身是个对象

• nodeValue,元素节点无nodeValue

          // 此处的childNodes[0]是div回车那里，存储形式是按字符串存储，修改如下
          owrap.childNodes[0].nodeValue = "小月在此"
  

• nodeType

          // nodeType可显示节点类型,节点类型与编号一一对应
          console.log(owrap.childNodes[1].nodeType);  // 1
  

• nodeName

  text 的 nodeName 是 #text

  comment 的 nodeName 是 #commentt

  p 的 nodeName 是 大写的P

3、获取节点

        //获取元素节点(平常操作最多)
		let owrap = document.getElementById("wrap")
        console.log(owrap.children)     //HTMLCollection(4)[p,div,div,a]
        // console.log(owrap.children.forEach())   //报错
        console.log([...owrap.children].forEach((node,index)=>{   // forEach要传一个函数参数
            console.log(node,index)
        }))

        //获取id为标签a的html结构上的父级节点
        let oabd = document.getElementById("abd")
        console.log(oabd.parentNode)  //  <div>
                                    //      <a id="abd"></a>  
								//			</div>
		// 定位父级,自身无定位属性的话，也是有定位父级的
		console.log(oabd.offsetParent)

oabd.parentNode.parentNode,可获得oabd的爷爷，以此类推

 <div id="abd">
            <p></p>
 </div>
 //获取所有节点
 let oabd = document.getElementById("abd")
 console.log(oabd.getElementsByTagName("*"))   // [p]

    <div id="wrap">
        <div></div>
        <p>
            <a href=""></a>
        </p>
    </div>
    <p id="op"></p>
    
     let owrap = document.getElementById("wrap")
     console.log(owrap.firstChild)   //#text
     console.log(owrap.firstElementChild)   // <div></div>
     console.log(owrap.lastChild)  //#text
     console.log(owrap.lastElementChild)    //<p>...</p>
     console.log(owrap.nextSibling)   //#text
     console.log(owrap.previousElementSibling)  //null
     console.log(owrap.previousSibling)   //#text

4、节点的创建、添加与删除

    <div id="wrap">
        <div></div>
    </div>
    
//用此方法添加标签时，会覆盖原始标签，且会使原标签上的onclick等操作失效
     let owrap = document.getElementById("wrap")
     owrap.innerHTML += '<a href="">我是标签a</a>'
     console.log(owrap.children)   // [div, a]

    <div id="wrap">
        <div></div>
    </div>
    
    //添加节点
    let owrap = document.getElementById("wrap")
    let oA = document.createElement("a")
    owrap.appendChild(oA)
    console.log(owrap.children)   // [div,a]

    <div id="wrap">
        <div></div>
    </div>
    
    //插入节点
    let owrap = document.getElementById("wrap")
    let oA = document.createElement("a")
    //插入标签a到owrap的第一个节点前
    owrap.insertBefore(oA, owrap.children[0])
    console.log(owrap.children)   // [a,div]

    <div id="wrap">
        <div></div>
    </div>
    
        //删除节点，节点不能自杀，需要通过父级移除 
        let owrap = document.getElementById("wrap")
        let odiv = document.querySelector("#wrap .lan")
        owrap.removeChild(odiv)   // 或者odiv.parentNode.removeChile(odiv)
        console.log(owrap.children)   // []
//执行了删除节点之后，再次打印被删除节点时，还是显示原先的节点。因为页面是页面，内存是内存，这个移除操作只是从页面中移除，内存中还保留

5、DOM 2级事件

DOM 0级事件（赋值式） ： 新事件会覆盖原事件
document.onclick = function(){}
DOM 2级事件 （函数式） ： 新事件不覆盖原事件
document.addEventListener(“click”,function(){})

6、取消2级事件

document.removeEventListener(“click”,clickEvent2)

        function clickEvent2(){
            console.log(123)
        }
        document.addEventListener("click",clickEvent2)
        document.removeEventListener("click",clickEvent2)

低版本ie2级事件：
document.attachEvent()
document.detachEvent()