欢迎光临
我的个人博客网站

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

赞(0) 打赏
未经允许不得转载:张拓的天空 » DOM 获取元素节点 的 n多方法
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏