我想从 HTMLCollection 中获取一个元素。document.getElementsByClassName 的返回正是我所期望的,但是当我尝试访问它的任何属性时,看起来那里什么也没有。这是我的代码(此代码在 .js 文件中运行,我将其 src 到我的 index.html 中):
document.addEventListener('DOMContentLoaded', function () {
var code = document.getElementsByClassName('CodeMirror-code');
console.log(code);
console.log(code[0]); //undefined
console.log(code.length); //0
}
Run Code Online (Sandbox Code Playgroud)
这是控制台日志:
HTMLCollection(1)
0: div.CodeMirror-code //this is the div I want to access
length: 1
__proto__: HTMLCollection
undefined
0
Run Code Online (Sandbox Code Playgroud)
另外,如果我在控制台中输入:
var code = document.getElementsByClassName('CodeMirror-code');
code[0]
Run Code Online (Sandbox Code Playgroud)
我得到回报:
<div class="CodeMirror-code">...</div>
Run Code Online (Sandbox Code Playgroud)
这正是我正在寻找的,但这不是我在脚本中得到的结果。
我的一段前端 JS 代码依赖于包含数千个 DOM 节点的实时HTMLCollection 。由于它是实时的,因此它会随着 DOM 的更新而自动更新。
这与每次修改 DOM 时重新运行调用相同吗document.getElementsByClassName?还是在幕后有性能优化?
我有一些Javascript代码从HTMLCollection中删除项目,如下面的代码.我得到拼接时调用一个错误,指出:allInputs.splice is not a function.如果元素类型不是按钮类型,我需要从HTMLCollection中删除项目.
问题:如何从此类集合中删除项目?
我可以将未删除的项目传输到数组,然后我可以使用数组而不是原始的HTMLCollection,但不确定是否还有其他更短的方法.
JavaScript代码
var allInputs = contentElement.getElementsByTagName('input');
for (var i = (allInputs.length - 1) ; i >= 0; i--) {
if (allInputs[i].type !== "button") {
allInputs.splice(i, 1);//this is throwing an error since splice is not defined
}
}
Run Code Online (Sandbox Code Playgroud) 我想获取带有“Box”类的所有 HTML 元素,然后该集合将其转换为数组,以便我可以通过位置访问每个元素。
这是我制作的代码:
function BoxAppearence() {
var BoxCollection = document.getElementsByClassName("Box");
console.log(BoxCollection)
var Box = BoxCollection.split("");
console.log(Box)
console.log(Box[12])
}
BoxAppearence();
Run Code Online (Sandbox Code Playgroud) 的test.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script>
var eles = document.getElementsByClassName('review');
console.log(eles);
console.log(eles.length);
console.log(eles[0]);
// for(var i=0, max=eles.length)
</script>
</head>
<body>
<div class="review"></div>
<div class="review"></div>
<div class="review"></div>
<div class="review"></div>
<div class="review"></div>
</body>
Run Code Online (Sandbox Code Playgroud)
我检查了eles代表HTMLCollenction.
这里说HTMLCollection还通过名称和索引直接将其成员公开为属性.
所以我尝试通过console.log(eles.length)和console.log(eles [0])进行调试.但不幸的是,控制台显示0和未定义.(使用谷歌Chrome工具开发人员)
我怎样才能访问eles的结果?我想更改样式并将属性添加到ClassName获取的标签.另外,我只能使用自然的Javascript.
我试图获取多选下拉列表的选定值并将它们转换为单个字符串以供稍后操作.目前我有以下代码:
HTML:
<select id="genreList" multiple="multiple" name="addGenre[]" style="width: 150px;font-size: 10pt;">
<option value="Action">Action</option>
<option value="Comedy">Comedy</option>
<option value="Fantasy">Fantasy</option>
<option value="Horror">Horror</option>
<option value="Mystery">Mystery</option>
<option value="Non-Fiction">Non-Fiction</option>
<option value="Period">Period</option>
<option value="Romance">Romance</option>
<option value="Sci-Fi">Sci-Fi</option>
<option value="Thriller">Thriller</option>
</select></p>
<p><input type="button" onclick="newComic()" value="Add Comic" id="btnAddComic" style="font-size: 10pt; width: 150px; height:40px;"></p>
Run Code Online (Sandbox Code Playgroud)
JavaScript的:
<script>
function newComic()
{
var elem = document.querySelector("#genreList").selectedOptions;
var arr = [].slice.call(elem);
var genres = arr.join(', ');
window.alert(genres);
}
</script>
Run Code Online (Sandbox Code Playgroud)
警报窗口当前正在输出以下内容:
[object HTMLOptionElement,object HTMLOptionElement,...]
其中'...'代表任何进一步的假设选项.
我需要的是"类型"输出,例如,"动作,浪漫,惊悚".
在此先感谢您的帮助.
我一直在关注w3schools的幻灯片教程,以学习如何创建自己的.
这是教程代码的链接.我指的是这段代码.
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides =
document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace("
active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every
2 seconds
}
</script>
Run Code Online (Sandbox Code Playgroud)
我想为一个页面制作多个幻灯片,所以我这样做了所以代码的这一部分将采用一个参数然后我可以插入我的图像列表.但是,当我将代码更改为此...
var images = …Run Code Online (Sandbox Code Playgroud) 在Javascript中,我试图创建一个新的div.这是我为了制作div而添加的内容.
html+= "<div>" + concerts + "</div>";
Run Code Online (Sandbox Code Playgroud)
但在我的浏览器中显示[object HTMLCollection] div标签应该在哪里.
音乐会是预定义的变体.
任何人都可以向我解释我可能缺少什么来完成这项工作.提前致谢.
javascript ×8
html ×3
arrays ×2
dom ×2
class ×1
classname ×1
function ×1
html5 ×1
object ×1
performance ×1