獲取節(jié)點
id選擇
- document.getElementById()
class選擇
- document.getElementsByClassName() 偽數組
標簽名選擇
- document.getElementsByTagName() 偽數組
選擇器
- document.querySelector/All
body和html
- document.body
- document.documentElement;
事件
改變元素內容
- innerText 只修改文字
-
innerHTML可以解析html標簽
樣式屬性操作
- this.style.backgroundColor ='red'駝峰命名法
- this.className='xxx' 賦一個class叁丧，覆蓋了
獲取屬性
這些都是說自定義屬性捌浩，建議data-開頭
節(jié)點層級
父節(jié)點
- xxx.parentNode
子節(jié)點
- xxx.childNodes 數組
- xxx.firstChild 第一個
- xxx.lastChild 最后一個
上面是很垃圾的選擇，空格換行也選 - xxx.children 數組
- xxx.firstElementChild
- xxx.lastElementChild
兄弟節(jié)點
- xxx.nextSibling
- xxx.previousSibling
上面是很垃圾的選擇，空格換行也選 - xxx.nextElementSibling
- xxx..previousElementSibling
創(chuàng)建節(jié)點躁锡、添加節(jié)點、刪除節(jié)點
- document.createElement("li")
- xxx.appendchild(li) 后面追加
- xxx.insertBefore(li紧帕，ul.children[0]) 前面追加
- xxx.removeChild(ul.children[0])刪除節(jié)點
克隆節(jié)點（只是克隆需要添加）
- xxx.cloneNode() //默認false只拷貝節(jié)點//true深拷貝加上節(jié)點的內容
監(jiān)聽器
- xxx.addEventListener('click',funtion(){}) //可以設置多個相同事件
刪除事件
- xxx.onclick=null
- xxx.removeEventListener('click' xxx)
事件流
- 監(jiān)聽器可以設置綁定事件流
- .addEventListener('click',funtion(){},true) //處于捕獲的事件
- .addEventListener('click',funtion(){},空/false) //處于冒泡階段的事件
事件對象
-
addEventListener('click',funtion(e){})//event或者e都行
