Jump to content

continuation of understanding what is going on in HTML DOM tutorial


hisoka

Recommended Posts

I decided to post a new thread concerning this link case I do not understand something I write it here as I think it will be too long .

 

Continuation of this already opened thread :

 

 

http://w3schools.invisionzone.com/index.php?showtopic=55183&hl=

 

Foxy Mod the second method is

document.getElementsByTagName(name)

This is a sample of a w3schools source code :

 

<a target="_top" href="default.asp">JS HOME</a>
<a target="_top" href="js_intro.asp">JS Introduction</a>
<a target="_top" href="js_whereto.asp">JS Where To</a>
<a target="_top" href="js_output.asp">JS Output</a>
<a target="_top" href="js_syntax.asp">JS Syntax</a>

 

When I put

document.getElementsByTagName('a')

I got this :

HTMLCollection [ <a.attribute-value>, <a.attribute-value>, <a.attribute-value>, <a.attribute-value>, <a.attribute-value>, <a.attribute-value>, <a.attribute-value>, <a.attribute-value>, <a.attribute-value>, <a.attribute-value>

I wonder why I did not get the element as it as namely like this

<a target="_top" href="default.asp">JS HOME</a>
<a target="_top" href="js_intro.asp">JS Introduction</a>
<a target="_top" href="js_whereto.asp">JS Where To</a>
<a target="_top" href="js_output.asp">JS Output</a>
<a target="_top" href="js_syntax.asp">JS Syntax</a>
<a target="_top" href="js_whereto.asp">JS Where To</a>
<a target="_top" href="js_output.asp">JS Output</a>
<a target="_top" href="js_syntax.asp">JS Syntax</a>
<a target="_top" href="js_statements.asp">JS Statements</a>
<a target="_top" href="js_comments.asp">JS Comments</a>
<a target="_top" href="js_variables.asp">JS Variables</a>
<a target="_top" href="js_operators.asp">JS Operators</a>
<a target="_top" href="js_arithmetic.asp">JS Arithmetic</a>
<a target="_top" href="js_assignment.asp">JS Assignment</a>
<a target="_top" href="js_datatypes.asp">JS Data Types</a>

.....

???

Link to comment
Share on other sites

Like the name suggests it is collection of specific element in this case 'a' elements, much like an array, you then use index ref followed by attribute name to retrieve value.

 

To return the result you suggested in its raw html output you would either .clone() then output cloned results which would include all attributes using true, OR access the parent of these elements, and use .innerHTML to show all these child elements as raw html content.

Link to comment
Share on other sites

Make sure you understand what the DOM (Document Object Model) is first.

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

 

You are dealing with a browser API that give you access to the markup / structure of the page in a programmatic way.

Link to comment
Share on other sites

HTMLCollection [ <a.attribute-value>, <a.attribute-value>, <a.attribute-value>, <a.attribute-value>, <a.attribute-value>, <a.attribute-value>, <a.attribute-value>, <a.attribute-value>, <a.attribute-value>, <a.attribute-value>

This information you're displaying is just a short representation of the data in a node list. The node list is not text, it's an object with methods and properties.

 

You need to use methods and properties to navigate and manipulate information in that node list.

 

Try this code:

// Get a collection of all the links
var links = document.getElementsByTagName('a');

// Go through all the links we have collected and display information about them
for(var i = 0; i < links.length; i++) {
  // Get one of the links in the list
  var link = links[i]

  // Show information about this link
  console.log("Showing link #" + i);
  console.log(" - Tag name: " + link.tagName);
  console.log(" - href: " + link.href);
  console.log(" - class: " + link.className);
  console.log(" - Text: " + link.innerHTML);
  console.log(" ");
}
Link to comment
Share on other sites

Like the name suggests it is collection of specific element in this case 'a' elements, much like an array, you then use index ref followed by attribute name to retrieve value.

 

much like an array

 

 

Exactly this :)

document.getElementsByTagName(name)

gives an array of elements , specified by the tag name between the opening and closing parentheses , as its values . It does not give a raw element like

document.getElementById(id)

does

Link to comment
Share on other sites

gives an array of elements , specified by the tag name between the opening and closing parentheses , as its values . It does not give a raw element like

No! it gives you a single object list for ANY single element that use attribute name of 'id' with specific attribute 'id' named value , instead of a multiple object list using tagname where it targets actual tagname of elements.

 

You then have the ability with these targeted element by 'id' or 'tagname' to get, set its attributes and attribute or property names and values.

 

By using these references it will not return result of raw html such as <a target="_top" href="default.asp">JS HOME</a> but a object with 'target' with value '_top', 'href' with 'default.asp', 'innerHTML' with 'JS Home' properties, which can be reference individually using index stating from 0

 

<a target="_top" href="default.asp">JS HOME</a>

<a target="_top" href="js_intro.asp">JS Introduction</a>

 

first anchor object link[0] its href property link[0].href will be 'default.asp'

second anchor object link[1] its href property link[1].href will be 'js_intro.asp'

and so on..

 

It does care about the opening/closing tags, where the text is placed, any of that! that is html correct syntax requirement. it just stores properties that make up '<a target="_top" href="default.asp">JS HOME</a>'

 

So '<a target="_top" href="default.asp">JS HOME</a>' is html on a page that is accessible through js to get, set, manipulate as an object its properties.

Edited by dsonesuk
Link to comment
Share on other sites

No! it gives you a single object list for ANY single element that use attribute name of 'id' with specific attribute 'id' named value , instead of a multiple object list using tagname where it targets actual tagname of elements.

 

 

That is very complicated and not 100% true and exact

document.getElementById(id)

gives an element by id and not as you wrote to me

 

meanwhile this :

document.getElementsByTagName(name)

gives an array of elements by Tag name . To prove what I write here is what

document.getElementById('nav_tutorials')

gives : a single element

<div class="w3-dropnav w3-light-grey w3-card-2 w3-center" id="nav_tutorials" style="display: none;">

and here what

 document.getElementsByTagName('a')

gives : an array containing more than 241 elements

HTMLCollection [ <a.w3schools-logo>, <a.topnav-localicons.w3-hide-large.w3-left>, <a.topnav-icons.fa.fa-home.w3-left>, <a.w3-hide-small>, <a.w3-hide-small>, <a.active>, <a.w3-hide-small>, <a.w3-hide-small>, <a.w3-hide-small>, <a.w3-hide-small>, 241 more… ]

it is single against plural .

Edited by hisoka
Link to comment
Share on other sites

Look! First line 'The HTML DOM document object is the owner of all other objects in your web page.' All other objects being elements wether you access a single object element by getElementById or collection of element objects by getElementsByTagName(), AGAIN getElementById DOES NOT GIVE YOU raw html of '<div class="w3-dropnav w3-light-grey w3-card-2 w3-center" id="nav_tutorials" style="display: none;">' IT WILL GIVE YOU [object HTMLDivElement] it gives you access to this element object WITH THIS ID with all its properties (classes, id, style) for you to do what you want! Again! To show '<div class="w3-dropnav w3-light-grey w3-card-2 w3-center" id="nav_tutorials" style="display: none;">' you would have gain access to parent. Use .innerHtml to show as text I.E '<div class="w3-dropnav w3-light-grey w3-card-2 w3-center" id="nav_tutorials" style="display: none;">' of div child element.

 

Using document.getElementById() gives you access to raw HTML '<div class="w3-dropnav w3-light-grey w3-card-2 w3-center" id="nav_tutorials" style="display: none;">' through JavaScript using [object HTMLDivElement] which is the specific object element using the targeted ID reference.

Edited by dsonesuk
Link to comment
Share on other sites

You are affirming what I wrote namely that :

document.getElementById(id)

returns an element object meanwhile (single)

document.getElementsByTagName(name)

returns an array of elements or a collection of elements ( plural)

Link to comment
Share on other sites

No! You have been saying it give you raw html, several times, i have pointed out several times it does not! Only now! You have finally got it, it seems that it is a element object that is returned.

 

Why say getElementById() 'gives single element' and then give us html

'<div class="w3-dropnav w3-light-grey w3-card-2 w3-center" id="nav_tutorials" style="display: none;">'

 

Compared to .getElementsByTagName('a') gives me

HTMLCollection [ <a.w3schools-logo>, <a.topnav-localicons.w3-hide-large.w3-left>.....]

 

The results are uncomparable, one return html the other javascript object collection of html elements, totally unrelated, you have been giving this impression from the start in all examples, and I have been correcting you, but this impression still carries on with further examples.

 

Exactly this :)

 

document.getElementsByTagName(name)
gives an array of elements , specified by the tag name between the opening and closing parentheses , as its values . It does not give a raw element like

document.getElementById(id)
does

Again! 'raw element' suggests to me you think getElementById() returns raw html instead of javascript object element.

Link to comment
Share on other sites

<a target="_top" href="default.asp">JS HOME</a>
<a target="_top" href="js_intro.asp">JS Introduction</a>
<a target="_top" href="js_whereto.asp">JS Where To</a>
<a target="_top" href="js_output.asp">JS Output</a>
<a target="_top" href="js_syntax.asp">JS Syntax</a>
element.innerHTML =  new html content

change the inner HTML of an element . So I would like to change JS HOME to JS HOUSE . I did it like this :

a.JS HOME = JS HOUSE

but there was an error saying :

 

SyntaxError: missing ; before statement

 

what was that error and how to change the inner HTML from JS HOME to JS HOUSE ??

Link to comment
Share on other sites

So? I can see that, but you keeped repeating what I could see as the same misunderstanding of what is returned by examples given. You then came back with retort giving SAME apparent misunderstanding and I then attempted to correct you.

Link to comment
Share on other sites

You can either

1) loop through all anchor elements using getElementsByTagName() identify by known existing href attribute, or current innerHTML content (remember spaces etc) or even by index but this is unreliable as it may not be always be correct in future, and then replace with new.

2) identify parent element id, this will restrict child 'a' search to this parent and filter using same method above to change specific anchor element.

 

I have given example of seaching attributes of elements as filter of attributes to target specific element before.

Link to comment
Share on other sites


<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />

<title>Document Title</title>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

 

<style type="text/css">

div#links ~ div {border: 2px solid navy; margin: 15px;}

</style>

</head>

<body>

 

<a target="_top" href="default.asp">JS HOME</a>

<a target="_top" href="js_intro.asp">JS Introduction</a>

<a target="_top" href="js_whereto.asp">JS Where To</a>

<a target="_top" href="js_output.asp">JS Output</a>

<a target="_top" href="js_syntax.asp">JS Syntax</a>

 

<div id="links">

<a target="_top" href="default2.asp">JS HOME2</a>

<a target="_top" href="js_intro2.asp">JS Introduction2</a>

<a target="_top" href="js_whereto2.asp">JS Where To2</a>

<a target="_top" href="js_output2.asp">JS Output2</a>

<a target="_top" href="js_syntax2.asp">JS Syntax2</a>

</div>

 

<div>(All Anchor) Elements: targeted: <p id="result01"></p></div>

<div>(Single Anchor) Elements: targeted: <p id="result02"></p></div>

<div>(Anchor within parent with id) Elements: targeted: <p id="result03"></p></div>

 

<script type="text/javascript">

var join = "";

//looping through ALL anchor links

var x = document.getElementsByTagName('a');

for (var i = 0; i < x.length; i++)

{

 

if (x.href.indexOf('default.asp') > -1)// but targeting anchor with specific href value

{

join += 'Found "' + x.innerHTML + '" with href attribute value of "' + x.href + '"<br>';

 

x.innerHTML = "JS HOUSE";

join += 'Now changed to "' + x.innerHTML + '"<hr>';

}

join += x.innerHTML + '<br>';

}

document.getElementById('result01').innerHTML = join;

//END looping through ALL anchor links

 

//target specific anchor element, using index - downside liably to change position causing targeting of wrong achor in future

join = "";

y = document.getElementsByTagName('a')[1];

join += 'Found "' + y.innerHTML + '" with href attribute value of "' + y.href + '"<br>';

y.innerHTML = 'Nowt to do with JS Introduction';

join += 'Now changed to "' + y.innerHTML + '"<hr>';

join += y.innerHTML;

document.getElementById('result02').innerHTML = join;

 

//END single anchor target by index

 

 

//loop through child anchor elements of parent with specific id

join = "";

var parent_element = document.getElementById('links');

var z = parent_element.getElementsByTagName('a');

for (var i = 0; i < z.length; i++)

{

 

if (z.href.indexOf('default2.asp') > -1)// but targeting anchor with specific href value

{

join += 'Found "' + z.innerHTML + '" with href attribute value of "' + z.href + '"<br>';

z.innerHTML = "JS HOUSE2";

join += 'Now changed to "' + z.innerHTML + '"<hr>';

}

join += z.innerHTML + '<br>';

}

document.getElementById('result03').innerHTML = join;

//END loop through child anchor elements of parent with specific id

</script>

</body>

</html>

Link to comment
Share on other sites

This is enough

document.getElementsByTagName('a')[3].innerHTML = "CSS";

and the innerHTML of the third element will be changed to CSS and so on . The changing is apparent and temporary but once the page is refreshed , the default setting turn back .

Link to comment
Share on other sites

There is something I could not understand :

document.getElementsByTagName('a')[3]

gives the third element namely :

<a title="HTML Tutorial" class="w3-hide-small" href="/html/default.asp">

but this :

var x = document.getElementsByTagName('a')[3];
console.log(x);

gives :

object {}

although all what I did is assigning

document.getElementsByTagName('a')[3]

to a variable . So I am wondering why ? why the result is different ?

Link to comment
Share on other sites

This is enough

document.getElementsByTagName('a')[3].innerHTML = "CSS";
and the innerHTML of the third element will be changed to CSS and so on . The changing is apparent and temporary but once the page is refreshed , the default setting turn back .
Actually its the forth element, index always start from 0, it should overwrite old with new UNLESS javascript is disabled, that is why it would not be practical for SEO purposes because seach engines will see non javascript links.
Link to comment
Share on other sites

Still anchor element object with index of 3, still! that is what it will return. Only returns specific details when you specify '.innerHTML','.href' etc

document.getElementsByTagName('a')[3]

gives the third element namely : Will give JAVASCRIPT object element reference to HTML coding of

<a title="HTML Tutorial" class="w3-hide-small" href="/html/default.asp">

So now you have JAVASCRIPT object element reference, you can now get, add, change this JAVASCRIPT object element properties

 

When assigned to variable making easier to manage instead of using 'document.getElementsByTagName('a')[3]' everytime

 

x = document.getElementsByTagName('a')[3]; (x = 4th indexed object element of tag name 'A')

 

console.log(x.href); = 'usually_includes_full_path/html/default.asp'

console.log(x.title); = 'HTML Tutorial'

 

x.target="_blank"; now has 'target' attribute value '_blank'.

x.id="what_the"; now has 'id' attribute value of 'what_the'.

x.href="/asp/default2.asp"; now changed href url.

Edited by dsonesuk
Link to comment
Share on other sites

I've already answered this several times now and is getting boring now!

 

document.getElementsByTagName('a')[3] is a JavaScript object element reference to an HTML element.

 

So document.getElementsByTagName('a')[3] returns object

 

x = document.getElementsByTagName('a')[3] will give same reference as above but now is assigned to variable.

 

x returns object

 

The HTML element in question that will be targeted (IF the 4th anchor element found in sequence)

<a title="HTML Tutorial" class="w3-hide-small" href="/html/default.asp">

Link to comment
Share on other sites

I would recommend for you to stop using console.log() and use alert() instead to display values, because the values console.log() is displaying are confusing to you and change depending on the browser.

  • Like 1
Link to comment
Share on other sites

I've already answered this several times now and is getting boring now!

 

Yes but in many cases , I cannot understand what you are writing . By Foxy Mod or Justsomeguy , I understand very well what they mean , my confusion disappeared and I become enlightened but by you not . Whatsoever I did , in many cases , I cannot grasp what you wrote to me . I am only being honest and telling the truth :(

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
×
×
  • Create New...