The document object represents a web document or page. It represents a document as a hierarchical tree structure and each element in the document tree is called a Node in the DOM (Document Object Model).
Structurally, the Document Object Model consists of nodes, with each node representing content in the web document. It gives developers a way of representing everything on a web page so that the contents of the web page is accessible via a common set of properties and methods.
The getElementById() and getElementsByTagName() were the two methods from DOM standard and the HTML5 specification adds three new methods for accessing elements, getElementsByClassName(), querySelector(), and querySelectorAll().
Document Object Model
Above program returns "Document Object Model" .
The getElementsByTagName() is one of the method exposes for accessing nodes directly. This method takes a tag name as argument and returns a collection of all the nodes it finds in the document that are a sort of tag.
Above program returns 4 , because total 4 paragraph elements in the HTML page.
The getElementsByClass() method works same like getElementById() method, and it will returns a collection of all elements in the document with the specified class name.
The above program first alert 4, the number of p elements, and then it change the second p element's text to "Second Paragraph".
Both querySelector() and querySelectorAll() methods let you enter a CSS selector as an argument and return the selected elements as DOM elements.
It will returns the first element that matches a specified CSS selector in the document.
Above program change the first paragraph text to "First Paragraph".
The querySelectorAll() method returns a collection filled with the matching elements in source order. Since it is a static collection, the modification of the document has no effect on the collection
When you run the above code, you can see the place of the second p element text is changed but the p element remains there (the change you can see at the top line of browser only).