Jump to content

access >---


Drycodez
 Share

Recommended Posts

If i want to access an html element through js, how do i do this. I know the DOM method (

document.getElementById('id');

), but i just want to know the js way of doing it. If for example, i want to access a <DIV> element, how do i do this without the use of getElementById? Its possible to do something like this:

document.body.div_ID;

?

Edited by O. Samuel
Link to comment
Share on other sites

er... the first method is how you would do it with JS. The DOM is an object model of a tree like representation of the markup that offers an API which, by using Javacript, you can call methods of the DOM (via the document object).It would be advisable not to use the second method as it is old fashioned.

Link to comment
Share on other sites

The second method wouldn't work anyway. Dot notation works by using the name attribute, not id. And since divs and other non-form-control elements don't support the name attribute, they cannot be selected in this way.Like scientist said, getElementById() is the way to do it.

Link to comment
Share on other sites

er... the first method is how you would do it with JS. The DOM is an object model of a tree like representation of the markup that offers an API which, by using Javacript, you can call methods of the DOM (via the document object).It would be advisable not to use the second method as it is old fashioned.
ok, i gues i was wrong on that. I dont want to use the second method, but i just want to know how it works.
Link to comment
Share on other sites

The second method wouldn't work anyway. Dot notation works by using the name attribute, not id. And since divs and other non-form-control elements don't support the name attribute, they cannot be selected in this way.Like scientist said, getElementById() is the way to do it.
thanks, but how do i do this with form control elements? Just wanna know!
Link to comment
Share on other sites

You can still access form elements with standard DOM methods.But if you're asking how the dot notation works, I already explained that. It uses the name attribute. Ie,<input name='anInput' value='someValue' />is accessed like this:document.body.anInput

Link to comment
Share on other sites

You can still access form elements with standard DOM methods.But if you're asking how the dot notation works, I already explained that. It uses the name attribute. Ie,<input name='anInput' value='someValue' />is accessed like this:document.body.anInput
hmmm! Ok, what about the code below? Its it equivalent to the one you wrote?
document.anInput

ll the above code work? If no, then WHY?

Link to comment
Share on other sites

The second method wouldn't work anyway. Dot notation works by using the name attribute, not id. And since divs and other non-form-control elements don't support the name attribute, they cannot be selected in this way.Like scientist said, getElementById() is the way to do it.
is the name attribute not allowed/a standard for non-form elements? I know I've used name on other elements, but as the generated output was part of a templating system, there were already a huge amount of validation errors to wade through, but since it worked with my JS, I didn't think twice about it, haha.
Link to comment
Share on other sites

hmmm! Ok, what about the code below? Its it equivalent to the one you wrote?
document.anInput

ll the above code work? If no, then WHY?

no, because you have to go through the body element first. just like he showed you....(assuming we are still talking about the same input element SM used).it's all about context though. an input element is part of the body, only title, script and style tags are allowed in the head (meta tags and some others too). I mean you could put whatever you want anywhere I suppose, but it would certainly not be valid and would probably make more trouble for the browser to render the page than it would be worth. Normal elements would not be allowed, and that's why you need document.body. As said though, the whole point of the DOM API is so you don't have to do it this way. That's why you would use document.getElementById() Edited by thescientist
Link to comment
Share on other sites

is the name attribute not allowed/a standard for non-form elements? I know I've used name on other elements, but as the generated output was part of a templating system, there were already a huge amount of validation errors to wade through, but since it worked with my JS, I didn't think twice about it, haha.
I think anchors are the only non-form elements that support it. I'm not sure if using a name on a div would let you select it or not, but I do know it's invalid.
Link to comment
Share on other sites

Some HTML:

<body>   <form name="myForm">      <input type="text" name="myInput">   </form></body>

The official way to get a reference to your form (not using document.getElementById) looks like this:document.forms[0]The document object has a forms property. This property contains a numerically indexed array (or collection) of all the forms in the document.For backwards compatibility, all browsers still support the use of named indexes, so this works also, even though it is not a current standard:document.forms["myForm"]Since dot notation is equivalent to named-index notation for all objects, this also works:document.forms.myFormFor serious backward compatibility, this also works:document.myFormIn fact, it works for any anchor, form, image, or link, since the document object has a property that is a collection of anchors, forms, images, or links. But again, this is not a standard. It's a convenience.Turning now to form elements:All forms have an elements property. It is also a numerically indexed array. The official way of getting a reference to our form element looks like this:document.forms[0].elements[0]because it is the first element of the first form. But again, for backwards compatibility, all browsers still support the use of named indexes, so this works also, even though it is not a current standard:document.forms["myForm"]["myInput"]which means that this also works:document.forms.myForm.myInputAnd even this:document.myForm.myInputWhen I say backward compatibility, I mean this. When the web was new and JavaScript was new, there were very few standards. Browsers created ways of doing things THEIR OWN WAY. If something worked in one browser, a competing browser sometimes borrowed the same technique so that HTML documents that used it would work in their browser also. This was a wild time with almost no regulation. It was like the American Wild West, or Libya today. Crazy. Lawless. Not safe for children.After a few years, it became necessary to create standards. Some rules were kept, some were cut, and others were changed.Today, well-behaved browsers (let's take Firefox as an example) follow the standards exactly. But in some cases they also allow documents to play by the rules that existed before the rules were standardized. Most of the stuff you are asking about is ancient history. THERE IS NO GUARANTEE that today's browser will continue to support it. You should also expect that if you use a strict doctype, a browser will not support it.My question to you is the other side of your question. Since the public standards are clearly outlined at W3Schools and in the documentation available at W3C, why would you expect these non-standard techniques to work at all?In my mind it is like asking why you should not use paint thinner as fuel for your car. Sometimes it will work, sometimes it will not. Sometimes it will work but your engine will explode. The manufacturer says you should use gasoline. So use gasoline and be happy about it.

Edited by Deirdre's Dad
Link to comment
Share on other sites

no, because you have to go through the body element first. just like he showed you....(assuming we are still talking about the same input element SM used).it's all about context though. an input element is part of the body, only title, script and style tags are allowed in the head (meta tags and some others too). I mean you...
you mean i have to go throgh the body (parent node)? What about if i want to access a child of a DIV elemen? you mean i have to pass through the DIV?
Link to comment
Share on other sites

you mean i have to go throgh the body (parent node)? What about if i want to access a child of a DIV elemen? you mean i have to pass through the DIV?
I'm not sure how else any of us can say this, but one last time can't hurt. if you want to get access to any (uniquely ID'd) element on the page, just use document.getElementById(). That's why it's there. use it. plus for all the reasons why DD just said not to do it the other way. Why make more work for yourself? It's a convenience method for a reason...edit: for classes or multiple elements of a certain, use their respective methods, etc. Edited by thescientist
Link to comment
Share on other sites

My question to you is the other side of your question. Since the public standards are clearly outlined at W3Schools and in the documentation available at W3C, why would you expect these non-standard techniques to work at all?In my mind it is like asking why you should not use paint thinner as fuel for your car. Sometimes it will work, sometimes it will not. Sometimes it will work but your engine will explode. The manufacturer says you should use gasoline. So use gasoline and be happy about it.
Amen! :)
Link to comment
Share on other sites

I think anchors are the only non-form elements that support it. I'm not sure if using a name on a div would let you select it or not, but I do know it's invalid.
Actually, anchors aren't allowed to have a name attribute either.You can likely put a name on any element and select it, because browsers are forgiving, though I can't assure you every browser still does that or will continue doing it in the future.The only elements that allow a name attribute today are form elements, not even forms themselves.
Link to comment
Share on other sites

Actually, anchors aren't allowed to have a name attribute either.You can likely put a name on any element and select it, because browsers are forgiving, though I can't assure you every browser still does that or will continue doing it in the future.The only elements that allow a name attribute today are form elements, not even forms themselves.
I was speaking in a more general sense, where the name attribute is allowed under loose or transitional doctypes. It is indeed invalid under a strict doctype. None of the doctypes, however, allow the name attribute on div, p, span, etc.
Link to comment
Share on other sites

True. But the HTML 5 doctype, which I assume we're all migrating to, is strict. Eventually, maintaining a bunch of transitional code is going to be a PITA.
Agreed. All the more reason for OP to just ditch the dot notation and not waste anymore time learning about it....Knowing that it exists and that it works by using the name attribute is enough to avoid problematic situations like property names matching input names. (For example, having an input named 'action' and then trying to access the 'action' property of the form. I got burned by that one :) )
Link to comment
Share on other sites

Here's another reason to know about old-style dot notation. A lot of old (and not-so-old) code out there uses it, including tutorials and textbooks. Knowing what it is and how outdated it is can save a new developer from hours of frustration.Of course, superficially, it's not so easy. One of the things I LOVE about JavaScript is dot notation and the easy way properties and methods can be "chained." If you're just picking it up, a chain of element names (bad) might not look all that different from a chain of DOM properties (not so bad). Ever write one of these babies?this.getElementsByTagName("span")[0].parentNode.parentNodeI don't do it a lot, and only if the context is 100% clear. But it's a pretty cool space-saver. I guess part of the lesson is distinguishing the old from the new, what works and what doesn't. That just comes with study, I suppose. Also trying things out and seeing what your Error Console rejects.

Edited by Deirdre's Dad
Link to comment
Share on other sites

Ever write one of these babies?this.getElementsByTagName("span")[0].parentNode.parentNode
I've written a few of those. :)jQuery is good for that. Or rather developers who use jQuery are. I've seen chains of more than 10 methods/properties in length! :)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...