www.webdeveloper.com
Results 1 to 4 of 4

Thread: Been involved in it too long....

  1. #1
    Join Date
    Dec 2005
    Posts
    2,984

    Been involved in it too long....

    I've been developing with jQuery for far too long. I have a simple, temporary one page site so, instead of loading jQuery, I am doing un-libraried Javascript. I just wanted to do some simple manipulations to a HTML5 video element.

    I started out with Javascripts basic DOM manipulation functions, but about a year ago I got involved in jQuery and I loved it...so today when I tried to do some basic DOM stuff, I was bewildered that I could barely do anything.

    I looped through the properties of elements returned by getElementById() or getElementsByTagName (in Chrome) and I saw only a couple of properties/methods, one was new to me - item() - can't recall seeing this before.

    Then I found out that, in Chrome, I need to use item() to return the actual DOM Object in order to manipulate it.

    Code:
    var poster = document.getElementById('video').getElementsByTagName('img');
    
    //this wouldn't work - yet it would a year or two ago...
    poster.style.display = 'none';
    
    //this would
    poster.item().style.display = 'none';
    I can't recall ever coming across this thing called item() before....what is it? Is it the standard nowadays?

    Thanks.

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Code:
    var poster = document.getElementById('video').getElementsByTagName('img')
    Simple. getElementsByTagName() returns always a DOM collection. not a single element. If you are dealing with more images, you should circle within a loop. same as in an array. That is what is actually written in the JQuery core code: a loop. Actually I am surprised that you don't know that.

    If you have a single element, well, of course it will be the first (and the only )

    Code:
    var poster = document.getElementById('video').getElementsByTagName('img')[0]
    Last edited by Kor; 03-11-2011 at 01:49 PM.

  3. #3
    Join Date
    Dec 2005
    Posts
    2,984
    Haha, thanks for that Kor...actually I did know that it was returned as an array....I just never used the item() method...I always did this way back when:

    Code:
    var img = document.getElementById('mydiv').getElementsByTagName('img');
    var items = img.length;
    for(i=0;i<items;i++) {
     //do stuff with img[0];
    }
    So basically it's always been a method...I just never used it before (and back then, never knew enough to use the following code snippet to find out its properties and methods)

    Code:
    for(i in collection) {
      console.log(i + ' ' + collection[i]);
    }
    Thank you, Kor, for (even very mildly) over estimating my intelligence.

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by aj_nsc View Post
    var img = document.getElementById('mydiv').getElementsByTagName('img');
    var items = img.length;
    for(i=0;i<items;i++) {
    //do stuff with img[0];
    }
    Rather:
    Code:
    var images = document.getElementById('mydiv').getElementsByTagName('img'), img, i=0 ;
    while(img=images[i++]){
    // do something with img reference
    }
    Now you don't care whether the collection has 1, 2, 3 or n elements. Or none.

    I bet JQuery core has something like that inside. There is no other way. A language has its firm syntax. JQuery is nothing but JavaScript condensed and structured in a library. The base language should be the same
    Last edited by Kor; 03-11-2011 at 02:41 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles