Aad*_*rma 9 javascript dom traversal selector
如何在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稍后文档中可能还有其他内容,我无法将索引(正文)附加到上面.
有没有一种简单的方法可以选择,比如<h1>哪个标签属于desleft？我不能使用jQuery或任何其他库.
您可以使用它来进入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();">
你可以使用querySelectorAll:
// Will return a NodeList even if there is only one element found
var heading = document.querySelectorAll('.des > h1');
heading[1].style.color = 'red'; // NodeList is similar to an array
这将返回NodeList.
使用querySelector返回找到的第一个元素:
var first_heading = document.querySelector('.des > h1');
first_heading.style.color = 'blue';
常用于id选择器#single-header-id.
getElementsByTag()
您可以从一个函数开始，然后您可以过滤具有该类的 DOMElements。
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]);
}
}
如果大海捞针未找到，该.indexOf函数将返回。-1
现在重新阅读你的问题，为什么不直接给出你的 h1 的 id 呢？
DOM 遍历是 javascript 的突出问题之一（请输入 jQuery）。
一个简单的方法getElementById()可以让你省去麻烦，而且所有 h1 上的 id 最终都会比尝试制定算法通过其他方式选择它们要干净得多。
| 归档时间： |
|
| 查看次数： |
31436 次 |
| 最近记录： |