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 代表元素或屬性中的文本內容。
獲取/設置元素及其所有後代的文本內容
childNodes
獲取的是節點的子節點集合,包括元素節點、文本節點還有屬性節點,所以上面代碼中,兩個undefined其實是元素節點後面跟的回車符,默認爲一個文本節點。
獲取第一個子節點 節點包括(元素節點,文本節點,屬性節點)
獲取最後一個子節點 節點包括(元素節點,文本節點,屬性節點)
nextSibling
返回同級元素的下一個節點 節點包括(元素節點,文本節點,屬性節點)
返回同級元素的上一個節點 節點包括(元素節點,文本節點,屬性節點)
classList
獲取元素class 集合。
add() //添加指定的類
remove() //刪除指定的類
toggle() //存在刪除不存在添加
contains() //檢查元素的類屬性中是否存在指定的類值
children
獲取元素的所有元素子節點集合。
childElementCount
獲取元素的所有元素子節點集合數量(number 類型)。
獲取第一個子
元素節點
lastElementChild
(只讀)
獲取最後一個子
元素節點
nextElementSibling
(只讀)
獲取同級元素的下一個子
元素節點
獲取同級元素的上一個子
元素節點
獲取元素的父元素節點
方法:
EVENT 添加事件方法
添加事件
EventTarget.addEventListener()
刪除事件
EventTarget.removeEventListener()