Element 的方法和屬性

element event 事件源


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1 id='a'>我是A頁面</h1>
    <div class="name">我是樣式名爲name的元素</div>
    <span id="eventUl">
        <i>1</i>
        <i>2</i>
    </span>
    <script>
      let ul = document.getElementById('eventUl')
      ul.addEventListener('click',(e)=>{
          console.log(e.currentTarget)
      })
    </script>
</body>
</html>

element 節點屬性與方法


屬性:

nodeName

//獲取元素的名稱 注:返回大寫 如 LI

localName 

//獲取元素的名稱 注:返回小寫 如 li

nodeType

獲取元素的類型 1:Element 代表元素  2:Attr 代表屬性  3: Text  代表元素或屬性中的文本內容。

textContent

獲取/設置元素及其所有後代的文本內容

childNodes

獲取的是節點的子節點集合,包括元素節點、文本節點還有屬性節點,所以上面代碼中,兩個undefined其實是元素節點後面跟的回車符,默認爲一個文本節點。

firstChild

獲取第一個子節點 節點包括(元素節點,文本節點,屬性節點)

lastChild

獲取最後一個子節點 節點包括(元素節點,文本節點,屬性節點)

nextSibling

返回同級元素的下一個節點 節點包括(元素節點,文本節點,屬性節點)

previousSibling

返回同級元素的上一個節點 節點包括(元素節點,文本節點,屬性節點)

classList

獲取元素class 集合。

add() //添加指定的類

remove() //刪除指定的類

toggle() //存在刪除不存在添加

contains() //檢查元素的類屬性中是否存在指定的類值

children

獲取元素的所有元素子節點集合。

childElementCount

獲取元素的所有元素子節點集合數量(number 類型)。

firstElementChild(只讀)

獲取第一個子元素節點 

lastElementChild (只讀)

獲取最後一個子元素節點

nextElementSibling (只讀)

獲取同級元素的下一個元素節點

previousElementSibling (只讀)

獲取同級元素的上一個元素節點

parentElement

獲取元素的父元素節點

方法: 

EVENT 添加事件方法 


添加事件 

EventTarget.addEventListener() 

刪除事件

EventTarget.removeEventListener()

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章