针对getElementsByClassName用于在事件发生时更改元素的样式和getelementsbyclassname修改某属性这两个问题，本篇文章进行了详细的解答，同时本文还将给你拓展docu
针对getElementsByClassName用于在事件发生时更改元素的样式和getelementsbyclassname修改某属性这两个问题，本篇文章进行了详细的解答，同时本文还将给你拓展document.all与getElementById、getElementsByName、getElementsByTagName用法区别、document.all与getElementById、getElementsByName、getElementsByTagName用法区别-getElementById_javascript技巧、document.getElementsByClassName（...）返回“ ...不是函数”、ElementRef上的Angular2 getElementsByClassName等相关知识，希望可以帮助到你。
本文目录一览：- getElementsByClassName用于在事件发生时更改元素的样式（getelementsbyclassname修改某属性）
- document.all与getElementById、getElementsByName、getElementsByTagName用法区别
- document.all与getElementById、getElementsByName、getElementsByTagName用法区别-getElementById_javascript技巧
- document.getElementsByClassName（...）返回“ ...不是函数”
- ElementRef上的Angular2 getElementsByClassName
getElementsByClassName用于在事件发生时更改元素的样式（getelementsbyclassname修改某属性）
我正在尝试使用
onmouseover="document.getElementsByClassName().style.background=''color''"将鼠标悬停在另一个页面元素上时，将具有给定类名的所有div的颜色更改为另一种颜色。
这是一个jsfiddle-如果任何人都可以提供一些有关我哪里出错的有用指针，那将是很棒的，我敢肯定，我确实很想念我。它与document.getElementById一起使用，但是只更改了第一个div的颜色，而不是全部。
谢谢
答案1
小编典典就像函数名称所暗示的那样，getElementsByClassName返回一个集合，而不仅仅是一个对象。因此，您需要遍历它们并为其应用颜色。
document.getElementsByClassName() ^_______另外，您的ID部分无效。ID不能有空格，也不应再次出现在页面上，该页面受到以下方面的侵犯：
<th id="colorswitcher A" onmouseover="document.getElementsByClassName(''a'').style.background=''red''">a</th><th id="colorswitcher B" onmouseover="document.getElementsByClassName(''a'').style.background=''blue''">b</th>您可以通过这种方式进行操作（您可以查找什么是处理程序，然后尝试使用它。），不要对处理程序使用内联属性。
window.onload=function(){ var aColl = document.getElementsByClassName(''a''); //Cache the collection here, so that even a new element added with the same class later we can avoid querying this again by using the cached collection. var bColl = document.getElementsByClassName(''b''); document.getElementById(''A'').addEventListener(''mouseover'', function(){ changeColor(aColl, ''red''); }); document.getElementById(''B'').addEventListener(''mouseover'', function(){ changeColor(bColl, ''blue''); });}function changeColor(coll, color){ for(var i=0, len=coll.length; i<len; i++) { coll[i].style["background-color"] = color; }}如果您确实想在实际工作中使用它，则不要更改style属性，而是定义类并在mouseover，mouseout事件上添加/删除类，以便获得CSS的层叠属性的强大功能。
document.all与getElementById、getElementsByName、getElementsByTagName用法区别
理解这句话可看以下：
例1（这个可以让你理解文档中哪些是对象）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Document.All Example</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<h1>Example Heading</h1>
<hr />
<p>This is a <em>paragraph</em>. It is only a <em>paragraph.</em></p>
<p>Yet another <em>paragraph.</em></p>
<p>This final <em>paragraph</em> has <em id="special">special emphasis.</em></p>
<hr />
<script type="text/javascript">
<!--
var i,origLength;
origLength = document.all.length;
document.write('document.all.length='+origLength+"[br /]");
for (i = 0; i < origLength; i++)
{
document.write("document.all["+i+"]="+document.all[i].tagName+"[br /]");
}
//-->
</script>
</body>
</html>输出结果
Example Heading This is a paragraph. It is only a paragraph. Yet another paragraph. This final paragraph has special emphasis. document.all.length=18 document.all[0]=! document.all[1]=HTML document.all[2]=HEAD document.all[3]=TITLE document.all[4]=META document.all[5]=BODY document.all[6]=H1 document.all[7]=HR document.all[8]=P document.all[9]=EM document.all[10]=EM document.all[11]=P document.all[12]=EM document.all[13]=P document.all[14]=EM document.all[15]=EM document.all[16]=HR document.all[17]=SCRIPT
可以通过ID，NAME或INDEX属性访问某个具体的元素
例2（访问一个特定元素）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=gb2312">
<title>单击DIV变色</title>
<style
type="text/css">
<!--
#docid{
height:400px;
width:400px;
background-color:#999;}
-->
</style>
</head>
<body><p id="docid"
name="docname" onClick="bgcolor()"></p>
</body>
</html>
<script language="javascript"
type="text/javascript">
<!--
function bgcolor(){
document.all[7].style.backgroundColor="#000"
}
-->
</script>
上面的这个例子让你了解怎么访问文档中的一个特定元素，比如文档中有一个DIV
<p
id="docid" name="docname"></p>，你可以通过这个DIV的ID，NAME或INDEX属性访问这个DIV：
document.all["docid"]
document.all["docname"]
document.all.item("docid")
document.all.item("docname")
document.all[7]
document.all.tags("p")则返回文档中所有DIV数组，本例中只有一个DIV，所以用document.all.tags("p")[0]就可以访问了。可以用document.all["元素名"].属性名="属性值"来动态改变元素的属性。用这条语句，可以做出许许多多动态网页效果，如：动态变换图片、动态改变文本的背景、动态改变网页的背景、动态改变图片的大小、动态改变文字的大小各颜色等等
<script language="JavaScript">
function cardClick(cardID){
var
obj;
for (var i=1;i<7;i++){
obj=document.all("card"+i);
obj.style.backgroundColor="#3A6EA5";
obj.style.color="#FFFFFF";
}
obj=document.all("card"+cardID);
obj.style.backgroundColor="#FFFFFF";
obj.style.color="#3A6EA5";
for (var i=1;i<7;i++){
obj=document.all("content"+i);
obj.style.display="none";
}
obj=document.all("content"+cardID);
obj.style.display="";
}
</script>document.all可以判断浏览器是否是IE
if(document.all){
alert("is IE!");
}
使用document.all注意的地方
代码1:
<input name=aaa value=aaa> <input id=bbb value=bbb> <script language=Jscript> alert(document.all.aaa.value) //根据name取value alert(document.all.bbb.value) //根据id取 value </script>
代码2：
但是常常name可以相同(如:用checkbox取用户的多项爱好的情况)
<input name=aaa value=a1> <input name=aaa value=a2> <input id=bbb value=bbb> <script language=Jscript> alert(document.all.aaa(0).value) //显示a1 alert(document.all.aaa(1).value) //显示a2 alert(document.all.bbb(0).value) //这行代码会失败 </script>
代码3：理论上一个页面中的id是互不相同的，如果出现不同tags有相同的id
document.all.id 就会失败,就象这样： <input id=aaa value=a1> <input id=aaa value=a2> <script language=Jscript> alert(document.all.aaa.value) //显示 undefined 而不是 a1或者a2 </script>
代码4:
对于一个复杂的页面（代码很长，或者id是由程序自动产生),或着一个
javascript初学者写的程序，很有可能出现两个tags有相同id的情况。
为了编程的时候不出错，我推荐这样的写法：
<input id=aaa value=aaa1>
<input id=aaa value=aaa2>
<input name=bbb value=bbb>
<input name=bbb value=bbb2>
<input id=ccc value=ccc>
<input name=ddd value=ddd>
<script language=Jscript>
alert(document.all("aaa",0).value)
alert(document.all("aaa",1).value)
alert(document.all("bbb",0).value)
alert(document.all("bbb",1).value)
alert(document.all("ccc",0).value)
alert(document.all("ddd",0).value)
</script>这样最安全.
以下是我自己的测试：
<html>
<head>
<title>
document.all test
</title>
<script language="javascript">
function view()
{
/*
//通过name两种访问格式
alert(document.all.aaa.value);
alert(document.all["aaa"].value);
//通过id的两种访问格式
alert(document.all.ccc.value);
alert(document.all["ccc"].value);
*/
//当一页中存在两个name相同的input时不能使用上面的访问方法，因为将返回undefine,请使用下面方式访问
alert(document.all.aaa(0).value);
alert(document.all.aaa(1).value);
//安全的写法
alert(document.all("aaa",0).value);
alert(document.all("aaa",1).value);
}
</script>
</head>
<body>
<form name="form1" id="f1">
<input type="text" name="aaa" >
<input type="text" name="aaa" id="ccc">
<input type="button" name="bbb" value="click" onclick="view();">
</form>
</body>
</html>从上面可以看到我们在使用document.all的时候可能会返回一个值或多个值的情况，所以使用之前一定要判断长度，要不然会出现错误。
如下面的问题：两个函数对多个checkbox进行处理，分别执行全部选中和取消全选功能如果按下面使用会出现什么问题呢？
<HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
function checkall(){
var huang = document.all['huang'];
for(i = 0;i < huang.length;i++){
if(huang[i].type == "checkbox")
{
huang[i].checked = true;
}
}
}
function centerall(){
var huang = document.all['huang'];
for(i = 0;i < huang.length;i++){
huang[i].checked = false;
}
}
//-->
</SCRIPT>
<BODY>
<input type="checkbox" name="huang" value="OFF">
<input type="checkbox" name="huang" value="OFF">
<input type="checkbox" name="huang" value="OFF">
<br>
<input type="button" value = "checkall" onclick = "checkall();">
<input type="button" value = "centerall" onclick = "centerall();">
</BODY>
</HTML>看上面的代码，当表单中有多个checkbox的时候是没有问题的，但当其中只有一个checkbox的时候就会有问题，即点全选的时候不起作用，因为当其中只有一个checkbox的时候不再用document.all["huang"][0].checked来访问，而是直接用document.all["huang"].checked来访问了
看当只有一个checkbox的时候应改成下面代码
<HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
function
checkall(){
var huang = document.all['huang'];
if(huang.length){
for(i = 0;i < huang.length;i++){
if(huang[i].type == "checkbox")
{
huang[i].checked = true;
}
}
}else{
huang.checked =
true;
}
}
function centerall(){
if(huang.length){
for(i =
0;i < huang.length;i++){
if(huang[i].type == "checkbox")
{
huang[i].checked = false;
}
}
}else{
huang.checked = false;
}
}
//-->
</SCRIPT>
<BODY>
<input
type="checkbox" name="huang" value="OFF">
[br]
<input
type="button" value = "checkall" onclick = "checkall();">
<input
type="button" value = "centerall" onclick = "centerall();">
</BODY>
</HTML>或者使用另一种形式，使用getElementsByTagName，如下：
<HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
function
checkall()
{
var huang = document.getElementsByTagName("input");
for(i = 0;i < huang.length;i++){
if(huang[i].type == "checkbox")
{
huang[i].checked = true;
}
}
}
function centerall()
{
var huang = document.getElementsByTagName("input");
for(i = 0;i
< huang.length;i++){
if(huang[i].type == "checkbox")
{
huang[i].checked = false;
}
}
}
//-->
</SCRIPT>
<BODY>
<input type="checkbox" name="huang" value="OFF">
[br]
<input type="button" value = "checkall" onclick =
"checkall();">
<input type="button" value = "centerall" onclick =
"centerall();">
</BODY>
</HTML>
document.all与getElementById、getElementsByName、getElementsByTagName用法区别-getElementById_javascript技巧
不过，如果您需要查找文档中的一个特定的元素，最有效的方法是 getElementById()。
不过要注意的是使用getElementById时对不同的浏览器执行的结果可能是不同的，以下有相关说明
text1：
text2：
我在IE中测试了上面的代码，在第一个文本框中输入1，在第二个文本框中输入2，然后点下面的两个按钮，猜一下结果是什么？
我本意是按钮1返回第一个文本框的值，按钮2返回个文本框的值。
结果是两个按钮都返回了第一个文本框的值。
说明ie执行document.getElementById(elementName)的时候，返回的是第一个name或者id等于elementName的对象，并不是按照ID来查找的。
在fireFox中不存在这样的问题，fireFox执行document.getElementById(elementName)的时候只查找id等于elementName的对象，如果不存在则返回null。
可能IE是考虑的兼容性的问题才这么做的。
以下是我测试所用的代码：
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
这个时候我在两个text中输入的值分别为：eee, www
IE中测试结果为：eee , eee
再看当我把中的id去除时，也即上面代码使用注释中的内容时
我同样输入eee, www
IE中测试结果为：www ,eee
仔细分析上面两个测试的结果：得出结论是：每执行getElementById一次，会将web页面中的所有表单按顺序遍历一次，同时查找id,name两个值，如果存在所要找的id则不再继续查找，如果没有相应的id与之对应则看name值是否与之对应,如果有相应的name与之对应,则不再继续查找。也就是说：
ie执行document.getElementById(elementName)的时候，返回的是第一个name或者id等于elementName的对象，并不是仅按照ID来查找的。
而同样的两个测试在firefox下第一个结果为eee,www,而第二个结果因为没有找到id="ccc"所以返回null
对于这个结果还可参见
http://www.jb51.net/article/16852.htm
他还对getElementById与getElementByName进行了分析，值得一看。
document.getElementsByClassName（...）返回“ ...不是函数”
问题在于，document.getElementsByClassName()返回DOM元素数组。要将事件绑定到元素，您将不得不遍历每个元素，然后将事件绑定到它。这样做：
在迭代之前转换HTML集合：
[...document.getElementsByClassName("toggle")].forEach(function(item){
item.addEventListener("click",function() {
if(this.classList.contains("toggled")) {
this.classList.remove("toggled")
}
else {
this.classList.add("toggled")
}
})
});
OR
使用querySelectorAll()：
document.querySelectorAll(".toggle").forEach(function(item){
item.addEventListener("click",function() {
if(this.classList.contains("toggled")) {
this.classList.remove("toggled")
}
else {
this.classList.add("toggled")
}
})
});
用于检测除类toggle之外的任何元素上的点击：
document.querySelector('body').addEventListener('click',function(event){
if(!event.target.classList.contains('toggle'){
//code to do
}
});
方法document.getElementsByClassName（element s ）返回带有此类的元素数组。因此，当您要访问数组的元素时，必须执行以下操作：
let firstElement = document.getElementsByClassName("toggle")[0]
如果您只想访问一个元素，请使用document.getElementById或document.querySelector('.toggle')
只需添加元素的索引。您的情况是0
document.getElementsByClassName("toggle")[0].addEventListener("click",function() {
if(this.classList.contains("toggled")) {
this.classList.remove("toggled")
}
else {
this.classList.add("toggled")
}
})
与<policy domain="coder" rights="read|write" pattern="PDF" />
相比，请选择querySelectorAll。
在这两种情况下，您都会给您一个dom元素数组。因此，您可以循环并绑定侦听器，也可以采用特定的索引，它将起作用
getElementsByClassName
ElementRef上的Angular2 getElementsByClassName
constructor (private el: ElementRef) {this.el = el.nativeElement}
然后在我的ngOnInit中：
ngOnInit() {
let foos = this.el.getElementsByClassName('foo')
}
触发器：TS2339：属性’getElementsByClassName’在’ElementRef’类型上不存在.
我确实尝试将我的ElementRef转换为HTMLElement而没有任何成功.知道如何处理这个错误吗？
解决方法
el:HtmlElement;
constructor (el: ElementRef) {this.el = el.nativeElement}
使用原始代码this.el将声明为ElementRef类型,但随后将分配HTMLElement.这就是您收到错误消息的原因.
今天关于getElementsByClassName用于在事件发生时更改元素的样式和getelementsbyclassname修改某属性的介绍到此结束，谢谢您的阅读，有关document.all与getElementById、getElementsByName、getElementsByTagName用法区别、document.all与getElementById、getElementsByName、getElementsByTagName用法区别-getElementById_javascript技巧、document.getElementsByClassName（...）返回“ ...不是函数”、ElementRef上的Angular2 getElementsByClassName等更多相关知识的信息可以在本站进行查询。
本文标签：
