justsomeguy Posted May 18, 2016 Share Posted May 18, 2016 An interface describes the methods and properties. Link to comment Share on other sites More sharing options...
hisoka Posted May 18, 2016 Author Share Posted May 18, 2016 (edited) ok now coming to document.removeChild(element) I did like this : var b = document.getElementsByTagName('a')[7]; document.removeChild( but there was an error saying NotFoundError: Node was not found what is the meaning of the error ? and how to correct it ? Edited May 18, 2016 by hisoka Link to comment Share on other sites More sharing options...
Ingolme Posted May 18, 2016 Share Posted May 18, 2016 The node you're trying to remove is not a direct child of the document. You have to call the removeChild() method of the parent of the element you want to delete. Link to comment Share on other sites More sharing options...
justsomeguy Posted May 18, 2016 Share Posted May 18, 2016 An easy way to do that is to do element.parentNode.removeChild(element). Link to comment Share on other sites More sharing options...
hisoka Posted May 19, 2016 Author Share Posted May 19, 2016 So an interface is the methods and properties of an object ?? Look Justsomeguy I am an idiot . The whole time the word interface was explained here in simple words http://www.w3schools.com/js/js_htmldom_methods.asp The programming interface is the properties and methods of each object But because I did not open my eyes and give some efforts to read . I did not notice it Now I would like to know what is a node . So , first , I tried to reread all the pages I already read so that I did not miss the definition of the word node in w3schools tutorial but I could not find the definition as I did with the word interface . However I found this interesting tree : So I think that each element is a node of the tree . title is a node , href is a node and body is a node... . Right ? or wrong ? In the same time , head element is a child of the parent html element and body element is the child of the parent html element . Title element is the child of head element which is its parent . and html element is the grandfather of the title element Right or wrong ? Link to comment Share on other sites More sharing options...
justsomeguy Posted May 19, 2016 Share Posted May 19, 2016 That's right. Link to comment Share on other sites More sharing options...
hisoka Posted May 20, 2016 Author Share Posted May 20, 2016 An easy way to do that is to do element.parentNode.removeChild(element). For example in this script : <body> <div class='w3-container top'> <a class='w3schools-logo' href='http://www.w3schools.com'>w3schools<span class='dotcom'>.com</span></a> <div class='w3-right toptext w3-wide'>THE WORLD'S LARGEST WEB DEVELOPER SITE</div></div> <div class='w3-navbar w3-card-2 w3-slim topnav' id='topnav'> <div style='overflow:auto;'> <div style='float:left;width:50%;overflow:hidden;height:44px'> <a href='javascript:void(0);' class='topnav-localicons w3-hide-large w3-left' onclick='open_menu()' title='Menu'>☰</a> <a href='/default.asp' class='topnav-icons fa fa-home w3-left' title='Home'></a> <a href='/html/default.asp' class='w3-hide-small' title='HTML Tutorial'>HTML</a><a href='/css/default.asp' class='w3-hide-small' title='CSS Tutorial'>CSS</a><a href='/js/default.asp' class='w3-hide-small' title='JavaScript Tutorial'>JAVASCRIPT</a><a href='/sql/default.asp' class='w3-hide-small' title='SQL Tutorial'>SQL</a><a href='/php/default.asp' class='w3-hide-small' title='PHP Tutorial'>PHP</a><a href='/bootstrap/default.asp' class='w3-hide-small' title='Bootstrap Tutorial'>BOOTSTRAP</a><a href='/jquery/default.asp' class='w3-hide-small' title='jQuery Tutorial'>JQUERY</a><a href='/angular/default.asp' class='w3-hide-small' title='Angular Tutorial'>ANGULAR</a><a href='/xml/default.asp' class='w3-hide-small' title='XML Tutorial'>XML</a></div> <div style='float:right;width:110px;overflow:hidden;height:44px;'> <a href='javascript:void(0);' class='topnav-icons fa fa-search w3-right' onclick='w3_open_nav("search")' title='Search W3Schools'></a> <a href='javascript:void(0);' class='topnav-icons fa fa-globe w3-right' onclick='openGoogleTranslate();w3_open_nav("translate")' title='Translate W3Schools'></a></div> <div class='w3-hide-small' style='float:right;width:30%;overflow:hidden;height:44px;'> <a id='topnavbtn_tutorials' href='javascript:void(0);' onclick='w3_open_nav("tutorials")' title='Tutorials'>TUTORIALS <i class='fa fa-caret-down'></i><i class='fa fa-caret-up' style='display:none'></i></a><a id='topnavbtn_references' href='javascript:void(0);' onclick='w3_open_nav("references")' title='References'>REFERENCES <i class='fa fa-caret-down'></i><i class='fa fa-caret-up' style='display:none'></i></a><a id='topnavbtn_examples' href='javascript:void(0);' onclick='w3_open_nav("examples")' title='Examples'>EXAMPLES <i class='fa fa-caret-down'></i><i class='fa fa-caret-up' style='display:none'></i></a><a href='/forum/default.asp'>FORUM</a></div></div> <div id='nav_tutorials' class='w3-dropnav w3-light-grey w3-card-2 w3-center'></div> <div id='nav_references' class='w3-dropnav w3-light-grey w3-card-2 w3-center'></div> <div id='nav_examples' class='w3-dropnav w3-light-grey w3-card-2 w3-center'></div> <div id='nav_translate' class='w3-dropnav w3-light-grey w3-card-2 w3-center'></div> <div id='nav_search' class='w3-dropnav w3-light-grey w3-card-2 w3-center'></div></div> <div class='w3-row w3-light-grey' id='belowtopnav'> <div class='w3-col w3-slim' id='leftmenu'> <div id='leftmenuinner'> <div class='w3-light-grey' id='leftmenuinnerinner'> how to delete this element : <a href='/default.asp' class='topnav-icons fa fa-home w3-left' title='Home'></a> var b = document.getElementsByTagName('a')[2] ; and we know that it is the child of <body> so I did like this : var b = document.getElementsByTagName('a')[2] ; document.body.parentElement.removeChild( but I got an error : NotFoundError: Node was not found However if we look in html script above we will notice that body node exists so why it says node not found ? and how to correct again the error Link to comment Share on other sites More sharing options...
Ingolme Posted May 20, 2016 Share Posted May 20, 2016 The node you found is not a child node of the body's parent. Link to comment Share on other sites More sharing options...
justsomeguy Posted May 20, 2016 Share Posted May 20, 2016 The point of the code I showed is that you don't need to know what the parent is. b.parentNode.removeChild(; Link to comment Share on other sites More sharing options...
hisoka Posted May 20, 2016 Author Share Posted May 20, 2016 The node you found is not a child node of the body's parent. So I did like this to get the parent of the child element : var b = document.getElementsByTagName('a')[2] ; var x = b.parentNode ; console.log(x); and I got : <div style="float:left;width:50%;overflow:hidden;height:44px"> then did like this : x.removeChild( and it was removed Link to comment Share on other sites More sharing options...
Ingolme Posted May 20, 2016 Share Posted May 20, 2016 That is correct. The variable x contains the parent of node b, so you can call removeChild() on it to remove b from the document. Link to comment Share on other sites More sharing options...
hisoka Posted May 20, 2016 Author Share Posted May 20, 2016 (edited) Now to understand : document.getElementById(id).onclick = function(){code} I wrote this : <html> <body> <p id="here">w3schools.invisionzone.com</p> <script> function change() { var x = document.getElementById('here'); x.style.color = "red"; } </script> <form> <button type="button" onclick="change()" >Click Me!</button> </form> </body> </html> Edited May 20, 2016 by hisoka Link to comment Share on other sites More sharing options...
hisoka Posted May 20, 2016 Author Share Posted May 20, 2016 finding HTML objects : document.anchors I would like to enumerate the first 5 <a> elements using for loop but I failed : var x = document.anchors ; for ( var i = 0 ; i<=5 ; i++) { console.log(x);} This what I got HTMLCollection [ ] HTMLCollection [ ] HTMLCollection [ ] HTMLCollection [ ] HTMLCollection [ ] I would like to get the first 5 elements . Any hint ? Link to comment Share on other sites More sharing options...
justsomeguy Posted May 20, 2016 Share Posted May 20, 2016 You keep printing the same thing, x, which does not change inside the loop. Use i to say which element in x you want. Also, that will print the first 6 elements, not 5. Link to comment Share on other sites More sharing options...
Ingolme Posted May 20, 2016 Share Posted May 20, 2016 The code should be like this: var x = document.anchors ; for ( var i = 0 ; i < 5 ; i++) { console.log(x[i]); } Please look carefully at the differences between this and your original code. Link to comment Share on other sites More sharing options...
hisoka Posted May 20, 2016 Author Share Posted May 20, 2016 (edited) var x = document.anchors ; for ( var i = 0 ; i < 5 ; i++) { console.log(x[i]); } gives undefined as a result and even var x = document.anchors ; for ( var i = 0 ; i < 5 ; i++) { alert(x[i]); } gives undefined I do not know how to get the result . Any help Edited May 20, 2016 by hisoka Link to comment Share on other sites More sharing options...
justsomeguy Posted May 20, 2016 Share Posted May 20, 2016 document.anchors is deprecated, and might not be supported. The MDN documentation also says it only includes anchors with a name attribute. An alternative would be document.getElementsByTagName. Link to comment Share on other sites More sharing options...
Ingolme Posted May 21, 2016 Share Posted May 21, 2016 You probably would do better with x = document.getElementsByTagName("a") instead of document.anchors. Link to comment Share on other sites More sharing options...
Chikwado Posted June 10, 2016 Share Posted June 10, 2016 You do not seem to have learned html before going through javascript. 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