Javascript初學筆記13 DOM基本操作-節點查找與選取

我目前學的HTML&CSS 與Javascript是完全分開的,但學會DOM之後便可利用JS去修改HTML的內容,這同時也是網頁動態操作的基礎。
先將語法做個簡單的整理,整理的內容來自
https://www.haorooms.com/post/js_dom_api
在最後會做個簡單的練習

節點查找


document.querySelector 選取物件,回傳一個節點
document.querySelectorAll 選取物件,回傳一個節點list,類似陣列的東西
也可利用標籤去做查找
document.getElementById/ClassName/tagName

創建節點

document.createElement 建立元素節點
document.createTextNode 建立文本節點
但建立的節點並不會直接加進HTML的結構中,所以需要另外搭配Node.appendChild()或是insertBefore(newnode,refnode)去做節點的新增。

節點內容查找與修改

可利用
document.innerHTML
document.innerText
document.textContent
三種方法去做節點內容的查找,修改的方法則與修改變數方法一致
值得注意的是只有innerHTML會處理到標籤的部分,其餘兩者僅處理純文字內容

進階節點查找

有時候光靠基本的節點查找你沒辦法直接選取到你要的節點,這時候我們需要父子與兄弟相關的選取方式幫忙。

parentElement :選取一個節點的父元素節點,若是文字節點則選取不到
children :選取一個節點的子元素。
childNodes :選取一個節點,回傳一個子元素的Nodelist
firstElementChild /firstChild :回傳第一個子節點
lastElementChild /lastChild :回傳最後一個子節點
previousElementSibling /previousSibling :回傳該節點的前一個節點
nextElementSibling /nextSibling :回傳該節點的後一個節點

操作ClassList

所有的元素都具備自己的ClassList
可以用以下方法操作
Node.classList.remove()
Node.classList.add()
Node.classList.replace()
若是要查看該節點的class名稱
Node.className

下一篇將會使用這些語法做一次簡單的實作~!

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s