Find DIV

Find a certain DIV within a HTML document

[Sekka]

Hey.

I am new Javascript and I'm trying to make quite a complex thing, so bear with me.

I have assigned a property to a DIV like so,

<div id="bodytext" convertToEditor="true">
  <p>Test</p>
  <p>Test 2</p>
</div>

How do I get javascript to search through a HTML document for that property, and then return the ID of what it belongs to, in this case, "bodytext".

Thank you!

N.B. I need this solution for IE and Mozilla.

[jetboy]

Long time listener, first time caller? ;)

Warning!: This hasn't been tested:

function convertorCheck() {

if (!document.getElementsByTagName) return;
arr_nodes = document.getElementsByTagName('DIV');

for (i = 0; i < arr_nodes.length; i++) {
obj_node = arr_nodes[i];
if (obj_node.getAttribute('convertToEditor') == 'true')
return obj_node.id;
}

}

1. Creates an array of all the <div>s in the document.
2. Loops through them, checking each one for the convertToEditor attribute.
3. Returns to ID of the first one it finds.

Note:

. This will ignore any further <div>s with the attribute.
. Adding custom attributes to HTML will cause it to fail validation unless you have a custom doctype.
. The document needs to be fully loaded before this function is executed (i.e. all the <div>s need to be in the browser). I suggest you attach it to an onLoad event.

[Sekka]

Works a charm! Thank you.

Had to modify it a little bit as I may need to target multiple DIVS.

Here is my working one,

window.onload = function() {

if (!document.getElementsByTagName) {
return;
}

arr_nodes = document.getElementsByTagName('div');

for (i = 0; i < arr_nodes.length; i++) {

obj_node = arr_nodes[i];

if (obj_node.getAttribute('convertToEditor') == 'true') {

thinkeditor_load (obj_node.id)

}
}

};

[rharri]

Sekka,
I believe the CSS standard is that You should only have one div per document for each ID but you can have several of the same CLASS. So you might consider using the class tag if you plan multiple divs.

rharri

[Rambo Tribble]

Unless something has changed recently, I'm pretty sure only IE allows a property to be added to an element with inline markup.

[Bernard Marx]

FF && Opera also test positive, Rambo. I've always assumed this to be the case.

The only thing is that these browsers make the distinction between attributes and JS properties (for non-conventional attributes), so these attributes can only be retrieved via

getAttribute()

[Rambo Tribble]

Well, how about that. Sounds like object discrimination to me, though. I'm going to have to report this to the NAAOP (National Association for the Advancement of Object Properties).

On a less serious note, I find Konqueror treats the inline property the same as one added with JS; it is available through dot notation. That's just for reference, since, say it with me, "If it works in Konqueror it likely works the same in Safari."