7

我想知道如何使用纯 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>

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

  1. 查找元素具有 id abc 和标记名 p
  2. 查找元素具有 id abc 和类名 xy
  3. 查找元素具有类名 foo2 和标记名 span
  4. 查找元素具有 id abc 和类名 xy 和标记名 div

我知道我们每页不能使用多个 id。但在更糟糕的情况下，不同的标签可以有相同的 ID 吗？在 HTML 中？

4

4 回答 4

11

您可以使用querySelectorAll. 对于您的三个示例：

  1. document.querySelectorAll("p#abc")
  2. document.querySelectorAll(".xy#abc")
  3. document.querySelectorAll("span.foo2")
于 2012-08-17T19:17:06.743 回答
2

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

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

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

于 2012-08-17T19:19:49.880 回答
1

You can do like this :

document.getElementByXXX --> you can put Tag,Name,Calss,ID instead of XXX

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

@Raj Mehta its working:

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

于 2012-08-17T19:22:28.200 回答
0

由于您可以接受他们具有唯一的 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>

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

  1. document.getElementById("abc1")得到你的<div>id abc1。

  2. document.getElementById("abc2")得到你的<p>id abc2。

  3. document.getElementById("foo")得到你的<span>id foo。

于 2012-08-17T19:27:08.390 回答