Как получить внутренний тег, используя getElementById после указанного элемента?

Question

Как получить тег внутренний текст <a> -tag, который следующий после красный span?

Вот пример исходного кода:

<p> 
    Text1<br> 
    <span style="color:blue">span</span><br> 
    <a href="http://google.com">Google</a> 
</p> 
<p> 
    Text1<br> 
    <span style="color:red">span</span><br> 
    <a href="http://bing.com">Bing</a> 
</p> 
<p> 
    Text1<br> 
    <span style="color:blue">span</span><br> 
    <a href="http://facebook.com">Facebook</a> 
</p> 
    <p> 
    Text1<br> 
    <span style="color:red">span</span><br> 
    <a href="http://myspace.com">myspace</a> 
</p> 

Вот выход:

Я пытался использовать document.get.Element.ByTagName, но я не знаю, как использовать его для элементов, которые следуют только после красного «пролета».

Может быть, я должен использовать jQuery?

Answer 1

Если вы должны были использовать классы, а в линии CSS, можно просто CSS:

.redStyle = { 
    color: red; 
} 

.blueStyle { 
    color: blue; 
} 

// style the elements: 

.redStyle + br + a, /* multiple adjacent-sibling combinators are required 
         if you insist on retaining the 'br' elements */ 
.redStyle ~ a { 
    color: green; 
} 

Это, конечно, требует HTML, такие как:

<p> 
    Text1<br> 
    <span class="blueStyle">span</span><br> 
    <a href="http://google.com">Google</a> 
</p> 
<p> 
    Text1<br> 
    <span class="redStyle">span</span><br> 
    <a href="http://bing.com">Bing</a> 
</p> 

Чтобы получить фактические узлы, или свойство этих узлов, с JavaScript:

function follows(target, cName) { 
    while (target.previousSibling) { 
     if (target.previousSibling.className && target.previousSibling.className.indexOf(cName) > -1) { 
      return true; 
     } else { 
      target = target.previousSibling; 
     } 
    } 
    return false; 
} 

var links = document.getElementsByTagName('a'), 
    relevantLinks = [], 
    relevantText = []; 

for (var i = 0, len = links.length; i < len; i++) { 
    if (follows(links[i], 'redStyle')) { 
     // this adds to the store of relevant links in which you're interested 
     relevantLinks.push(links[i]); 
     // you could act on them directly, but storing them 
     // allows for further use at a later time (if required) 
    } 
} 
for (var i = 0, len = relevantLinks.length; i < len; i++) { 
    // iterating over the relevant links/elements, pushing their text 
    // into another array to store that text 
    relevantText.push(relevantLinks[i]['textContent' || 'innerText']); 
}  

console.log(relevantText); 

JS Fiddle demo.

Конечно, в большинстве современных браузеров, если вы используете для класса имен (опять же, вместо того, чтобы в линии CSS), вы могли бы просто использовать document.querySelectorAll() для получения нодлистого соответствующих элементов, и перебирать, которые непосредственно:

var links = document.getElementsByTagName('a'), 
    relevantLinks = document.querySelectorAll('.redStyle ~ a'), 
    relevantText = []; 

for (var i = 0, len = relevantLinks.length; i < len; i++) { 
    relevantText.push(relevantLinks[i]['textContent' || 'innerText']); 
} 

console.log(relevantText); 

JS Fiddle demo.