www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 30

Thread: Javascript newbie on getelement

  1. #1
    Join Date
    Oct 2013
    Posts
    18

    Javascript newbie on getelement

    Hi

    This is my 1st post so apologies for any errors in posting
    I am new to javascript and wanted to know this

    Say i had html code like this

    <p id="Test">This is my test</p>

    And javascript

    Var x = document.getelementbyId("Test")
    What is the x actually holding in memory
    The whole line (<p id="Test">This is my test</p>)?

    Im just curious to know as i know i can then use innertext, innerHtml etc but wernt sure what x held in memory

  2. #2
    Join Date
    Oct 2013
    Posts
    18
    Bump please anyone

  3. #3
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    792
    Code:
    var x = document.getElementById('Test');
    Remember JavaScript is a CaseSensitive language.

    "x" will contain the object reference to the html element with that id, in this case the <p> tag.
    That object contains all the information represented in your html and more.
    JavaScript: Learn | Validate | Compact

  4. #4
    Join Date
    Oct 2013
    Posts
    18
    Quote Originally Posted by bionoid View Post
    Code:
    var x = document.getElementById('Test');
    Remember JavaScript is a CaseSensitive language.

    "x" will contain the object reference to the html element with that id, in this case the <p> tag.
    That object contains all the information represented in your html and more.
    Thank You...so its just a reference to that P tag

    If i had other tags within the p tag i wanted to get some information, would i use innerHtml or Innertext?
    What is the difference between the 2?

    Ps can you recommend a good site to learn Javascript

  5. #5
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    238
    With the
    Code:
    document.getElementById(id)
    you are accessing just specified element with specified id.

    If you want to access child elements of that element you have several options. You can access them directly by setting their id and then reference them just like you did with the "p" tag or you can traverse DOM tree to get to them.

    Some examples:

    Code:
    <p id="test">This <span id="span">is</span> a test.</p>
    You can reference "span" element directly:

    Code:
    document.getElementById('span')
    or you can traverse DOM tree like this:

    Code:
    var p = document.getElementById('test);
    var s = p.firstChild.nextSibling.firstChild;
    If you want to learn JavaScript take a look at the http://www.webdeveloper.com/forum/sh...pt-book-to-buy thread.
    You can also look at JavaScript and DOM reference at http://www.w3schools.com/jsref/default.asp

  6. #6
    Join Date
    Oct 2013
    Posts
    18
    Hi canyou please explain how this works and what is the first child, next sibling etc with the example you have given


    var p = document.getElementById('test);
    var s = p.firstChild.nextSibling.firstChild;

  7. #7
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    238
    Well...first of all my suggestion is that you buy yourself a book or try to find some good tutorial on the Internet about HTML, CSS, JS... because this way you are trying to understand something before you have learned some important concepts. In short this is what it's all about:

    When your browser renders a web page it creates something that is called a DOM tree. DOM is a "tree like" representation of every element contained within web document. It allows us to programmatically access DOM elements and change their behavior, content, look... In a DOM everything is a "node". A node is just a point on the tree representing a particular element or text or attribute... The document is the root node. The root node contains all other elements. So it contains "html" element which is a root element for all other elements (head, body...).

    So if you have for example:

    Code:
    <body>
    <p>This is a text</p>
    <body>
    then a text node is a "This is a text" which is a first child of "p" element which is a first child of "body" element and so on...

    If you want to move from element to element or from text to text node you have to use properties of Core Node Object. Some of them are:

    firstChild
    lastChild
    nextSibling
    previousSibling

    and so on...

    So if you want to access your "This is a text" text node by navigating the DOM tree you have to use some of this properties.
    Last edited by tech_soul8; 10-17-2013 at 06:39 PM.

  8. #8
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,142
    You should search for subjects that explain the DOM tree and what the BOX model is all about, you should better understand the way in which you can traverse the objects in the DOM tree and the contents of various elements.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  9. #9
    Join Date
    Oct 2013
    Posts
    18
    Quote Originally Posted by tech_soul8 View Post
    Well...first of all my suggestion is that you buy yourself a book or try to find some good tutorial on the Internet about HTML, CSS, JS... because this way you are trying to understand something before you have learned some important concepts. In short this is what it's all about:

    When your browser renders a web page it creates something that is called a DOM tree. DOM is a "tree like" representation of every element contained within web document. It allows us to programmatically access DOM elements and change their behavior, content, look... In a DOM everything is a "node". A node is just a point on the tree representing a particular element or text or attribute... The document is the root node. The root node contains all other elements. So it contains "html" element which is a root element for all other elements (head, body...).

    So if you have for example:

    Code:
    <body>
    <p>This is a text</p>
    <body>
    then a text node is a "This is a text" which is a first child of "p" element which is a first child of "body" element and so on...

    If you want to move from element to element or from text to text node you have to use properties of Core Node Object. Some of them are:

    firstChild
    lastChild
    nextSibling
    previousSibling

    and so on...

    So if you want to access your "This is a text" text node by navigating the DOM tree you have to use some of this properties.
    Thank you

    I kind of understand the firstchild and lastchild

    If i have a text note iN a p tag and also a span tag
    Am i right in saying the span tag is the 2nd child or is it a sibling?

  10. #10
    Join Date
    Oct 2013
    Posts
    18
    Or is this correct


    Code:
    <p id="test">
    This
    <span id="span">is</span>
    a test.
    </p>

    This - is the first child of p tag
    Span tag - is the second child and next sibling to (This)
    A test - is the 3rd child

    The word (IS) is the first and only child to the Span tag

    So this code refers to the word IS?

  11. #11
    Join Date
    Oct 2013
    Posts
    18
    Oops i meant this code refers to IS

    var p = document.getElementById('test);

    var s = p.firstChild.nextSibling.firstChild

  12. #12
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    792
    I think the question should be, what exactly do you want to achieve? Things can be done in many ways depending on the problem at hand.
    JavaScript: Learn | Validate | Compact

  13. #13
    Join Date
    Oct 2013
    Posts
    18
    Hi i wanted to just get more of an understanding of the DOM and nodes

    Can you please advise if i am understanding it with my prior explanation

  14. #14
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    238
    Quote Originally Posted by Mahmed1 View Post
    Or is this correct


    Code:
    <p id="test">
    This
    <span id="span">is</span>
    a test.
    </p>

    This - is the first child of p tag
    Span tag - is the second child and next sibling to (This)
    A test - is the 3rd child

    The word (IS) is the first and only child to the Span tag

    So this code refers to the word IS?
    This - is a text node so it is correct that it is a first child of a "p" tag.
    span - is not a second child of "p" tag (although it is but I would say that practically it isn't when you access it this way). It's a nextSibling because it is on the same level as text node.
    a test - is a nextSibling

    Oops i meant this code refers to IS

    var p = document.getElementById('test);

    var s = p.firstChild.nextSibling.firstChild
    That's correct. You initialize your p variable to hold "p" (id=test) element. Then you navigate down to the "is" text node by getting to the first child of that "p" element which is a text node. Then you get it's next sibling which is a "span" tag and at the end you get span's first child which is another text node "is" text.


    If you have one element inside another then above element is it's parent. For example:

    Code:
    <div><p></p></div>
    so "div" is a parent element and "p" is a child element.

    If elements are on the same levele then they are siblings. Consider the following example:

    Code:
    <div><p></p><h1></h1></div>
    now the "div" element is a parent element and his children are "p" and "h1" tags. P tag is it's first child but "h1" tag is nextSibling because it's on the same levele as is "p" tag.

    So this is just a one way how you can navigate the DOM tree. There are also other ways to do the same thing like for example you could use Node object's "element.childNodes" property to return a node list of child nodes for an element.


    Depending on technique you use you'll have "second child, third child...". Obviously if you use Core Node object's properties such as firstChild, nextSibling... you won't have (practically) any second child, third child... because you'll always have to grab some element's first child and then if there are any other children you'll have to use nextSibling, previousSibling...properties to traverse the DOM.

    If you decide to use "element.childNodes" to retrieve a list of child elements then you'll have "second child, third child..." and you can use expression like:

    Code:
    var child = element.childNode[n] // where n respresents child element you want to access
    Last edited by tech_soul8; 10-19-2013 at 04:10 AM.

  15. #15
    Join Date
    Oct 2013
    Posts
    18
    Hi thank you

    I understand it thanks to you but still unsure about the span tag and why its classed as sibling rather than a child?

    Just so i no in future, is it a case of
    If any tags are inside a text node then this will become a sibling?

    Can you give an example why this is a sibling just so i no for future ref

    I am fully aware that this can be done many other ways but all im trying to do is grasp this whole DOM and i think im nearly there

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