javascript getelementbyid 和标记名和类名
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12011867/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
getelementbyid and tagname and classname
提问by Raj Mehta
I want to know how you can get element using pure javascript.
我想知道如何使用纯 javascript 获取元素。
I have my code below:
我的代码如下：
<html>
<body>
<div id="abc" class="xy"> 123 </div>
<p id="abc" class="xyz"> 123 </p>
<span id="foo" class="foo2"> foo3 </span>
</body>
</html>
Here i want to find element with combination:
在这里我想找到带有组合的元素：
- find element has id abc and tagname p
- find element has id abc and classname xy
- find element has classname foo2 and tagname span
- find element has id abc and classname xy and tagname div
- 查找元素具有 id abc 和标记名 p
- 查找元素具有 id abc 和类名 xy
- 查找元素具有类名 foo2 和标记名跨度
- 查找元素具有 id abc 和类名 xy 和标记名 div
I know we can't use more than one id per page. But in worse situation is it ok to have same ID to different tags? in html?
我知道每页不能使用多个 id。但在更糟糕的情况下，不同的标签可以使用相同的 ID 吗？在 html 中？
回答by Niet the Dark Absol
You can get more "advanced" selection using querySelectorAll. For your three examples:
您可以使用querySelectorAll. 对于您的三个示例：
document.querySelectorAll("p#abc")document.querySelectorAll(".xy#abc")document.querySelectorAll("span.foo2")
document.querySelectorAll("p#abc")document.querySelectorAll(".xy#abc")document.querySelectorAll("span.foo2")
回答by Rajesh J Advani
If the IDs in the HTML aren't unique, any Javascript using them can't be guaranteed to work correctly, no matter how many browsers you test it in.
如果 HTML 中的 ID 不是唯一的，则无法保证任何使用它们的 Javascript 都能正常工作，无论您在多少浏览器中对其进行测试。
So the first two things you're looking for would use getElementById, since your IDs should be unique.
因此，您要查找的前两件事将使用 getElementById，因为您的 ID 应该是唯一的。
For the second, use getElementsByTagName, and loop through the results to check whether each has the required class.
对于第二个，使用 getElementsByTagName，并循环遍历结果以检查每个是否具有所需的类。
回答by user1598696
You can do like this :
你可以这样做：
document.getElementByXXX--> you can put Tag,Name,Calss,ID instead of XXX
document.getElementByXXX--> 你可以用 Tag,Name,Calss,ID 代替XXX
element = document.getElementById(id);
element = document.getElementById(id);
example if you want to change bg color:
例如，如果你想改变背景颜色：
window.onload = function(){
document.getElementById("your_id").style.background ="red";
}
here are some good examples: http://xahlee.info/js/js_get_elements.html
这里有一些很好的例子：http: //xahlee.info/js/js_get_elements.html
@Raj Mehtaits working:
@Raj Mehta它的工作原理：
<html>
<head>
<script>
function load(){
var myObj1 = document.getElementById("root").getElementsByClassName("xyz");
var myObj2 = document.getElementById("root").getElementsByClassName("xy");
var myObj3= document.getElementById("root").getElementsByClassName("foo2");
var myObj4= document.getElementById("root").getElementsByTagName("p");
var myObj5= document.getElementById("root").getElementsByTagName("div");
myObj1[0].style.color="red";
myObj2[0].style.color="green";
myObj3[0].style.color="skyblue";
myObj4[1].style.color="purple";
myObj5[1].style.color="blue";
}
</script>
</head>
<body onload="load()" >
<div id="root">
<div id="abc" class="xy"> 123 <div> here you combine using array[0],[1],[2]... depends on you structure</div> </div>
<p id="abc" class="xyz"> 123 </p>
<span name="span" id="foo" class="foo2"> foo3 </span>
<p id="new" name="name"> one more lvl</p>
</div>
</body>
</html>
There is no other way either this or use jquery.
没有其他方法可以使用此方法或使用 jquery。
回答by Alex Kalicki
Since you're OK with them having unique ids (which is required in HTML if they have ids at all), factor your HTML to this:
由于您对它们具有唯一 id（如果它们有 id 则在 HTML 中是必需的）感到满意，因此将您的 HTML 考虑在内：
<html>
<body>
<div id="abc1" class="xy"> 123 </div>
<p id="abc2" class="xyz"> 123 </p>
<span id="foo" class="foo2"> foo3 </span>
</body>
</html>
Then for your three different selections:
然后为您的三个不同选择：
document.getElementById("abc1")gets you the<div>with idabc1.document.getElementById("abc2")gets you the<p>with idabc2.document.getElementById("foo")gets you the<span>with idfoo.
document.getElementById("abc1")给你<div>带 idabc1。document.getElementById("abc2")给你<p>带 idabc2。document.getElementById("foo")给你<span>带 idfoo。
