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元素的类名为foo2，标记名为span
find元素具有id abc和classname xy以及tagname div

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

Answer 1

您可以获得更多＆＃34;高级＆＃34;使用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 - ＆gt;你可以把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（如果他们根本没有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")为您提供身份<div>的{{1}}。
abc1为您提供身份document.getElementById("abc2")的{{1}}。
<p>为您提供身份abc2的{{1}}。

getelementbyid和标记名和类名

4 个答案: