JS選擇元素節點方法

使用基本指令選擇document.querySelector來選擇

HTML

<body>
  <div class="father"> father 
    <div class="my-sister"> my-sister</div> 
    <div class="me"> me 
      <div class="son1">son1</div>
      <div class="son2">son2</div>
      <div class="son3">son3</div>
    </div>
    <div class="my-brother"> my-brother</div> 
  </div>
<body>

選出class標籤為me的元素

1	const me = document.querySelector('.me')

parentElement

選擇me的父元素和選擇me的父元素的父元素

1 2	me.parentElement // 會選擇到<div class=""father>...</div> me.parentElement.parentElement // 會選擇到<body>...</body>

children[i]

選擇me的第一個子元素和選擇me的第二個子元素

1 2	me.children[0] // 會選擇到<div class="son1">son1</div> me.children[1] // 會選擇到<div class="son2">son2</div>

nextElementSibling & previousElementSibling

選擇me的下一個同層級元素，和選擇me的上一個同層級元素

1 2	me.nextElementSibling // 會選擇到<div class="my-brother"> my-brother</div> me.previousElementSibling // 會選擇到<div class="my-sister"> my-sister </div>

firstElementChild, lastElementChild

選擇me的第一個子元素，選擇me的最後一個子元素

1 2	me.firstElementChild // 會選擇到<div class="son1">son1</div> me.lastElementChild // 會選擇到<div class="son3">son3</div>

appendChild

Node.appendChild(sample)
是將一個節點加到指定的父節點下面所有子節點的最後面。
如果sample這個節點已經存在document樹當中，那 appendChild(sample) 會將原本sample這個節點位置移動到node這個新的位置（不需要事先移除要移動的節點）。

// TodoList Delete and check
list.addEventListener("click", function (event) {
  const target = event.target;
  const parentElement = target.parentElement
  //按下垃圾桶，將項目刪除
  if (target.classList.contains("delete")) {
    parentElement.remove();
    //Todo中項目按下名字，將項目移置done中
  } else if (target.tagName === "LABEL") {
    doneList.appendChild(parentElement) //會移到doneList中，並且刪除原本自己位置的標籤
    target.classList.toggle("checked")
  }
});
// DoneList Delete and back
doneList.addEventListener("click", function (event) {
  const target = event.target;
  const parentElement = target.parentElement
  //按下垃圾桶，將項目刪除
  if (target.classList.contains("delete")) {
    parentElement.remove();
    //Done中項目按下名字，將項目移置Todo中
  } else if (target.tagName === "LABEL") {
    list.appendChild(parentElement) //會返回移到List中，並且刪除原本自己位置的標籤
    target.classList.toggle("checked")
  }
})

利用matches或classList.contains來比對目標對象

.matches

target.matches(‘.class’或’#id’) 轉譯：目標對象元素是否含有.class或#id，回傳true或fals

// 刪除函式
function removeTodo(target) {
  if (target.matches(".delete")) {
    target.parentElement.remove();
  }
}

.classList.contains

或是也可以用
target.classList.contains(‘string’) 轉譯：目標對象元素class屬性裡是否含有’string’值，回傳true或fals

關於dataset

可以在元素標籤上設定data資料，在使用JS去取得點擊目標元素上的dataset資料

1 2	<div id="user" data-id="1234567890" data-user="ac-genie" data-date-of-birth>AC Genie</div>

然後我們可以呼叫 dataset. 來取得這些屬性的值，你會發現這些值的型態都是字串*：

const el = document.querySelector('#user');
console.log(el.dataset.user)
//ac-genie
console.log(el.dataset.id)
//1234567890
console.log(el.dataset.dateOfBirth)
//(空字串)

更改元素style

我們常用classList.add來增加元素的樣式或改變樣式，但若本身已經設定好樣式，只是要更改樣式其中的屬性的話可以使用下面此方法。

const el = document.querySelector('#user');

el.style.display = "none"; // 使用style.(要變更的屬性名稱) = "賦值"

邊撸鐵健身邊學Code的Dhal

JavaScript語法使用-DOM相關