04 JS-DOM之-直接获取节点（3种方法）

最新推荐文章于 2022-08-17 09:25:15 发布

喝着绿茶的猫

最新推荐文章于 2022-08-17 09:25:15 发布

阅读量636

点赞数 1

分类专栏： JavaScript-DOM 文章标签： dom

本文链接：https://blog.csdn.net/luyu13141314/article/details/53396820

版权

JavaScript-DOM 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

获取节点的方法

1. 直接获取(id/className/tagName)(主要3种)（本文）

2.间接获取：访问关系获取(4种)下文

案例body：

<body>
 <div></div>
 <div class="box1"></div>
 <div id="box2"></div>
 <div class="box1"></div>
 <div></div>
 </body>

获取元素第一种：document.getElementById(“唯一ID”);

功能:通过ID获取元素节点。

返回值:是该id所在的标签对象本身。如果没有返回null；

调用者:只能是document.其他任何元素无权调用。

 var box2 = document.getElementById("box2");
 console.log(box2);//输出整个<div id="box2"></div>

获取元素第二种：document.getElementsByTagName(“标签”);

功能：通过标签名获取元素节点

返回值：是该标签名所在的标签对象本身组合组成的数组,哪怕只有一个也要放进数组中。如果没有，返回空数组[];

调用者：任何元素节点（缩小范围，在自己的标签下搜索）和document

  var divArr = document.getElementsByTagName("div");
    var pArr = document.getElementsByTagName("p");
   console.log(divArr);
   console.log(pArr);

获取元素第三种：document.getElementsByClassName(“类名”);

功能：通过标签名获取元素节点

返回值：是该标签名所在的标签对象本身组合组成的数组,哪怕只有一个也要放进数组中。如果没有，返回空数组[];

调用者：任何元素节点（缩小范围，在自己的标签下搜索）和document

注意： IE5,6,7,8 中此方法无效。HTML5新增的

   var divArr = document.getElementsByClassName("box1");
   var pArr = document.getElementsByClassName("p");
    console.log(divArr);
    console.log(pArr);// []

另外两个不常用：忽略…

一个是name属性获取，另一个是命名空间获取。
document.getElementsByName();
document.getElementsByTagNameNS();

未完待续…

喝着绿茶的猫

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
04 JS-DOM之-直接获取节点（3种方法）

获取节点的方法 1. 直接获取(id/className/tagName)(主要3种)（本文） 2.间接获取：访问关系获取(4种)下文案例body： <body> <div></div> <div class="box1"></div> <div id="box2"></div> <div class="box1"></div> <div></div> </body
复制链接

扫一扫