what does document.createElement('a') do in this code?

Question

I found some code to get parameters in the form ?a=1&b=2 from a URL but there are parts I don't understand.

I can work out the last part to some degree - he is splitting the string on "&" and then extracting the parts on either side of the "=" sign. I don't quite understand the decodeURIComponent function, I looked it up and am still confused. The main problem, though, is these three lines:

var parser = document.createElement('a');
parser.href = window.location.href;
var query = parser.search.substring(1);

How does making a non-existant element work, why can he do parser.href and why do parser.search.substring(1)?

full code:

function get_params() {
    var params = {};
    var parser = document.createElement('a');
    parser.href = window.location.href;
    var query = parser.search.substring(1);
    var vars = query.split('&');
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split('=');
        params[pair[0]] = decodeURIComponent(pair[1]);
    }
 }

If you test it in the browser console it does seem to work: it looks like `` elements expose the parsed URL search property at least. In any case there are [many other options here](https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript): URLSearchParams seems the most modern. — Rup, Feb 12 '19 at 16:14
Don't think of it as not existing, because it does exist, it's just not attached to the DOM so you can't see it. However, you can still work with it. — Doug F, Feb 12 '19 at 16:19
the element doesn't "not exist" - it exists as a variable in the code. It just hasn't been added to the DOM (i.e. added to the page). All HTML elements can be represented as code variables, whether or not they are currently part of the actual page or not. — ADyson, Feb 12 '19 at 16:23
decodeURIComponent will decode any special characters in the querystring values. e.g. if a querystring parameter looked like "param1=a&B"...then the browser would encode the `&` to `%26`. It has to do that because `&` is a special character in a URL, denoting the boundary between parameters (e.g. you might have `param1=X&param2=Y` - the browser knows where param2 starts because of the `&`), so otherwise it would be confusing where the boundary was, with an extra & in there. Therefore, in order to get back the original input value, it needs to be decoded again. — ADyson, Feb 12 '19 at 16:27
BTW the part of the code which extracts parameters using string splitting is somewhat obsolete - the [URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) class can do that for you in modern browsers. — ADyson, Feb 12 '19 at 16:29

score 2 · Accepted Answer · answered Feb 12 '19 at 16:31

It creates an <a> element, with a href attribute equal to the current URL. This element is then interrogated to get the GET query string.

However, these 3 lines:

var parser = document.createElement('a');
parser.href = window.location.href;
var query = parser.search.substring(1);

Could just be replaced with:

 var query = window.location.search.substring(1);

score 0 · Answer 2 · answered Feb 12 '19 at 16:25

0

var parser = document.createElement('a');
parser.href = window.location.href;

The above code creates an html <a> tag and creates a link to the current page in the browser window.

answered Feb 12 '19 at 16:25

Alex Morrison

186
5
18

score 0 · Answer 3 · answered Feb 12 '19 at 16:31

Using parser.search doesn't work. No clue whats going on there, or why they made an <a> element just to put an href on it. Heres something similar that will work:

function get_params() {
    var params = {};
    var href = window.location.href;
    href = href.substring(href.lastIndexOf("?"), href.length)
    var vars = href.split('&');
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split('=');
        params[pair[0]] = decodeURIComponent(pair[1]);
    }
}

As for the decodeURIComponent, URL's have some characters encoded for transmission. For example, a space is represented by %20. This function decodes it back to a regular string.

what does document.createElement('a') do in this code?

3 Answers3