前端第二周，Javascript--获取元素以及 ES5新增

Number_sun

已于 2023-08-27 12:59:52 修改

阅读量121

点赞数

文章标签：前端 javascript java

于 2023-08-27 12:45:44 首次发布

本文链接：https://blog.csdn.net/Number_sun/article/details/132522469

版权

<body>

<div id="box1">这是一个div标签111</div>

<div id="id" class="box1">这是一个div标签222222</div>

<p id="box1">这是一个p标签111111</p>

<h3 class="box1">这是一个h3标签</h3>

<span class="box1">这是一个span标签</span>

<div>这是一个div标签333333</div>

</body>

1. document.getElementById('id名') 按照元素的id名获取元素

参数：所要获取元素的 id名

返回值：返回获取到的元素对象

//只能获取到一个，如果页面中有多个元素的id名一样也只会获取到第一个这个id名的元素

//如果页面中没有所要获取的id名的元素，则返回null

var a = document.getElementById('box1');

console.log(a);

var b = document.getElementById('xsw');

console.log(b);//null

3.document.getElementsByClassName('class名') 按照元素的class名获取元素

参数：所要获取元素的 class名

返回值：返回获取到的元素对象的集合，返回的是一个'类'数组

//'类'数组中的每一项都是获取到的元素对象

//使用时通过索引使用

//如果页面中没有说要获取的class名的元素，则返回:空数组[]

var c = document.getElementsByClassName('box1');

console.log(c);

console.log(c[1]);//在这里访问的是索引

var d = document.getElementsByClassName('abc');

console.log(d);//[]

3. getElementsByTagName('元素名称') 按照元素（标签）的名称获取元素（标签）

参数：所要获取元素的名称，就是元素名

返回值：返回获取到元素对象合集，返回的是一个'类'数组。

//'类'数组中的每一项都是获取到的元素

//使用时通过索引使用

//如果页面中没有索要获取的名称元素，则返回：空数组[]

var e = document.getElementsByTagName('div');

console.log(e);

var f = document.getElementsByTagName('span');

console.log(f);

var g = document.getElementsByTagName('header');

console.log(g);//[]

ES5新增:

1. document.querySelector('css选择符') 获取元素对象 -- 一个

参数：css选择符(可以)怎么写，参数就(可以)怎么传。

返回值：返回获取到的元素对象

//只能获取到一个，如果页面中有多个选择符可以选择到的元素，只会到第一个。

//如果页面中没有css选择符那么选择到的元素，则返回null。

var a = document.querySelector('span');

console.log(a);

var b = document.querySelector('#divbox');

console.log(b);

var c = document.querySelector('.box1');

console.log(c);

var d = document.querySelector('div:nth-of-type(3)')

console.log(d);

var e = document.querySelector('header div');

console.log(e);

var f = document.querySelector('input[type=url]');

console.log(f);

var g = document.querySelector('nav');

console.log(g);//null

2. querySelectorAll('css选择符') 获取元素对象得集合 -- 多个

参数：css选择符可以怎么写，参数就可以怎么传

返回值：

//返回获取到的元素对象集合 --- 类数组，使用时通过索引

//不论页面中是否有需要选择的元素，或者有几个元素，都返回的是数组。

var a1 = document.querySelectorAll('div');

console.log(a1);

var b1 = document.querySelectorAll('.box1');

console.log(b1);

var c1 = document.querySelectorAll('nav');

console.log(c1);//[]

Number_sun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端第二周，Javascript--获取元素以及 ES5新增

这是一个span标签这是一个div标签111console.log(c[1]);//在这里访问的是索引。这是一个p标签111111这是一个h3标签这是一个div标签333333
复制链接

扫一扫