【fgm.cc练习1-4】获取div元素

最新推荐文章于 2023-12-04 12:34:46 发布

denguing

最新推荐文章于 2023-12-04 12:34:46 发布

阅读量475

点赞数

分类专栏： fgm.cc 文章标签： JavaScript css HTML 前端 fgm

本文链接：https://blog.csdn.net/DGT4720/article/details/103009923

版权

本文通过fgm.cc的练习详细介绍了如何获取HTML中的div元素，解答了在获取元素时length不准确的问题。原来，使用childNodes会包含文本节点，导致数量不符。解决方法是使用特定的方法来过滤掉文本节点，只获取div元素。

摘要由CSDN通过智能技术生成

练习网址：http://www.fgm.cc/learn/lesson1/04.html
思路是获取所有div得到一个数组，循环给它加上className。

如何获取div元素，这里终于知道前几次练习中一直存在的一个疑惑了，就是得到的数组length为什么不是正确的？去掉空格之后就是正确了，原因可以看这篇。

主要就是说如果用childNodes获取会把文本节点也获取到，我所说的空格也算文本节点。所以我只有三个div，取到的childNodes却有7个。

所以获取div我用了这种方法document.querySelectorAll("div.className")或者document.querySelectorAll("div[class='aa']")

下面贴我的代码：

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<title>用循环将三个DIV变成红色</title>
		<link rel="stylesheet" href="4_changColor.css">
	</head>
	<body>
		<

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

denguing

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

如何使用JavaScript获取DIV元素的高度

CodeWhizZ的博客

09-20

984

在JavaScript中，我们经常需要获取HTML元素的属性值，比如DIV元素的高度。通过JavaScript，我们可以轻松地获取DIV元素的高度，并在需要的地方使用这个值。将DIV元素的高度打印到浏览器的控制台中。你也可以将高度的值用于你的代码逻辑中，而不仅仅是打印出来。属性返回一个整数，表示元素的像素高度，包括元素的边框、内边距和滚动条（如果存在）。为你自己DIV元素的ID。例如，如果你的DIV元素的ID是。替换为你自己DIV元素的ID，以正确获取元素的高度。这段代码可以用于任何具有ID的DIV元素。

【fgm.cc练习4-9】星级评分系统

DGT4720的博客

12-14

509

练习地址：http://www.fgm.cc/learn/lesson4/09.html 看了网页源代码，才知道什么叫“简洁的代码”。我写的太繁杂了！亮起和熄灭的星星是通过改变背景图片的位置来实现的，背景图片从网页source那里下载。要解释的在注释里面写了。 HTML <!DOCTYPE html> <html lang="zh"> <head> &lt...

参与评论您还未登录，请先登录后发表或查看评论

Jquery div 中获得元素

qhx556的专栏

04-18

866

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> div { width:200px;height:100px;background-color:#eee;border:solid 2px Red;

JS怎么获取DIV里面其他节点的元素（例如li）

优秀的判断力来自经验，但经验来自于错误的判断

01-02

2065

<div id="myDiv" class="myClass"> <ul> <li></li> <li></li> </ul> </div> 如上，可以这样获取: 1.document.querySelectorAll("div li"); 2.document.querySelectorAll("#...

JS获取div里面的其它元素的两种方法

m0_63689815的博客

12-16

7314

通过JS的DOM获取div里面的其它元素的两种方法 getElementsByTagName 和 querySelector ，具体使用方法如下

获取元素节点的方法

weixin_62024166的博客

09-28

272

HTML部分 <body> <div id="box">1</div> <div id="box">1</div> <div class="box">2</div> <div class="box">2</div> 3 3 4

【fgm.cc练习3-4】输入两个数字，比较大小

DGT4720的博客

11-15

325

练习地址：http://www.fgm.cc/learn/lesson3/04.html 实现的效果看起来很简单，其实是我打脸了！这些练习虽然简单，但它更是在更深层次的考查一些容错性，错误操作处理的技巧。下面看我写的就很简单，思路天真单纯无害。 HTML <!DOCTYPE html> <html lang="zh"> <head> <meta cha...

【fgm.cc练习3-8】简易网页时钟：时间函数

DGT4720的博客

11-24

235

打开网页，时间流逝。练习地址：http://www.fgm.cc/learn/lesson3/08.html 实现方法：时间函数创建时间对象 new Date() 调用方法间隔时间1s调用一次函数： window.setInterval(getTime,1000); 另外，等待5s调用一次函数（只调用了函数一次): setTimeout(getTime,5000); 如果要停止或者取消...

【fgm.cc练习3-9】倒计时时钟：setInterval & clearInterval & 正则表达式 & 条件运算符

DGT4720的博客

11-25

277

倒计时100秒，可启动可停止。练习地址：http://www.fgm.cc/learn/lesson3/09.html HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>倒计时时钟</title> <link r...

JavaScript 九九乘法表?

wxt_wjc的博客

01-11

767

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...

vue 获取元素下的所有div_Vue.js 如何获取子组件中的任意元素

weixin_39843698的博客

12-19

2189

如图，动态添加节点为一行文字和对应的input，input原本是隐藏的，点击文字之后显示input。之后我想让input获得焦点(focus)，但不知该如何恰当的获取这个input(不使用DOM操作)。代码如下：(html文件)Vue.component('test',{props:['item'],template:`{{item.text1}}`,methods:{show(event,ite...

【js】DOM 获取元素节点的三种方法

firstbird的博客

09-21

1131

三种方法：getElementById、getElementsByTagName、getElementsByClassName 这三种方法通过 innerHTML 获取元素节点的内容时是不同的！！！！！！！ 1、getElementById 请注意，getElementById 返回的是元素节点对应的对象可以用 typeof 来验证 2、getElementsByTagName getElementsByTagName 返回的元素节点对应的对象数组，是数组数组数组数组，重要.

js中获取元素内容的属性,javascript获得元素的方法

chatgpt001的博客

12-04

1676

大家好，小编来为大家解答以下问题，javascript中获取元素的方法有哪些，js获取元素指定属性值的方法，今天让我们一起来看看吧！

【fgm.cc练习4-4】arguments应用——求出函数参数的总和

DGT4720的博客

12-02

298

练习地址：http://www.fgm.cc/learn/lesson4/04.html 与【3-1】的练习一样。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>arguments应用——求出函数参数的总和</title> &l...

js根据class获取div元素

h702109382的专栏

04-10

1万+

document.querySelectorAll("div.className")

DOM创建元素节点.获取节点

weixin_66171880的博客

02-02

1992

1.每点击一下去创建一个节点元素：案例如下 <div id="wrap"></div> <script> let oWrap = document.querySelector("#wrap"); // 每在页面上点1下，都在wrap内生成一个 div，每个div的背景色都是随机的 // wrap里每个div节点，都能绑定1个点击事件，点击时，可以打印自身 document.documentElem..

如何用Jquery获取某一个Div的Class或者ID