VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > temp > JavaScript教程 >
  • 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, //节点的下一个节点 (兄弟关系)
);

来源:https://www.cnblogs.com/lwq111/p/14927667.html


相关教程