如果你是使用類,而不是行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()
來檢索相關元素的nodeList,並直接進行迭代:
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。
警告他關於分離'
'標籤 – Itay
@Itay:好點(我忽略了那些),謝謝!編輯項。 –
@ david-thomas:你還沒理解我。我必須使用getElementById(或任何其他方法)來獲取標籤內文。對不起,我錯誤地提出了我的問題。我已經更新了它。 –