您的位置：首页 > Web前端 > JavaScript

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

2016-11-29 18:29 429 查看

获取节点的方法

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

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

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

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

调用者：任何元素节点（缩小范围，在自己的标签下搜索）和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();

未完待续…

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： dom

相关文章推荐

新的分享

章节导航