如何改变链接的颜色只使用JavaScript而不是CSS或HTML

Question

我想将BOOK链接更改为红色。我如何通过JavaScript更改它而不添加id或类?我试过使用分段，但它不起作用。谢谢。

var sections = document.getElementsByClassName('section');
sections.getElementsByTagName("a")[2].style.color="red";
sections.getElementsByTagName("li")[2].style.color="red";

<section>
<ul>
<li><a href="">1</a></li>
</ul>
</section>
<section>
<ul>
<li><a href="">2</a></li>
</ul>
</section>
<section>
<ul>
<li><a href="">3</a></li>
</ul>
</section>
<section>
<div class="Search-view">
<ul>
<li><a href="">Search</a></li>
<li><a href="">View </a></li>
<!-- change book to red -->
<li><a href="">Book</a></li> 
<li><a href="">Sell</a></li>
<li><a href="">Get</a></li> 
</ul>
</div>
</section>

Answer 1

问题

虽然没有.section

类的标签，但是使用了.getElementsByClassName('section')。它什么也得不到。

解决方案

// Get all a tags
const allA = document.querySelectorAll('a');
allA.forEach(a => {
// If text in a tag is 'book'
if (/^book$/i.test(a.textContent)) {
// Change color to red
a.style.color = 'red';
}
})

<section>
<ul>
<li><a href="">1</a></li>
</ul>
</section>
<section>
<ul>
<li><a href="">2</a></li>
</ul>
</section>
<section>
<ul>
<li><a href="">3</a></li>
</ul>
</section>
<section>
<div class="Search-view">
<ul>
<li><a href="">Search</a></li>
<li><a href="">View </a></li>
<!-- change book to red -->
<li><a href="">Book</a></li>
<li><a href="">Sell</a></li>
<li><a href="">Get</a></li>
</ul>
</div>
</section>

我个人建议给'book'的a标签添加一个ID，比如<a id="book">Book</a>。

Answer 2

我猜你定义section作为class，然后你试图用Tag覆盖它。因为它说错误在第二行，所以我猜重写失败了。尝试删除类并在section变量

上使用Tag

Answer 3

有更好的方法。比如通过css和它的:nth-child()伪选择器。但是在你的代码中只需要这样做:

var sections = document.getElementsByTagName('section');
sections[sections.length-1].getElementsByTagName("li")[2].getElementsByTagName("a")[0].style.color="red"; 

如果只有CSS，只需将此规则集添加到您的样式表

.Search-view li:nth-child(3) a {
color: red;
}

但是id和类是你的朋友。使用它们。