Fatal编程技术网

javascript选择器

javascript dom

javascript选择器,javascript,dom,selector,traversal,Javascript,Dom,Selector,Traversal,如何在javascript中选择DOM元素？ 例如： <div class="des"> <h1>Test</h1> <div class="desleft"> <p>Lorem Ipsum.</p> </div> <div class="Right"> <button>Test</bu

如何在javascript中选择DOM元素？
例如：

<div class="des">
    <h1>Test</h1>
        <div class="desleft">
          <p>Lorem Ipsum.</p>
        </div>
        <div class="Right">
           <button>Test</button>
        </div>
</div>


试验
同侧眼线

试验
现在如何选择
h1
？这只是更大页面的一部分，因此无法使用
getElementsByTagName（）
，因为其他页面可能会被选中。另外，由于以后文档中可能还有其他
h1
，因此我无法将索引（正文）附加到上面

有没有一种简单的方法可以选择，比如说
标签，它位于
desleft
的类名下？
我不能使用jQuery或任何其他库。

如果要选择类的第一个元素
desleft
之前的
h1
，则始终可以执行以下操作：

document.getElementsByClassName("desleft")[0].previousSibling.previousSibling
例如：

previousSibling
需要调用两次，因为两者之间的文本节点为空。这就是为什么使用库来做这些事情是最好的方法

getElementsByTag()
将是一个函数，您可以从它开始，然后您可以筛选具有该类的doElement

var h1_array = document.getElementsByTag('h1');

var h1_class_array = [];
for (var i=0, len=h1_array.length; i < len; i++) {
    if (h1_array[i].className.indexOf('classname') !== -1) {
        h1_class_array.push(h1_array[i]);
    }
}
var h1_array=document.getElementsByTag（'h1'）； var h1_类_数组=[]； 对于（变量i=0，len=h1_array.length；i 如果在干草堆中找不到针，则
.indexOf
函数返回
-1

现在重读你的问题，为什么不给出你的h1的id呢

DOM遍历是javascript的一个突出问题（输入jQuery）

一个简单的
getElementById（）
会让你省去一个头疼的问题，而且最终所有h1上的ID都会比试图制定一个算法来通过其他方式选择它们干净得多。

你可以用这个来访问你的h1：

var des = document.getElementsByClassName('des')
var fc = des[0].getElementsByTagName('h1')
alert(fc[0].innerHTML)
w3.org现在有选择器(http://www.w3.org/TR/selectors-api/#examples). 这里有两种不同的方式在Chrome上对我有效。您可能希望使用querySelectorAll函数返回列表

<script type="text/javascript">
//looks for <h1> tag under <div> with className "des"
showOff1 = function() {
  var x = document.querySelector(".des h1");
  alert(x.innerHTML);      
}
//looks for <div> tag with className "desleft" and then use previousSibling to traceback <h1> tag
showOff2 = function() {
  var y = document.querySelector("div.desleft");
  var z = y.previousSibling.previousSibling;
  alert(z.innerHTML);      
}
</script>
<body onload="showOff2();">


//查找类名为“des”的下的标记
showOff1=函数（）{
var x=document.querySelector（“.des h1”）；
警报（x.html）；
}
//查找类名为“desleft”的标记，然后使用previousSibling来回溯标记
showOff2=函数（）{
变量y=document.querySelector（“div.desleft”）；
var z=y.previousSibling.previousSibling；
警报（z.innerHTML）；
}
使用querySelectorAll 您可以使用：

这将返回一个值

或 用于返回找到的第一个元素：

var first_heading = document.querySelector('.des > h1');

first_heading.style.color = 'blue';
常用于id选择器
#单头id

  • 使用选择器“.desleft”查找className='desleft'的元素
  • 只需移回上一个元素（而不是上一个节点！）
    • 请注意，这在旧版本的IE上不起作用。（至少我认为需要IE9）当你做这样的事情时，没有jQuery是一个真正的小便器，我已经习惯了不用担心DOM的怪癖。我以前从未使用过以前的兄弟姐妹，会经历这个，谢谢：）@jondavidjohn：谢谢，我不知道。回到更多的代码来查找元素：/@Aaditi，如果您需要支持旧浏览器，并且无法使用第三方库，我会准备编写更多的代码。相信它正在被推送，因为html5（FF3、Chrome和Opera 9+）已经支持它。谢谢，这就解决了：）但是，出于好奇，假设我用它来查找大约5个不同的元素，由于为每个元素创建了一个数组，等等，因为有很多或其他标记，所以数组会变得相当大。在现实世界的场景中，它会消耗大量内存/处理吗？显然，没有给定的限制，所有场景最终都会超出可接受的范围，但再一次，香草javascript DOM遍历是其中之一，你只是露齿而笑。举个例子，我不得不将其用于其他元素，我想知道是否有一种简单而简洁的方法可以使用javascript进行DOM遍历。我想，提供id必须是最明智的选择，而不是仅仅因为traversalsyes而增加大小和处理，这正是使竞争对手的JavaScript库如此受欢迎的问题，因为它们的主要功能是DOM遍历和选择，所以在现代javascript编程中不使用某种选择器库是毫无成效的。如果您不能使用jQuery，那么至少可以使用Sizzle，它只是一个选择器引擎（jQuery和YUI内部使用它）。它非常小，将为您节省数百小时的开发时间，防止许多bug，并为您避免许多跨浏览器问题。你自己改造轮子是没有效率的。是的，我完全同意。我觉得有很多方法可以做到这一点，但我并不知道。在任何选择器库中，您都可以使用选择器：
    “.des h1”
    来访问示例中的
    对象。在Sizzle中，它只是：
    var list=Sizzle（“.desh1”）。您可能不需要库：

    var first_heading = document.querySelector('.des > h1');

first_heading.style.color = 'blue';

    

    var h1 = document.querySelector('.desleft').previousElementSibling;