hisoka Posted April 30, 2016 Share Posted April 30, 2016 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 More sharing options...
dsonesuk Posted April 30, 2016 Share Posted April 30, 2016 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 More sharing options...
thescientist Posted April 30, 2016 Share Posted April 30, 2016 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 More sharing options...
davej Posted April 30, 2016 Share Posted April 30, 2016 Did you go through the DOM tutorial? http://www.w3schools.com/js/js_htmldom.asp Link to comment Share on other sites More sharing options...
Ingolme Posted April 30, 2016 Share Posted April 30, 2016 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 More sharing options...
hisoka Posted May 3, 2016 Author Share Posted May 3, 2016 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 More sharing options...
dsonesuk Posted May 3, 2016 Share Posted May 3, 2016 (edited) 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 May 3, 2016 by dsonesuk Link to comment Share on other sites More sharing options...
hisoka Posted May 4, 2016 Author Share Posted May 4, 2016 (edited) 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 May 4, 2016 by hisoka Link to comment Share on other sites More sharing options...
dsonesuk Posted May 4, 2016 Share Posted May 4, 2016 (edited) 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 May 4, 2016 by dsonesuk Link to comment Share on other sites More sharing options...
hisoka Posted May 4, 2016 Author Share Posted May 4, 2016 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 More sharing options...
dsonesuk Posted May 4, 2016 Share Posted May 4, 2016 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 More sharing options...
hisoka Posted May 4, 2016 Author Share Posted May 4, 2016 You know bro that I am in the beginning of the path . I am struggling to understand especially that no one learned me programming and I am doing it all myself . I am new . Link to comment Share on other sites More sharing options...
hisoka Posted May 4, 2016 Author Share Posted May 4, 2016 <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 More sharing options...
dsonesuk Posted May 4, 2016 Share Posted May 4, 2016 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 More sharing options...
dsonesuk Posted May 4, 2016 Share Posted May 4, 2016 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 More sharing options...
dsonesuk Posted May 4, 2016 Share Posted May 4, 2016 <!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 More sharing options...
hisoka Posted May 5, 2016 Author Share Posted May 5, 2016 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 More sharing options...
hisoka Posted May 5, 2016 Author Share Posted May 5, 2016 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 More sharing options...
dsonesuk Posted May 5, 2016 Share Posted May 5, 2016 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 More sharing options...
dsonesuk Posted May 5, 2016 Share Posted May 5, 2016 (edited) 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 May 5, 2016 by dsonesuk Link to comment Share on other sites More sharing options...
hisoka Posted May 7, 2016 Author Share Posted May 7, 2016 (edited) Sorry I did not get a clear answer to my last question : So I am wondering why ? why the result is different ? Edited May 7, 2016 by hisoka Link to comment Share on other sites More sharing options...
dsonesuk Posted May 7, 2016 Share Posted May 7, 2016 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 More sharing options...
Ingolme Posted May 7, 2016 Share Posted May 7, 2016 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. 1 Link to comment Share on other sites More sharing options...
hisoka Posted May 9, 2016 Author Share Posted May 9, 2016 ok I will use alert Link to comment Share on other sites More sharing options...
hisoka Posted May 9, 2016 Author Share Posted May 9, 2016 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now