Javascript newbie on getelement

#native_company# #native_desc#

#native_cta#

This site is best viewed in a modern browser with JavaScript enabled.

Mahmed1

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

This is my test

And javascript

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

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

Mahmed1

Bump please anyone

bionoid

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 tag.
That object contains all the information represented in your html and more.

Mahmed1

bionoid;1292221 wrote:
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 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

tech_soul8

With the

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:

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

You can reference "span" element directly:

document.getElementById('span')

or you can traverse DOM tree like this:

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/showthread.php?284903-Which-JavaScript-book-to-buy thread.
You can also look at JavaScript and DOM reference at http://www.w3schools.com/jsref/default.asp

Mahmed1

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;

tech_soul8

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:

<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.

root

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.

Mahmed1

tech_soul8;1292281 wrote:
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:
<body>
This is a text
<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?

Mahmed1

Or is this correct

Code:

This
is
a test.

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?

Mahmed1

Oops i meant this code refers to IS

var p = document.getElementById('test);

var s = p.firstChild.nextSibling.firstChild

bionoid

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.

Mahmed1

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

tech_soul8

Mahmed1;1292459 wrote:
Or is this correct

Code:

This
is
a test.


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:

<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:

<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:

var child = element.childNode[n] // where n respresents child element you want to access

Mahmed1

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

Padonak

<div><p></p><h1></h1></div>

div is the parentNode for p and h

p is the firstChild for div and at the same time the previousSibling for h (p and h are on the same nesting level)

h is the nextSibling for p and the lastChild for div

take a look at this scheme

Mahmed1

Thank you

I understand Siblings but dont no why the span is a sibling and not a child and why i need to access as sibling rather than the child if P tag

Code:

This
is
a test.

tech_soul8

Because span is on the same level as This text node and nodes which are on the same level are siblings to each other.

tech_soul8

[ATTACH]15823[/ATTACH]

really don't know how to help you any further on this...

The attachments of this post were removed during the platform migration in 2018

Mahmed1

Sorry and i appreciate your help
So even though it is like the span is a child of the P tag, because it is in the same level as the text note you can only access it the way i am by its siblings?