471,305 Members | 1,467 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,305 software developers and data experts.

Accessing innerHTML property of div

Hi,

I need to access the innerHTML property of a div using the dot notation,
eg document.body.div, rather than the GetElementbyID. So far I have not
found the correct way to do it.

I would be grateful if anyone could tell me how, or, for future
reference, if there is any function I could use that would tell me the
correct DOM path for an element given an id.

TIA
Jun 3 '06 #1
5 6020


turnitup wrote:
I need to access the innerHTML property of a div using the dot notation,
eg document.body.div, rather than the GetElementbyID.


I see two dots in
document.getElementById('someId').innerHTML
--

Martin Honnen
http://JavaScript.FAQTs.com/
Jun 3 '06 #2
turnitup wrote:
I need to access the innerHTML property of a div using
the dot notation, eg document.body.div, rather than the
GetElementbyID. So far I have not found the correct way
to do it.
As created, there is no such property to be expected in the DOM. But
'need' can only be questioned without its having some justification, and
'dot notation' suggests - eval - and so a better alternative if 'need'
was expalined.
I would be grateful if anyone could tell me how, or,
for future reference, if there is any function I could
use that would tell me the correct DOM path for an element
given an id.


Given sibling relationships there is no single path through the DOM,
unless the DOM in question is trivial. Without a single path there can
be no 'correct' path without external criteria for correctness.

In principle, given any element reference it would be possible to trail
up through - parentNode -, then following its - firstChild - and then -
nextSibling - references to identify the location of the original child,
and build a dot notation property accessor from the parent to the child.
Repeating that up through the document tree until either -
document.body - or - document.documentElement (where supported) were
found, to create an 'absolute' dot notion reference to the original
element. As such a process must start with a reference to that element
it must then be a futile exercise with no worthwhile results as the
original reference could be stored for future reference by more direct
means (in the same way as the resulting dot notiaton property accessor,
in string form, would otherwise be stored for future reference).

Richard.
Jun 3 '06 #3
Thanks for your replies, I have now in fact managed to sort the problem
using the GetElementbyId method, it was a case of building the correct
js string.
Jun 3 '06 #4
turnitup <same@same> writes:
I need to access the innerHTML property of a div using the dot
notation, eg document.body.div, rather than the GetElementbyID. So far
I have not found the correct way to do it.
If you need to do it without using a method call, and using pure
W3C DOM properties (e.g., no proprietary IE functionality), you
will have to know the location of the div in the document, e.g.,
document.body.firstChild.nextSibling.firstChild
would select a div in
...<body><div><p>Hello</p><div>this is it</div></div>...

However, you don't say why it's important not to use getElementById.
If it is because the element you want doesn't have an id, there
are still easier ways than "dotting your way" in the DOM tree.
If you know it's a div, and you know how many div's are before it
in the document, you can find it as:
document.getElementsByTagName("div")[divIndex]
I would be grateful if anyone could tell me how, or, for future
reference, if there is any function I could use that would tell me the
correct DOM path for an element given an id.


You could, horribly inefficiently, traverse the DOM structure until
you find the node. Or you could use getElementById to find the element
and then backtrace to find the path:

---
function pathOf(element) {
if (typeof element == "string") {
element = document.getElementById(element);
}
var accumulator = [];

while(element != document.body && element != document.head) {
if (element.previousSibling) {
element = element.previousSibling;
accumulator.push("nextSibling");
} else {
element = element.parentNode;
accumulator.push("firstChild");
}
}
accumulator.push((element == document.body)?"body":"head");
accumulator.push("document");
return accumulator.reverse().join(".");
}
---

I think you would get more qualified help if you say what problem
you are really trying to solve :)

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jun 3 '06 #5
turnitup <same@same> writes:
Thanks for your replies, I have now in fact managed to sort the
problem using the GetElementbyId method, it was a case of building the
correct js string.


As Richard said (IIRC) that sounds like you are using eval.

Eval is generally not recommended, since it is fragile and can mask
otherwise easily found errors (as you seem to have found out).

If programmed property access is necessary, using square bracket
notation almost always solves it safer and even more efficiently
than using eval, e.g.,
var myPropName = "someString";
//...
object[myPropName]; //no eval needed

Good luck
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jun 3 '06 #6

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Chris New | last post: by
4 posts views Thread by RobG | last post: by
reply views Thread by msnews.microsoft.com | last post: by
5 posts views Thread by Dan Nash | last post: by
9 posts views Thread by Hallvard B Furuseth | last post: by
14 posts views Thread by Aaron Gray | last post: by
9 posts views Thread by martymix | last post: by
6 posts views Thread by PaPa | last post: by
reply views Thread by rosydwin | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.