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

最新推荐文章于 2024-08-10 09:00:00 发布

原创最新推荐文章于 2024-08-10 09:00:00 发布 · 333 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #前端

文章讨论了在JavaScript中处理带有复数形式的Elements时遇到的问题。当使用`getElementsByClassName`方法获取元素集合时，返回的是一个数组，需要指定索引才能操作特定元素。在示例代码中，通过将`getElementsByClassName(common)`更改为`getElementsByClassName(common)[0]`，才能正确地使用`innerHTML`为特定元素添加内容。问题的关键在于未正确定位到需要操作的DOM节点。

在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

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