Jump to content

continuation of understanding what is going on in HTML DOM tutorial


hisoka

Recommended Posts

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 by hisoka
Link to comment
Share on other sites

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

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 :

 

pic_htmltree.gif

 

 

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

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

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

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

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 by hisoka
Link to comment
Share on other sites

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

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

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 by hisoka
Link to comment
Share on other sites

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

  • 3 weeks later...

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