标签: htmlcollection

无法从 getElementsByClassName 访问 HTMLCollection 中的元素

我想从 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)

这正是我正在寻找的,但这不是我在脚本中得到的结果。

html javascript htmlcollection

5
推荐指数
1
解决办法
3031
查看次数

维护实时 HTMLCollection 的性能成本是多少?

我的一段前端 JS 代码依赖于包含数千个 DOM 节点的实时HTMLCollection 。由于它是实时的,因此它会随着 DOM 的更新而自动更新。

这与每次修改 DOM 时重新运行调用相同吗document.getElementsByClassName?还是在幕后有性能优化?

javascript performance htmlcollection

5
推荐指数
1
解决办法
379
查看次数

如何从HTMLCollection中删除项目?

我有一些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)

javascript htmlcollection

4
推荐指数
2
解决办法
6427
查看次数

使用 JavaScript 将 HTMLCollection 转换为数组

我想获取带有“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)

javascript arrays class classname htmlcollection

4
推荐指数
1
解决办法
1万
查看次数

无法访问HTMLCollection的值

的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.

javascript html5 dom htmlcollection

3
推荐指数
1
解决办法
8173
查看次数

从HTMLCollection获取值到字符串

我试图获取多选下拉列表的选定值并将它们转换为单个字符串以供稍后操作.目前我有以下代码:

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,...]

其中'...'代表任何进一步的假设选项.

我需要的是"类型"输出,例如,"动作,浪漫,惊悚".

在此先感谢您的帮助.

html javascript arrays htmlcollection

2
推荐指数
1
解决办法
2万
查看次数

无法将HTML Collection作为参数传递给Js函数?

我一直在关注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 function htmlcollection

2
推荐指数
1
解决办法
100
查看次数

为什么显示[object HTMLCollection]而不是我创建的元素?

在Javascript中,我试图创建一个新的div.这是我为了制作div而添加的内容.

html+= "<div>" + concerts + "</div>";
Run Code Online (Sandbox Code Playgroud)

但在我的浏览器中显示[object HTMLCollection] div标签应该在哪里.

音乐会是预定义的变体.

任何人都可以向我解释我可能缺少什么来完成这项工作.提前致谢.

html javascript dom object htmlcollection

1
推荐指数
1
解决办法
8025
查看次数