The document object is not a Node, it is an object that holds the DOM. document.documentElement is the tag document.body is the tag. They are both nodes and will have carriage returns as childNodes.
what about the geElementByName ?????? i searched many videos but this tutorial is more simple to understand . thak you , i hope you will give the answer ......
`getElementsByName` and `getElementsByClassName` were early attempts to do what `querySelectorAll` does. They are both limited in only dealing with tag names OR CSS class names. `querySelectorAll` lets you use any CSS selector including ids, classes, tags, attributes, etc. Both `getElementsByTagName` and `getElementsByClassName` return HTMLCollections. `getElementsByName` returns a live NodeList. However, it is very limited in where it would be practical or useful. names get used in form elements and not much else. The only time you use the same more than once is with radio or checkbox inputs. So, if you want a NodeList containing a group of radio or checkbox inputs then you would use `getElementByName`
Hi I have many a span td tag inside tr total tr are 40 all tr have same Id and class I can get href value or a text but when I used same on android I always getting object htmltableslectionelement I spent 2 weeks on this but no result any hint ?
Sachin Chakravarthy S First, never use the same I'd more than once. IDs must be unique. Beyond that I would need to see your code to point out the problems. Post it to codepen or jsfiddle and provide a link.
version 1 of the DOM goes back to around 1996. Things have changed slightly over that time. Things were removed, added, and updated. Currently, W3C is looking at version 4 of the DOM.
You can, with Array.from( ) - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from However, I would ask why you want to convert it. You can already loop through one with forEach or a for...in loop or a for loop. The values( ) and keys( ) methods will give you an iterator so you can also use a for...of loop.
I have two basic playlists 1. JavaScript from the Start - ruclips.net/video/zjVFuft1O2Y/видео.html which talks about understanding how to program in JavaScript without worrying about things in the browser and the Document Object Model. 2. JavaScript in the Browser - ruclips.net/video/fWDVDm4HRwA/видео.html which assumes that you understand the basics of programming in Javascript (covered in the first playlist) and talks about how to manipulate content in the browser. The video on this page is part of the second playlist. I would suggest that you browse through the first playlist and watch the videos about things that you don't understand. By the time you finish both playlists, if you have been following along and experimenting, then you should be a fairly decent JavaScript developer.
Didn't know you have these playlists.I have been learning javascrpt basics without a definite outline of the lessons.Guess I have to learn the abc's again. I'll check all these videos. Thanks .
No. jQuery is a technology whose time has passed. 5 years ago it was a useful tool for writing scripts that ran across all the browsers. It simplified the syntax for things like AJAX and DOM manipulation. Now, with ES5 & ES6 being fully supported nearly everywhere, DOM methods like querySelector and querySelectorAll, fetch and promises have filled the gap that jQuery was addressing. Adding jQuery to a webpage now is only bloating the size of your page for no reason. The only reason I would do anything with jQuery now is if I had to because it was a dependency of some other technology that I was implementing. Even then, I would just include the library. I would still be writing vanilla JS instead of the jQuery syntax. In the College courses I teach on web development, I dropped jQuery as a topic two years ago. If you want to learn frameworks or libraries then I strongly recommend getting comfortable with basic to intermediate JavaScript including the new ES6 features and then learn either React, Angular, or Vue.
Hi, I am following all of your vídeos and its awesome because you are using es6 syntax which is good, its hard to find videos like that. I am trying to build a code to check if a user name exist in a data base in a form of an simple object but I am struggling with the concept, Im using the indexof method and manage to work but later on the program discover some bugs. In the input event am calling a function and pass a variable with the value and what this function does is loop throught the object and stores the user name in a new variable then I use indexof method to check if it is not greater than -1 it means that the input didnt match a particular username when it does I check in another if statement if that input its === to the a username at that moment if its true I send a message saying this username already exist but the problem is when I keep typing this message wont change and I dont get more comparison unless I delete back what I typed, I have a wrote a message to check if the username is available. I am building a single page progressive web app and it is important to do this kinds of things and another live validations, Am planning to use firebase that is why I need to understand how to build this so I cant check on the fly the users that register on the app. I hope you can help me and sorry for the long writing. Keep it up with your vídeos.
If you are using Firebase then you are making asynchronous calls to the Firebase server to look at the data. Firebase does a great job of keeping the client and the server in sync. So, it will have a local copy of the userdata that it can look at. You will be using the Firebase methods for checking the data. The actual methods you call will depend on your data structure but you should be using the Firebase methods to find the match in the data. Eg: data.child('something').child('users').orderByChild('username').equalTo( usernameToMatch ); In this example 'something' and 'users' are just examples of what could be in your data structure. 'username' is what I am assuming the username field is called inside of the object called 'users'. So, once you are using the Firebase methods for searching and finding the matching username it is just a matter of triggering that test when usernames are typed. That means, what events you are using on your field? let un = document.getElementById('user'); un.addEventListener('input', (ev)=>{ let field = ev.currentTarget; let usernameToMatch = field.value; //now check firebase for matching usernames (see above) }); Your options for EVENTS to use in getting the new value from the form field are: input - each time the user enters a character or deletes a character from the text field keydown - each time the user starts to press a key when focus is on the field blur - when focus leaves the input, compare to what used to be there change - when focus leaves the input AND there has been a change to the value
regarding HTML collections, can HTML collections use array functions, such as forEach() instead of for() that you used in you code line 51 in current video ?
first-rate content coupled with a nice voice. As always thank you very much.
Just the right thing I need right now to beef up my WebDev skills. You have catered to a need. Thx for that.
Great video. It gives a nice overview over live/static NodeLists/HTMLCollections. I didn't think of the childNodes-NodeList that is live.
You my canadian sir, are phenomenal x
Why does the document object not have the carriage returns as text nodes in its childNodes?
The document object is not a Node, it is an object that holds the DOM.
document.documentElement is the tag
document.body is the tag.
They are both nodes and will have carriage returns as childNodes.
Thank you, very useful information indeed
Thanks for the awesome lecture
what about the geElementByName ??????
i searched many videos but this tutorial is more simple to understand . thak you , i hope you will give the answer ......
`getElementsByName` and `getElementsByClassName` were early attempts to do what `querySelectorAll` does. They are both limited in only dealing with tag names OR CSS class names. `querySelectorAll` lets you use any CSS selector including ids, classes, tags, attributes, etc.
Both `getElementsByTagName` and `getElementsByClassName` return HTMLCollections.
`getElementsByName` returns a live NodeList. However, it is very limited in where it would be practical or useful. names get used in form elements and not much else. The only time you use the same more than once is with radio or checkbox inputs. So, if you want a NodeList containing a group of radio or checkbox inputs then you would use `getElementByName`
@@SteveGriffith-Prof3ssorSt3v3 thank u brother 🙏
Thx for professional explanation ;)
Lol Brackets' method suggestion has the wrong return type. Check 11:58 where it says, that getElementsByClassName returns a NodeList.
really helped me.. thanks
A master is a master.
Hi I have many a span td tag inside tr total tr are 40 all tr have same Id and class I can get href value or a text but when I used same on android I always getting object htmltableslectionelement I spent 2 weeks on this but no result any hint ?
Sachin Chakravarthy S First, never use the same I'd more than once. IDs must be unique.
Beyond that I would need to see your code to point out the problems. Post it to codepen or jsfiddle and provide a link.
why do the node types not go up in consecutive numbers?
version 1 of the DOM goes back to around 1996. Things have changed slightly over that time. Things were removed, added, and updated. Currently, W3C is looking at version 4 of the DOM.
hi is there anyway can i convert node list arising from querySelctorAll() to array
You can, with Array.from( ) - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from
However, I would ask why you want to convert it. You can already loop through one with forEach or a for...in loop or a for loop. The values( ) and keys( ) methods will give you an iterator so you can also use a for...of loop.
thankyou
i want to convert it to array so that i can use array method and functions directly to it .Otherwise i have to use array.prototype
I don't understand most of it yet. I think I should step backwards to more understandable lessons. Any suggestion?
I have two basic playlists
1. JavaScript from the Start - ruclips.net/video/zjVFuft1O2Y/видео.html which talks about understanding how to program in JavaScript without worrying about things in the browser and the Document Object Model.
2. JavaScript in the Browser - ruclips.net/video/fWDVDm4HRwA/видео.html which assumes that you understand the basics of programming in Javascript (covered in the first playlist) and talks about how to manipulate content in the browser.
The video on this page is part of the second playlist.
I would suggest that you browse through the first playlist and watch the videos about things that you don't understand.
By the time you finish both playlists, if you have been following along and experimenting, then you should be a fairly decent JavaScript developer.
Didn't know you have these playlists.I have been learning javascrpt basics without a definite outline of the lessons.Guess I have to learn the abc's again. I'll check all these videos. Thanks .
Are you planning to make jQuery tutorials?
No. jQuery is a technology whose time has passed. 5 years ago it was a useful tool for writing scripts that ran across all the browsers. It simplified the syntax for things like AJAX and DOM manipulation. Now, with ES5 & ES6 being fully supported nearly everywhere, DOM methods like querySelector and querySelectorAll, fetch and promises have filled the gap that jQuery was addressing. Adding jQuery to a webpage now is only bloating the size of your page for no reason.
The only reason I would do anything with jQuery now is if I had to because it was a dependency of some other technology that I was implementing. Even then, I would just include the library. I would still be writing vanilla JS instead of the jQuery syntax.
In the College courses I teach on web development, I dropped jQuery as a topic two years ago.
If you want to learn frameworks or libraries then I strongly recommend getting comfortable with basic to intermediate JavaScript including the new ES6 features and then learn either React, Angular, or Vue.
@@SteveGriffith-Prof3ssorSt3v3 thanks u sir
Thanks a lot!
Hi, I am following all of your vídeos and its awesome because you are using es6 syntax which is good, its hard to find videos like that. I am trying to build a code to check if a user name exist in a data base in a form of an simple object but I am struggling with the concept, Im using the indexof method and manage to work but later on the program discover some bugs. In the input event am calling a function and pass a variable with the value and what this function does is loop throught the object and stores the user name in a new variable then I use indexof method to check if it is not greater than -1 it means that the input didnt match a particular username when it does I check in another if statement if that input its === to the a username at that moment if its true I send a message saying this username already exist but the problem is when I keep typing this message wont change and I dont get more comparison unless I delete back what I typed, I have a wrote a message to check if the username is available. I am building a single page progressive web app and it is important to do this kinds of things and another live validations, Am planning to use firebase that is why I need to understand how to build this so I cant check on the fly the users that register on the app. I hope you can help me and sorry for the long writing. Keep it up with your vídeos.
If you are using Firebase then you are making asynchronous calls to the Firebase server to look at the data. Firebase does a great job of keeping the client and the server in sync. So, it will have a local copy of the userdata that it can look at.
You will be using the Firebase methods for checking the data. The actual methods you call will depend on your data structure but you should be using the Firebase methods to find the match in the data.
Eg: data.child('something').child('users').orderByChild('username').equalTo( usernameToMatch );
In this example 'something' and 'users' are just examples of what could be in your data structure. 'username' is what I am assuming the username field is called inside of the object called 'users'.
So, once you are using the Firebase methods for searching and finding the matching username it is just a matter of triggering that test when usernames are typed.
That means, what events you are using on your field?
let un = document.getElementById('user');
un.addEventListener('input', (ev)=>{
let field = ev.currentTarget;
let usernameToMatch = field.value;
//now check firebase for matching usernames (see above)
});
Your options for EVENTS to use in getting the new value from the form field are:
input - each time the user enters a character or deletes a character from the text field
keydown - each time the user starts to press a key when focus is on the field
blur - when focus leaves the input, compare to what used to be there
change - when focus leaves the input AND there has been a change to the value
finally solved this! I didnt know that a return stament will stop a for loop inside a function when a condition is true in my case
Klein Venedig yes. A return statement will immediately stop any function as soon as it is encountered.
using vuejs now !
I feel it too late to watch your videos
Sorry. I don't understand what you are asking.
I did not ask you anything :) , but do you have videos about closures ?
ruclips.net/video/K9fjMX6F5fE/видео.html and ruclips.net/video/UcmQBrFWDx4/видео.html and ruclips.net/video/F_N97iovVbQ/видео.html
regarding HTML collections, can HTML collections use array functions, such as forEach() instead of for() that you used in you code line 51 in current video ?
NodeLists can ruclips.net/video/N8tnSiDvl7A/видео.html
Gogly ...
Godly? :)
Your example is too complicated.