getelementbyid和标记名和类名

Question

我想知道如何使用纯javascript获取元素。

我的代码如下：

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

在这里，我想找到组合元素：

find元素有id abc和tagname p
find元素有id abc和classname xy
find元素具有classname foo2和tagname span
find元素有id abc和classname xy和tagname div

我知道每页不能使用多个ID。 但在更糟糕的情况下，对不同的标签使用相同的ID是否可以？ 在HTML？

Answer 1

您可以使用querySelectorAll获得更多“高级”选择。 对于你的三个例子：

document.querySelectorAll("p#abc")
document.querySelectorAll(".xy#abc")
document.querySelectorAll("span.foo2")

Answer 2

如果HTML中的ID不是唯一的，那么无论使用多少个浏览器进行测试，都无法保证使用它们的任何Javascript都能正常工作。

因此，您要查找的前两项内容将使用getElementById，因为您的ID应该是唯一的。

对于第二个，使用getElementsByTagName，并遍历结果以检查每个是否具有所需的类。

Answer 3

你可以这样做：

document.getElementByXXX - >你可以把Tag，Name，Calss，ID代替XXX

element = document.getElementById（id）;

例如，如果要更改bg颜色：

 window.onload = function(){
 document.getElementById("your_id").style.background ="red";
}

这里有一些很好的例子： http ： //xahlee.info/js/js_get_elements.html

@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>

没有其他方法可以使用或使用jquery。

Answer 4

由于你可以使用具有唯一ID的HTML（如果它们根本没有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>

然后为您的三个不同选择：

document.getElementById("abc1")获取id为abc1的<div> 。
document.getElementById("abc2")您提供id为abc2的<p> 。
document.getElementById("foo")您提供id为foo的<span> 。

getelementbyid和标记名和类名

问题描述

4 个解决方案

解决方案1
8 2012-08-17 19:17:06

解决方案2
2 2012-08-17 19:19:49

解决方案3
0 2012-08-17 19:22:28

解决方案4
0 2012-08-17 19:27:08

getelementbyid和标记名和类名

问题描述

4 个解决方案

解决方案1 8 2012-08-17 19:17:06

解决方案2 2 2012-08-17 19:19:49

解决方案3 0 2012-08-17 19:22:28

解决方案4 0 2012-08-17 19:27:08

解决方案1
8 2012-08-17 19:17:06

解决方案2
2 2012-08-17 19:19:49

解决方案3
0 2012-08-17 19:22:28

解决方案4
0 2012-08-17 19:27:08