innerHTML无法直接对document.getElementsByClassName等进行操作，与Elements返回数据类型有关

于 2023-03-30 11:46:18 发布
阅读量237 收藏
点赞数
文章标签： html javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lengzhuji/article/details/129854601
版权
文章讨论了在JavaScript中处理带有复数形式的Elements时遇到的问题。当使用`getElementsByClassName`方法获取元素集合时，返回的是一个数组，需要指定索引才能操作特定元素。在示例代码中，通过将`getElementsByClassName(common)`更改为`getElementsByClassName(common)[0]`，才能正确地使用`innerHTML`为特定元素添加内容。问题的关键在于未正确定位到需要操作的DOM节点。
摘要由CSDN通过智能技术生成

  在Elements带复数形式中返回的数据类型为数组，且数组中的数据为对象的形式

let data = [
    {//这里面的对象为同class 的element对象，或同标签名的element对象},
    {}
]

 出错代码

<body>
	<!-- 精品课程 -->
	<div class="course wrapper">
		<div class="hd">
			<h3>精品推荐</h3>
			<a href="#">查看全部 <span class="iconfont icon-arrow-right-bold"></span></a>
		</div>
		<div class="bd">
			<ul class="common" id="common">
				<!-- 
					<li>
						<a href="#">
							<div class="pic">
								<img src="./uploads/quality01.png" alt="" />
							</div>
							<h4>JavaScript数据看板项目实战</h4>
							<p><span>高级</span> · <i>1125</i>人在学习</p>
						</a>
					</li>
				 -->
			</ul>
		</div>
		<button onclick="ul()">一键添加</button>
	</div>

	<script src="./js/shujv.js"></script>
	<script>

		function ul() {
			let unm = ''

			for (let i = 0; i < data.length; i++) {

				let src =
					`
		            <li>
			            <a href="#">
				            <div class="pic">
					            <img src=${data[i].src} alt="" />
				            </div>
				            <h4>${data[i].title}</h4>
				            <p><span>高级</span> · <i>${data[i].num}</i>人在学习</p>
			            </a>
		            </li>  
		        `

				unm += src
			}

			//let ul = document.getElementsByClassName('common') 当只写这一段代码的时候他的返回值为数组，无法定义到具体某一个元素上
			// 只有在后面添加元素位置才可以定位到具体某个元素上
		    let ul = document.getElementsByClassName('common')
			ul.innerHTML = unm

		}

	</script>
</body>

这里innerHTML无法为ul添加我写的字符串unm，

当把let ul = document.getElementsByClassName('common')改为let ul = document.getElementsByClassName('common')[0]的时候就可以正常的进行操作，也不会不出结果

let ul = document.getElementsByClassName('common')[0]
ul.innerHTML = unm

主要的原因就是没有具体定位到需要的节点上，数组无法被直接操作

unfrequented
关注
原生JS--DOM的操作
苛性钠的博客
12-14 279
准备好了吗？基础概念别睡着了喔 。。。 查找DOM元素 按照HTML查找 document.getElementById 通过id获取元素 document.getElementsByTagName 通过标签名获取元素 返回类数组 document.getElementsByName 通过name属性查找元素 多用于表单 返回动态类数组 document.getElementsByClassName 通过类名获取元素 document.querySelector 通过css选择器获取元素 得到匹配的第一
前端基础学习笔记-JS 获取元素 字符串拼接 数据类型
勤能补拙
01-03 1022
1.获取元素 通过id名 document.getElementById("box")//获取的唯一的元素 通过class名 document.getElementsByClassName("wrap")//获取所有具有wrap类名的标签集合 //Elements 注意加上s 大小写不能错 当找不到元素时,返回null 意为空,当写错时,直接报错,提示没有这个方法 console.lo...
document.getElementsByClassName(“prisna-wp-translate-seo“).innerHTML=xhr.responseText；无法赋值问题
撑起自己半边天
09-23 416
document.getElementsByClassName(“your class name”).innerHTML=xhr.responseText;无法赋值问题 解决方法： document.getElementsByClassName(“your class name”)[0] ；加个[0]就好，因为document.getElementsByClassName(）；获取返回的是数组的形式； 完整写法： document.getElementsByClassName(“classname”)[0]
innerHTML在使用getElementsByClassName()失效问题
m0_46163764的博客
11-25 1977
innerHTML失效问题问题描述解决方法后言 问题描述 在使用js获取div下的p标签并改变其显示的值时，使用getElementsByClassName()方法无法改变其中的值。 HTML代码如下： <body> <div class="screen"> <p id="present" class="show">即将开始</p> </div> <button id="1" onclick="star
解决对象不支持“getElementsByClassName”属性或方法 ie兼容性
weixin_34292402的博客
12-25 2153
解决 IE 或者兼容模式不支持 document.getElementsByClassName() 的方法 自已实现document.getElementsByClassName()； 网页错误详细信息消息: 对象不支持此属性或方法 document.getElementsByClassName('element_name') 需要自己实现下该方法，因为ie5之前...
getElementsByClassName和getElementsByTagName上为什么innerHTML和innerText属性不起作用。
qq_56715703的博客
12-03 861
总结：getElementsByClassName和getElementsByTagName获取的是集合，在最后加[0]即可获取具体元素，就有innerHTML和innerText属性了。详解： 在做数据绑定到页面的时候，我们经常会用到innerHTML和innerText，其二者都是可以往节点中添加内容，而二者区别是innerHTML可以识别标签。 我在今天用innerHTML的之后，发现页面（红框部分）并没有放上数据。但是打印了一下元素发现元素上有innerHTML属性。 此
`getElementsByClassName` 函数返回的是什么类型的数据？
最新发布
12-06
`getElementsByClassName` 函数返回的是一个 HTMLCollection 对象，它类似于数组，包含了所有指定类名的元素。可以通过下标或者循环来访问其中的元素。 示例代码如下： ```javascript // 获取所有 class 为 intro ...
JS document对象简单用法完整示例
10-15
JavaScript中的`document`对象是浏览器提供的全局对象，用于访问和操作HTML文档的各个部分，包括元素、属性、事件等。本篇文章将详细讲解`document`对象的一些基础用法，包括直接和间接获取页面元素的方法。 1. **...
document节点和element节点的属性和操作
SORYUSHIKINAMI的博客
05-03 3049
JavaScript这门语言通过Document类型来表示文档。在浏览器中，**用document来表示整个HTML或者XML文档**。**document节点是文档的根节点，其它节点都是它的子节点**。只要浏览器开始载入HTML文档，这个节点对象就存在了，可以直接调用。 document节点： - 子节点： 对于HTML文档来说，document对象一般有两个子节点。 1)第一个是docume...
using document.getElementBy().innerHTML
anke1460
06-03 151
whatever function hello() { var foo = mydocumentgetElementsByClassName("myClass")[0]; if (foo) alert(foo.innerHTML); } function mydocumentgetElementsByClassName(what) { var all=doc...
通过getElementsByClassName获取的节点，style.display失效
qq_37332077的博客
12-02 5039
遇到问题： 点击删除按钮，想删除一块内容。这么写： 会发现代码报错！ 解决方案一： getElementsByClassName与ID获取的不一样，打印getElementsByClassName得到的是一个HTMLCollection，要用getElementsByClassName(“content”)[0]的形式。 解决方案二： 用ID完全没问题拉 ...
JavaScript getElementsByClassName()方法介绍
路虽远，行则必至！
06-25 2万+
根据元素的class属性值查询一组元素节点对象 getElementsByClassName()可以根据class属性值获取一组元素节点对象，但是该方法不支持IE8及以下的浏览器 注意：这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中，如下图： 我们若要查找具体元素，就必须使用索引，如下图： 我们可以通过length属性，获取其长度，如下图： 我们可以通过innerHT...
创建元素 innerHTML与document.createElement() 的区别
钱小端~
03-09 507
WebAPI中，document.write() 、 innerHTML与document.createElement() 三种创建元素方式的区别： 1. document.write() 创建元素 如果页面文档流加载完毕，再调用这句话会导致页面重绘（即其他元素全部消失，重新创建一个只有这个新建元素的页面） 2. innerHTML 创建元素 3. document.createElement() 创建元素 总结： document.write()是直接将内容写入页面的内容流，文档执行完毕，则它会
JS笔记2
qq_55910048的博客
08-15 481
大概记录
js
qq_42606798的博客
02-02 165
Document 对象 每个载入浏览器的 HTML 文档都会成为 Document 对象 getElementById() 返回对拥有指定 id 的第一个对象的引用。 getElementsByName() 返回带有指定名称的对象集合。 getElementsByTagName() 返回带有指定标签名的对象集合 getElementsByClassName() 根据类名获取对象集合 in...
document.getElementByclassName（）方法
热门推荐
boat_sea的博客
04-29 24万+
document.getElementByclassName（）方法;使用指定的calss属性值返回相关元素的集合(节点列表)使用getElementByclassName（）方法，使用指定的calss属性值(名称)返回当前文档中所有相关元素的集合(节点列表对象)。节点列表对象代表了收集到的所有相关节点，可以使用序列号(index)访问节点列表，index的值从0开始。注：使用节点列表对象的len...
html中document.getElementsByClassName() 方法
徊忆羽菲
03-12 7585
html中document.getElementsByClassName函数的使用方法定义和使用使用方法 定义和使用 getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。 NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。 提示： 你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取你需要的那个元素。
javascript 原生类 DOMParser 把 字符串格式的HTML文档源码 转换成 document DOM对象
wuyujin1997的博客
10-31 4604
# Intro有一天我在写爬虫。其实也说不上是爬虫，就是打开浏览器上网，觉得页面有些数据挺有意思，就打开开发者工具，在 Network/Console 中通过 javascript 原生的 fetch 方法 批量、自动地请求一些web资源。其中有一个关节，是以下的需求：有一些字符串格式的HTML源码，需要将其转换为 document 对象(DOM对象)，这样我就可以在 console 直接使用选择器(selector)对该HTML文档的文本内容进行过滤清洗处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值