Extract property of a tag in HTML using Javascript

Question

Is it possible to extract properties of a HTML tag using Javascript. For example, I want to know the values present inside with the <div> which has align = "center".

<div align="center">Hello</div>

What I know is:

var division=document.querySelectorAll("div");

but it selects the elements between <div> & </div> and not the properties inside it.

I want to use this in the Greasemonkey script where I can check for some malicious properties of a tag in a website using Javascript.

Hope I'm clear..!!

So you want it to select what? "Hello", the div element, or `align="center"`? — Liftoff, Apr 02 '14 at 01:57
Tag properties are called attributes. What kind of malicious attributes you are looking for? — plalx, Apr 02 '14 at 02:00
I think this is a better answer: http://stackoverflow.com/questions/2048720/get-all-attributes-from-a-html-element-with-javascript-jquery — LasagnaAndroid, Apr 02 '14 at 13:54

cgatian · Accepted Answer · 2014-04-05T00:20:47.737

4

You are looking for the getAttribute function. Which is accessible though the element.

You would use it like this.

var division = document.querySelectorAll('div')
for(var i=0,length=division.length;i < length;i++)
{
    var element = division[i];
    var alignData = division.getAttribute('align'); //alignData = center
    if(alignData === 'center')
    {
       console.log('Data Found!');
    }      
}

If you're looking to see what attributes are available on the element, these are available though

division.attributes

MDN Attributes

So for instance in your example if you wanted to see if an align property was available you could write this.

//Test to see if attribute exists on element
if(division.attributes.hasOwnProperty('align'))   
{
    //It does!
}

edited Apr 05 '14 at 00:20

answered Apr 02 '14 at 02:00

cgatian

22,047
9
56
76

1

shouldnt that be `var alignData = division[0].getAttribute('align'); //alignData = center` ? – 13ruce1337 Apr 02 '14 at 02:10
Damn, you're right. I was thinking getElementById. Good catch – cgatian Apr 02 '14 at 02:11
+1 for you :D also to note: i figure he may have more divs...creating a for loop with `if(division[i].getAttribute('align') == "center") {//dosomething}` will help to find the ones that have that property. – 13ruce1337 Apr 02 '14 at 02:17
Yeah good suggestion. Side note: Im actually kinda happy not to see jQuery as one of the tags for this question. – cgatian Apr 02 '14 at 12:46
@13ruce1337 It works for me.. But I got a further problem in nested divs.. (let there be 2, outer and inner) Will **document.querySelectorAll('div')** select both divs or only the outer one..?? – Bhavuk Mathur Apr 04 '14 at 22:17
@BhavukMathur if you add a selector in the `querySelectorAll()` method it will return a list of elements, that matches the selector, as a [`NodeList`](https://developer.mozilla.org/en-US/docs/Web/API/NodeList). From there you could make a for loop to do what you need. – 13ruce1337 Apr 04 '14 at 22:28
1

@BhavukMathur I updated the question to show you how to loop on the query – cgatian Apr 05 '14 at 00:21

score 0 · Answer 2 · answered Apr 02 '14 at 02:05

0

var test = document.querySelectorAll('div[align="center"]');

answered Apr 02 '14 at 02:05

Zini

909
7
15

Extract property of a tag in HTML using Javascript

2 Answers2

Linked