DOM

獲取元素節點 的 n多方法

/**

• 根據'標籤名'進行元素的獲取
• 由於HTML中可以存在多個相同的標籤名的元素
• 因此接受的變數是可以儲存多個數據的類陣列
• 通過下標獲取具體的內容。
  */
  // let ulEle = document.getElementsByTagName("ul")[0];
  // console.log(ulEle);

//通過name的屬性值獲取元素
// let inputEle = document.getElementsByName("f70")[0];
// console.log(inputEle);

//通過ID值獲取元素
// let liEle = document.getElementById("box");
// console.log(liEle);

//通過類名獲取元素
// let leiName = document.getElementsByClassName("F70");
// console.log(leiName[2]);

//獲取父元素
/**

• 1、獲取一個元素（子元素）
• 2、通過這個元素找其父元素
  */

// let navEle = document.getElementsByTagName("nav")[0];
// console.log(navEle);
// //書寫格式：子元素.parentNode
// let headerEle = navEle.parentNode;
// console.log(headerEle);

/**

• 獲取子元素節點
• 書寫格式:父元素.children
  *children：非標準屬性，它返回指定元素的子元素集合。
  */
  // let Eles1 = headerEle.children;
  // console.log(Eles1);

/**

• 獲取子節點(元素、文字、註釋)
• 書寫格式:父元素.childNodes
  *childNodes：它是標準屬性，它返回指定元素的子元素集合，包括HTML節點，所有屬性，文字節點。
  */
  // let Eles2 = headerEle.childNodes;
  // console.log(Eles2);

// //獲取第一個子節點
// let FEles = headerEle.firstChild;
// console.log(FEles); //#text
// //獲取第一個子元素節點
// FEles = headerEle.firstElementChild;
// console.log(FEles); //

"123"

let eleButt = document.getElementsByTagName(button)[1]
console.log(
1, eleButt.parentElement, // 他的父節點
2, eleButt.firstElementChild, //他的子節點 （第一個）
3, eleButt.lastElementChild, //他的子節點 （最後一個）
4, eleButt.children, //他的子節點 （所有）
5, eleButt.previousElementSibling, //節點的上一個節點 （兄弟關係）
6, eleButt.nextElementSibling, //節點的下一個節點 （兄弟關係）
);