javascript selectors | 易学教程

问题

How does one select DOM elements in javascript?
Like for example:

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

Now how do i select h1? This is just a part of a bigger Page, so cannot use getElementsByTagName(), since others might get selected. Also since there might be other h1's in the document later, i cannot attach the index(body's) to above.

Is there a simple way to select, say <h1> tag which is under the classname of desleft? I cannot use jQuery or any other libraries.

回答1:

getElementsByTag()

Would be a function that you can start with, and then you can filter for the DOMElements that have the class.

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]);
    }
}

The .indexOf function returns -1 if the needle is not found in the haystack.

Now re-reading your question, why not just give your h1's id's ?

DOM traversal is one of javascript's glaring issues (enter jQuery).

a simple getElementById() would save you a headache, and ids on all your h1's would be much cleaner in the end than trying to formulate an algorithm to select them by other means.

回答2:

You can use this to get to your H1:

var des = document.getElementsByClassName('des')
var fc = des[0].getElementsByTagName('h1')
alert(fc[0].innerHTML)

回答3:

w3.org has selectors now (http://www.w3.org/TR/selectors-api/#examples). Here are 2 different ways that worked for me on Chrome. You may want to use querySelectorAll function that returns a list.

<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();">

回答4:

Use querySelectorAll

You can use 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

This will return a NodeList.

or

Use querySelector to return the first element found:

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

first_heading.style.color = 'blue';

Commonly used with an id selector #single-header-id.

Here's a demo

回答5:

If you mean to select a h1 that is before the first element of class desleft, you could always do this:

document.getElementsByClassName("desleft")[0].previousSibling.previousSibling

Example: http://jsfiddle.net/Xeon06/ZMJJk/

previousSibling needs to be called twice because of the empty text node between the two. That's why using libraries to do this stuff is really the best way to go.

回答6:

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

Find element with className='desleft' using selector '.desleft'
Just move back to previous element (not to previous node!)

来源：https://stackoverflow.com/questions/7353641/javascript-selectors

标签

javascript

dom

selector

traversal