traversing an html file to get a a href

html link to local file
how to link login page to homepage in html
how to link something in html
hyperlink
how to create links to sections on the same page in html
a href style html
how to link back to homepage in html
anchor link html

My html file is as below

<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>

The html has a div with id sidebar

Under that there is another div with class items

Under that there are multiple divs with class item

Under each div with class item I have a h3 with class title

Under h3 tag I have 'a' tag

I need to get the href values of 'a' tags under all divs with class item.

I would appreciate some help as to how to do the same.

Thanks

You can first get all divs with class item using getElementsByClassNameand then for each div find all the anchor tags under that div using getElementsByTagName.

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"]

Hypertext Links in HTML, Many hypertext links in HTML documents name other HTML documents, e.g. the source anchor represents an opportunity for the user to traverse the link and visit the target anchor, and the No two elements in a document may have the same ID value. a> <a href="/people/faculty/Jones.html#pubs">. I'm trying to get the href value from an tag, by using the attr() of course, but keeping getting 'undefined' is there any way around this????? When I try to save a file I'm trying to download using this, it downloads, but I can't turn it into a ReadStream in Node, because of the stupid undefined error!!

Once try with inline jQuery:

$.each($("#sidebar .items .item h3 a"),function(a,b){console.log($(b).attr("href"));});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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">
           <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://example.com" rel="bookmark" itemprop="url">art2</a>

  </h3>
      </div>
  </div>
</div>

Links in HTML documents, <P>You'll find a lot more in <A href="chapter2.html" title="Go to chapter two"> chapter two</A>. <A href="./chapter2.html" title="Get� The <a> tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the <a> element is the href attribute, which indicates the link's destination. By default, links will appear as follows in all browsers: An unvisited link is underlined and blue; A visited link is underlined and purple

You can try using DOMParser api

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)

XPath, XLink, XPointer, and XML: A Practical Guide to Web , In case of requested traversal, the application must make sure that a starting resource (i.e., HTML's links are a good example for this behavior, as follows: < A .</A> A link like this will display the <A> element's content, formatted in a way that the browser will traverse the link — in other words, load the target document. This works fine. Unfortunetly, when clicking on a text file (or image file), Internet Explorer (and I guess most other browsers as well) insist on showing it in the browser instead of opening the file with the associated application (e.g. Notepad). In our case, this is undesired behavior, since it does not allow the user to edit the file.

Learning JQuery, The combination of Sizzle and jQuery's set of traversal methods makes jQuery an extremely powerful tool for finding elements on the page. of thebasic types ofselectors and traversal methods, so that we have a roadmap for what's available class="selected">All</a> <a href="topics/community.html"> Community</a> <a� Use DOM methods to navigate a document Problem. You have a HTML document that you want to extract data from. You know generally the structure of the HTML document.

Extract attributes, text, and HTML from elements: jsoup Java HTML , Guide to pulling data (attributes, text, and HTML) from a HTML document. To get the value of an attribute, use the Node.attr(String key) method; For the text on an element (and its combined children), use String html = "<p>An <a href='http ://example.com/'><b>example</b></a> link. Parsing and traversing a Document� I am trying to extract the url between the anchor tag of html Unix The urls like above are saved in a file named url_file pre { overflow:scroll; mar | The UNIX and Linux Forums

jQuery Cookbook: Solutions & Examples for jQuery Developers, Notice that I have placed all of my JavaScript before the closing </body> Any additional markup should be placed above the JavaScript in the HTML document . will traverse the DOM and locate the DOM nodes defined by the expression. content="text/html; charset=UTF-8" /> </head> <body> <a href='#'>link</a> <a� The image below illustrates an HTML page as a tree (DOM tree). With jQuery traversing, you can easily move up (ancestors), down (descendants) and sideways (siblings) in the tree, starting from the selected (current) element. This movement is called traversing - or moving through - the DOM tree.

Comments
  • I have a h3 tag between my div tag and a tag
  • The Element.getElementsByTagName() method returns a live HTMLCollection of elements with the given tag name. All descendants of the specified element are searched, but not the element itself. All a tags under the div is retrieved by getElementsByTagName(). It will get the a tag even if there is an h3 tag between the div and a tags.
  • Also the h3 tag has classname title, so I tried with that and it worked but the problem is that the array hrefs has 1345 values but in the browser console it shows a few and then ...
  • If you see my code you will find there is a div with class items which has a div with class item which has a h3 tag which has a a href with value mywebsiteurl/2013/03/blog-post.html, This is the value i want.. I do not have the additional divs you added