我想迭代一些DOM元素,我这样做:
document.getElementsByClassName( "myclass" ).forEach( function(element, index, array) {
//do stuff
});
但我得到一个错误:document.getElementsByClassName("myclass").forEach不是一个函数
我使用的是Firefox 3,所以我知道这两个getElementsByClassName和Array.forEach都存在.这很好用:
[2, 5, 9].forEach( function(element, index, array) {
//do stuff
});
是getElementsByClassName数组的结果？如果没有,那是什么？
做getElementsByClassName(等类似的功能getElementsByTagName和querySelectorAll)的工作方式相同getElementById,还是他们返回元素的数组？
我问的原因是因为我试图改变所有元素的样式getElementsByClassName.见下文.
//doesn't work
document.getElementsByClassName('myElement').style.size = '100px';
//works
document.getElementById('myIdElement').style.size = '100px';
好吧,之前我曾经涉猎过JavaScript,但我写的最有用的东西是CSS样式切换器.所以我对此有些新意.假设我有这样的HTML代码:
<div id="foo">
<div class="bar">
Hello world!
</div>
</div>
我怎么改变"Hello world!" 到"再见世界!" ？我知道document.getElementByClass和document.getElementById如何工作,但我想更具体.对不起,如果之前有人询问过.
我正在尝试根据每个DIV的类别切换网站上某些DIV元素的可见性.我正在使用基本的JavaScript代码段来切换它们.问题是该脚本仅使用getElementById,因为getElementByClassJavaScript不支持.不幸的是,我必须使用class而不是id来命名DIV,因为DIV名称是由我的XSLT样式表使用某些类别名称动态生成的.
我知道某些浏览器现在支持getElementByClass,但由于Internet Explorer不支持,我不想走那条路.
我发现脚本使用函数来按类获取元素(例如本页#8:http://www.dustindiaz.com/top-ten-javascript/),但我无法弄清楚如何集成它们与我的切换脚本.
这是HTML代码.DIV本身缺失,因为它们是在使用XML/XSLT加载页面时生成的.
主要问题:如何获取以下Toggle脚本以获取逐个元素而不是按ID获取元素？
<html>
<head>
<!--This is the TOGGLE script-->
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
</head>
<!--the XML/XSLT page contents will be loaded here, with DIVs named by Class separating dozens of li's-->
<a href="#" onclick="toggle_visibility('class1');">Click here to toggle visibility of class 1 objects</a>
<a href="#" onclick="toggle_visibility('class2');">Click here to …javascript class getelementbyid toggle getelementsbyclassname
我想知道如何选择类名为"widget"和"hover"的所有元素,然后从这些元素中删除类"hover".
我有以下JavaScript代码,用于选择类"widget"和"hover"的所有元素:
var elements = document.getElementsByClassName('widget hover');
console.log(elements);
这似乎工作并输出这样的东西(没有错误):
[div#.widget...
问题是,如果我尝试删除类"悬停",我收到一个错误:
var elements = document.getElementsByClassName('widget hover');
console.log(elements);
elements.classList.remove("hover");
这输出:
[item: function]
length: 0
Uncaught TypeError: Cannot call method 'remove' of undefined
谁能告诉我我做错了什么？
请注意我在jQuery中使用它:
$('.widget.hover').removeClass('hover');
...但我正在寻找纯JavaScript的解决方案.
首先,抱歉我的英语不好......
我写了一个函数来改变元素类来改变它们的属性.出于某种原因,只有一些元素发生了变化,我花了几个小时才找到解决方案,但他对我来说似乎很奇怪,也许你可以向我解释一下.
function replace(){
var elements = document.getElementsByClassName('classOne');
for (var i = 0; i < elements.length; i++) {
elements[i].className = 'classTwo';
}
}
不能正常工作,在这里演示,[在chrome 25和FF],所以我采用了循环系数:
function replace(){
var elements = document.getElementsByClassName('classOne');
for (var i = 0; i < elements.length; i) { // Here’s the difference
elements[i].className = 'classTwo';
}
}
这很好用!似乎被称为"推",并且不需要系数......这是正常的吗？它与我见过的例子不同.
提前致谢!
考虑一个简单的JS事件
document.getElementsByClassName('test')[0].onclick=function(){
document.getElementsByClassName('test')[0].innerHTML = 'New Text';
}
如何将此代码扩展为通常适用于所有元素class="test".我的意思是点击元素并替换其内容.实际上,我们需要从click事件中获取节点号(在括号内提供).
我试图更好地理解不显眼的代码中的javascript,而不是像jQuery这样的实用方法.
javascript unobtrusive-javascript javascript-events getelementsbyclassname
我有几个div class='class_name',也已经声明了
var A = document.getElementsByClassName('class_name');
console.log(A[0]);
Chrome控制台显示:
<div class="class_name"> div 1 </div>
Firefox控制台显示:
<unavailable>
问题是什么或可能的原因是什么？
我已经查看了许多类似的问题,但找不到一个在vanilla JS中回答的具体示例如何将类添加到一个不同的元素中并从中删除.我知道它与设置循环和遍历元素有关,但我在确切的过程中迷路了.
我有许多具有类名的元素,faq-container当我点击其中任何一个时,我希望将该类faq-display添加到body标签中.我知道我必须设置一个循环,for (var i = 0; i < elements.length; i++) { elements[i].classList.remove('hover');
}但我不确定在代码中写入它的确切位置以使其工作.我尝试了很多方法,但都失败了.
我当前的脚本如下所示,我只是将数组中的第一个元素作为目标,但我希望能够点击任何faq-container元素并将类名添加到第一个也是唯一的body标记:
document.addEventListener("DOMContentLoaded", function() {
document.getElementsByClassName('faq-container')[0].addEventListener('click', function() {
var faqToggle = document.getElementsByTagName('body')[0];
if (faqToggle.classList.contains('faq-display')) {
faqToggle.classList.remove('faq-display');
// alert("remove faq display!");
} else {
faqToggle.classList.add('faq-display');
// alert("add faq display!");
}
});
});<div class="faq-container cf" id="faq-container">
<h3 <?=ifxless::element( 'name')?>><?=ifxless::fill($this,'name');?> </h3>
<div class="faq-content">
<div class="h_line"> </div>
<div class="faq-bullets" <?=ifxless::element( 'content')?>>
<?=ifxless::fill($this, 'content');?>
</div>
</div>
</div>javascript class getelementsbytagname getelementsbyclassname
是否有可能获得具有指定类之一的元素？这是不一样越来越有元素都指定类.
例如,我想捕捉它的类列表包含要么所有元素one,two或three.
也许是这样的:
var oneTwoThree = document.getElementsByClassName("one, two, three");
我也不想使用jQuery.是getElementsByClassName每个课程的唯一选择并将它们结合起来吗？