Question

我有一个页面中的项目列表，我只是试图提取一些属性（例如名称和链接URL）。这是列表元素的一个示例：

＆＃13;

<li class="item">
    <a href="http://URL.com" title="Title Item 1" class="image-URL"><img src="http://image.url.com" alt="Title Item 1"></a>

    <div class="details">
        <p class="name">
            <a href="http://URL.com">Title Item 1</a>
        </p>
    
    </div>
</li>

＆＃13;

我如何从中获得头衔？

我知道我可以调用item.findElementsByClassName（＆＃34; name＆＃34;），但这给了我整个元素，而不仅仅是文本＆＃34; Title Item 1＆＃34;

此外，还有办法获取链接网址（http://URL.com）吗？

Answer 1

使用querySelector()函数获取a元素，然后在该元素上使用getAttribute()来获取所需的属性。

DOM中的每个元素都有适当的object，您可以使用它来访问它的属性。

但是href和content有适当的属性，您可以通过它们获取它们。使用href和textContent属性来获取它们。

使用querySelector，如果您没有id

＆＃13;

var link = document.querySelector('.details a');

console.log(link.href, link.textContent);

＆＃13;

<li class="item">
    <a href="http://URL.com" title="Title Item 1" class="image-URL"><img src="http://image.url.com" alt="Title Item 1"></a>

    <div class="details">
        <p class="name">
            <a href="http://URL.com">Title Item 1</a>
        </p>
    
    </div>
</li>

＆＃13;

如果您设置了getElementById

，请id

＆＃13;

var link = document.getElementById('myLink');

console.log(link.href, link.textContent);

＆＃13;

<li class="item">
    <a href="http://URL.com" title="Title Item 1" class="image-URL"><img src="http://image.url.com" alt="Title Item 1"></a>

    <div class="details">
        <p class="name">
            <a id="myLink" href="http://URL.com">Title Item 1</a>
        </p>
    
    </div>
</li>

＆＃13;

为什么使用textContent而不是innerHTML使用纯文本？

innerHTML - 将内容解析为HTML并花费更长时间。

textContent - 使用直接文本，不解析HTML，速度更快。

Answer 2

<a id='someID' href="http://URL.com">Title Item 1</a>

var url=document.getElementById("someID").getAttribute('href');
var title=document.getElementById("someID").textContent;

无法使用Javascript从列表中提取项目属性

2 个答案: