|
|||||||||
|
|||||||||
| |||||||||
|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
#1
May 8th, 2008, 08:56 AM
|
|||
|
|||
|
Get all id's in current document
Hi,
slowly getting my head around DOM syntax and reading online tut's and stuff but stuck with correct syntax to get all the id's in a document. Syntax i presume is similar to the, getElementsByTagName - but i need to do this for 'id' attributes (i need each id's value i.e. the name assigned to it, not just an indication as to whether the element has an id attribute). Can i use syntax like: Code:
var id_arry=document.getElementById(*) and return an array of the id's or maybe use this syntax in a for loop which returns each element on the page with an id attribute so i can add it to an array manually etc ... Can it also be done with the 'class' attribute??? with thanx in advanz ... Last edited by devinia : May 8th, 2008 at 08:57 AM. Reason: more clarity required in title
|
|
#2
May 8th, 2008, 09:21 AM
|
||||
|
||||
|
No.
getElementById() supposes to return always a single element, while getElementsByName() and getElementsByTagName() return always a collection (array). Methods are different, thus getElementById() can not use a wild card such as "*". About the classes. No, DOM has no native method to refer elements by their class. In both cases (as for any other native HTML attribute or custom JSON properties of the HTML elements) a workaround is available, on using getElementsByTagName('*') as start: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function returnAttributes(at){
var arr=[];
var elem=document.getElementsByTagName('*'), i=0, e;
while(e=elem[i++]){
e[at]?arr[arr.length]=e[at]:null;
}
return arr;
}
onload=function(){
var allIds=returnAttributes('id');
var allClasses=returnAttributes('className');
alert(allIds);
alert(allClasses)
}
</script>
</head>
<body>
<div id="id_1"></div>
<div class="myclass_1"></div>
<div></div>
<div id="id_2"></div>
<div class="myclass_2"></div>
</body>
</html>
__________________
HELP SAVE ANA
|
|
#3
May 8th, 2008, 09:46 AM
|
|||
|
|||
|
Quote:
Thanks KorRedDevil, One point, am i right in thinking, Code:
e[at]
|
|
#4
May 8th, 2008, 10:14 AM
|
||||
|
||||
|
it is square bracket notation. An attribute as
Code:
element.id can be also written as: Code:
element['id'] It is useful when handling dynamically the attributes/properties. Code:
function returnAttributes(at){
...
e[at]
//means e.id if the argument passed is 'id',
//or e.className if the argument passed is 'className'
...
}
The expression: Code:
condition?statement if true:statement if false; is a ternary operator, the condensed equivalent of: Code:
if(condition)
{statement if true}
else
{statement if false}
In my code that ternary checks first for the existence of that attribute, and only if the element has that attribute, its value is input into the array. e[at] // if the element has that type of attribute ?arr[arr.length]=e[at] //the next array's element is the attribute's value :null;//else do nothing Last edited by KorRedDevil : May 8th, 2008 at 10:19 AM.
|
|
#5
May 8th, 2008, 10:28 AM
|
|||
|
|||
|
Nice,
Really like that code, fairly experienced in PHP but never used that kind of square bracket notation in that way - its like, Object.method or object.property. At that point with my meagre JS knowledge i would have used 'indexOf' to match the arg with 'id' (or classname) string. Also noticed when i run the code it produces a comma sepertated list, ???? how the, where the, what the ... i don't consider myself a Javascript/DOM officionado but whoa. Anyway its works just great much thanks again.
|
|
#6
May 8th, 2008, 01:09 PM
|
||||
|
||||
|
When you call alert() on the arrays, the toString() method is automatically called on them. The toString() method of arrays works the same as join(',').
Quote:
Firefox 3, Safari 3.1, and Opera 9.5 (will) have native implementations of document.getElementsByClassName(). http://developer.mozilla.org/en/doc...entsByClassName http://webkit.org/blog/153/webkit-g...ntsbyclassname/ http://virtuelvis.com/archives/2007/09/kestrel It's part of the HTML5 working drafts, since most people consider it to be a missing feature of DOM2-HTML.
__________________
Spreading knowledge, one newbie at a time. Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions IE7: the generation 7 browser new in a world of generation 8 browsers. Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.
|
|
#7
May 8th, 2008, 01:53 PM
|
||||
|
||||
|
Quote:
Right. I didn't say it will have not. As long as, unfortunately, IE does not follow, we will still use workarounds 
|
|
| Viewing: Dev Shed Forums > Web Design > JavaScript Development > Get all id's in current document |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
