How to Iterate Through All Attributes in an HTML Element

How to iterate through all attributes in an HTML element?

This would work in IE, Firefox and Chrome (can somebody test the others please? — Thanks, @Bryan):

for (var i = 0; i < elem.attributes.length; i++) {
    var attrib = elem.attributes[i];
    console.log(attrib.name + " = " + attrib.value);
}

EDIT: IE iterates all attributes the DOM object in question supports, no matter whether they have actually been defined in HTML or not.

You must look at the attrib.specified Boolean property to find out if the attribute actually exists. Firefox and Chrome seem to support this property as well:

for (var i = 0; i < elem.attributes.length; i++) {
    var attrib = elem.attributes[i];
    if (attrib.specified) {
        console.log(attrib.name + " = " + attrib.value);
    }
}

Looping through element's data- attributes

In many modern browsers we have access to these special attributes via the .dataset member on the Node object. Unfortunately, this is not yet an accepted standard, and as such we don't see this being adopted all across the spectrum. Fortunately, there is partial support in every major browser in that these attributes can still be accessed using common methods like getAttribute, as well as by cycling over the .attributes list.

The code below shows the second method:

// Reference to our element
var element = document.getElementById("universals"), attr;

// Cycle over each attribute on the element
for (var i = 0; i < element.attributes.length; i++) {
    // Store reference to current attr
    attr = element.attributes[i];
    // If attribute nodeName starts with 'data-'
    if (/^data-/.test(attr.nodeName)) {
        // Log its name (minus the 'data-' part), and its value
        console.log(
            "Key: " + attr.nodeName.replace(/^data-/, ''),
            "Val: " + attr.nodeValue
        );
    }
}

Fiddle: http://jsfiddle.net/pGGqf/14/

You should find that this approach will work in every major browser, even as far back as IE6. This isn't necessary, again, in browsers that support the .dataset member. There's a bit of extra functionality offered on the .dataset object, so you are free to feature-detect it if you like:

if (element.dataset) {
    // Browser supports dataset member
} else {
    // Browser does not support dataset member
}

Iterating over element attributes with jQuery

The best way is to use the node object directly by using its attributes property. The only difference in my solution below compared to others suggesting this method is that i would use .each again instead of a traditional js loop:

$(xml).find('item').each(function() {
  $.each(this.attributes, function(i, attrib){
     var name = attrib.name;
     var value = attrib.value;
     // do your magic :-)
  });
});

How can I iterate through the property names of the prototype of an html element?

HTMLAudioElement has no specific properties as it inherits its properties from its parent, HTMLMediaElement, and from HTMLElement.

Object.getOwnPropertyNames(HTMLMediaElement)

outputs:

["length", "name", "arguments", "caller", "prototype", "NETWORK_EMPTY",
 "NETWORK_IDLE", "NETWORK_LOADING", "NETWORK_NO_SOURCE", 
 "HAVE_NOTHING", "HAVE_METADATA", "HAVE_CURRENT_DATA", 
 "HAVE_FUTURE_DATA", "HAVE_ENOUGH_DATA", "toString"]

https://developer.mozilla.org/en/docs/Web/API/HTMLAudioElement

As @self pointed out in the comments below, you could also use:

Object.getOwnPropertyNames(HTMLAudioElement.__proto__)

to get the same result, without having to know which class HTMLAudioElement inherits from.

How do I iterate over the HTML attributes of a Beautiful Soup element?

from BeautifulSoup import BeautifulSoup
page = BeautifulSoup('<foo bar="asdf" blah="123">xyz</foo>')
for attr, value in page.find('foo').attrs:
    print attr, "=", value

# Prints:
# bar = asdf
# blah = 123

Loop through an object array and change HTML elements of same class

You have to iterate over myObject, but also to apply current index of the loop to your divs element array.

var myObject = [{    width: 100,    text: "Hello World",    bgColor: '#f00',  },  {    width: 20,    text: "Hi World",    bgColor: "#0f0",  }];const divs = document.getElementsByClassName("one");myObject.forEach(function (arrayItem, index) {  if (index < divs.length) {    var x = arrayItem.width;    var y = arrayItem.text;    var z = arrayItem.bgColor;    divs[index].style.width = x + '%';    divs[index].innerHTML = y;    divs[index].style.backgroundColor = z;  }});

.contain {  width: 500px;  height: 100px;  background: #666;  padding: 20px;}
.one {  width: 100%;  height: 50px;  background: #aaa;  display: flex;  align-items: center;}
.one:first-child {  background: #ddd;  width: 80%;}
span {  margin: 0 20px;}

<div class="contain">  <div class="one"><span>Should only read "Hello World", have red background and 100% width.</span></div>  <div class="one"><span>Should only read "Hi World", have green background and 20% width.</span></div></div>

---

Related Topics