遍历html文件以获取href

Question

我的html文件如下

<div id="sidebar" style="top: 100px;">
    <div class="items">
        <div class="item hentry selected" itemscope="" itemtype="http://schema.org/BlogPosting" data-id="3714235398193725034">

            <img class="thumbnail" src="http://4.bp.blogspot.com/-FLnjwm6youQ/UUGhQei8KqI/AAAAAAAAAUE/nEl-5V5IcDw/s30-p/1.jpg" style="width: 30px; height: 30px;">

            <h3 class="title entry-title" itemprop="name">


    <a href="http://mywebsiteurl/2013/03/blog-post.html" rel="bookmark" itemprop="url">art1</a>

  </h3>

        </div>
        <div class="item hentry" itemscope="" itemtype="http://schema.org/BlogPosting" data-id="179325489509322215">
.
.
.
      </div>
  </div>
</div>

HTML具有ID为侧边栏的div

在另一个div的类别项目下

在有多个divs的情况下

在每个带有班级项目的div下，我有一个带有班级标题的h3

在h3标签下，我有'a'标签

我需要在所有带有类项目的div下获取'a'标记的href值。

我将很高兴获得有关如何做同样的帮助。

谢谢

Answer 1

您可以首先使用getElementsByClassName获取具有类项目的所有div，然后使用getElementsByTagName为每个div查找该div下的所有锚标记。

const itemDivs = [...document.getElementsByClassName('item')];

const hrefs = [];
itemDivs.forEach(div => {
    const anchors = [...div.getElementsByTagName('a')];
    if (anchors && anchors.length > 0) {
        anchors.forEach(a => hrefs.push(a.href));
    }
});

console.log(hrefs); // prints ["http://mywebsiteurl/2013/03/blog-post.html"]

Answer 2

您可以尝试使用DOMParser API

DOMParser

Answer 3

一旦尝试使用内联jQuery：

let html = `<div id="sidebar" style="top: 100px;">
    <div class="items">
        <div class="item hentry selected" itemscope="" itemtype="http://schema.org/BlogPosting" data-id="3714235398193725034">
            <img class="thumbnail" src="http://4.bp.blogspot.com/-FLnjwm6youQ/UUGhQei8KqI/AAAAAAAAAUE/nEl-5V5IcDw/s30-p/1.jpg" style="width: 30px; height: 30px;">
            <h3 class="title entry-title" itemprop="name">
    <a href="http://mywebsiteurl/2013/03/blog-post.html" rel="bookmark" itemprop="url">art1</a>
  </h3>
        </div>
        <div class="item hentry" itemscope="" itemtype="http://schema.org/BlogPosting" data-id="179325489509322215">
      </div>
  </div>
  <div class = 'item'>
   <a  href='http://example1.com'/> 
  </div>
  <div class = 'noitem'>
   <a  href='http://example2.com'/> 
  </div>
</div>`

let parser = new DOMParser()
let parsed = parser.parseFromString(html, 'text/html')

let anchors = [...parsed.querySelectorAll('.item > a')]

let hrefs = anchors.map(v=> v.href)

console.log(hrefs)

$.each($("#sidebar .items .item h3 a"),function(a,b){console.log($(b).attr("href"));});