Welcome to WebmasterWorld Guest from 23.22.206.103

Forum Moderators: open

Message Too Old, No Replies

Find DIV

Find a certain DIV within a HTML document

     
8:55 am on Jan 23, 2006 (gmt 0)

Full Member

10+ Year Member

joined:Feb 24, 2005
posts:225
votes: 0


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.

9:54 am on Jan 23, 2006 (gmt 0)

Full Member

10+ Year Member

joined:Feb 14, 2005
posts:266
votes: 0


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.

11:08 am on Jan 23, 2006 (gmt 0)

Full Member

10+ Year Member

joined:Feb 24, 2005
posts:225
votes: 0


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)

}
}

};

1:15 pm on Jan 23, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:Dec 20, 2002
posts:123
votes: 0


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

4:02 pm on Jan 23, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 14, 2004
posts:1181
votes: 0


Unless something has changed recently, I'm pretty sure only IE allows a property to be added to an element with inline markup.
10:09 pm on Jan 23, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2004
posts:2047
votes: 0


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()
3:01 am on Jan 24, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 14, 2004
posts:1181
votes: 0


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."