DOM 获取元素节点 的 n多方法

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); //

// //获取最后一个子节点
// let LEles = headerEle.lastChild;
// console.log(LEles); //#text
// //获取最后一个子元素节点
// LEles = headerEle.lastElementChild;
// console.log(LEles); //

"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, //节点的下一个节点 （兄弟关系）
);