Get the list of attributes of a HTML string using Javascript

Question

How can I get the list of attributes of an HTML string using Javascript? Here's my code so far.

function traverse_test(){
    var root=document.getElementById('arbre0').childNodes;
    for(var i=0;i<root.length;i++){
        var lis = root[i];
        if (lis =='[object HTMLUListElement]') {
            for (var member in lis) {
                if (typeof lis[member] == "string") {
                    var assertion = lis[member];
                    var resultat = assertion.search(/..Bookmarks/);
                    if (resultat != -1) {
                        output.innerHTML+= lis[member];
                        // Here I'd like to have the list of lis[member] attributes
                        for(var attr in lis[member].attributes) {
                            output.innerHTML+=lis[member].attributes[attr].name + "=\""+ lis[member].attributes[attr].value + "\"";
                        }
                        break;
                    }
                }
            }
        }
    }
}

You mean any arbitrary string of HTML? like parseHTMLAndGetAttributes("<img src=\"test.jpg\" />");? Or do you want to get attributes from the DOM of an already parsed page? The latter is easier. — Joshua Carmody
– Joshua Carmody, Commented Apr 21, 2011 at 14:06
From the DOM but I'm going tro try your first method, thanks ! — Bruno
– Bruno, Commented Apr 21, 2011 at 14:08
@Bruno: that's not actually a method that exists. @Joshua was just using that as a hypothetical use case. — Matt Ball
– Matt Ball, Commented Apr 21, 2011 at 14:09
Actually the string belongs to an element of the DOM but I have not direct access to it. — Bruno
– Bruno, Commented Apr 21, 2011 at 14:16
@Bruno - yeah, the function name was one I made up just for illustrative purposes. Sorry that wasn't more clear. — Joshua Carmody
– Joshua Carmody, Commented Apr 21, 2011 at 14:18

Matt Ball · Accepted Answer · 2011-04-21 14:09:02Z

14

Use the Node.attributes property of a DOM element. Example:

var foo = document.getElementById('foo'),
    attrs = foo.attributes,
    i = attrs.length,
    attr;

while (i--)
{
    attr = attrs[i];
    console.log(attr.name + '="' + attr.value + '"');
}

Demo: http://jsfiddle.net/mattball/j8AVq/

answered Apr 21, 2011 at 14:09

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lorenzo Gangi · Accepted Answer · 2017-08-15 17:07:41Z

8

Seems like all these answers point to how to get an attr list from a node but the question asks for attrs from an HTML string. Here is my 2cents.

//turn your string into a node and get your html strings NamedNodeMap
var temp = document.createElement("div");
    temp.innerHTML  = "<div attr-1 attr-2 attr-3 attr-4></div>";
    temp = temp.firstElementChild.attributes; 

    //put the attributes in a an array
    var list = Object.keys(temp).map( function( index ) { return temp[ index ] } );

    console.log( list );

answered Aug 15, 2017 at 17:07

Lorenzo Gangi

6217 silver badges8 bronze badges

1 Comment

Mickey Vershbow Oct 22 at 3:56

Super helpful thanks.

Community · Accepted Answer · 2017-05-23 12:18:06Z

1

If you know the attributes to get the value you can do:

var MyValue = document.getElementById("myimage").getAttribute("src")

In JavaScript to loop all attributes:

var el = document.getElementById("someId");
var arr = [];
for (var i=0, attrs=el.attributes, l=attrs.length; i<l; i++){
    arr.push(attrs.item(i).nodeName);
}

The above code was taken from this question

Jquery might be another option:

http://plugins.jquery.com/project/getAttributes

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Apr 21, 2011 at 14:06

Tom Gullen

61.9k89 gold badges294 silver badges472 bronze badges

Comments

k33g_org · Accepted Answer · 2011-11-30 18:05:30Z

0

[].slice
.apply(document.querySelector('something').attributes)
.forEach(function(item){
    console.log(item, item.name, item.value);
});

answered Nov 30, 2011 at 18:05

k33g_org

1

1 Comment

ajacian81 Over a year ago

Hi, welcome to StackOverflow! It's always good to explain your code answers :)

Collectives™ on Stack Overflow

Get the list of attributes of a HTML string using Javascript

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related