Hey reader👋 Hope you are doing well😊
In the last post we have talked about DOM. In this post we are going to discuss about its various interfaces.
So let's get started🔥
Document Interface
Document interface represents any web page loaded in browser and serves as an entry point into web pages's content (DOM tree).
Document interface inherits Node interface which inherits EventTarget interface.
EventTarget <--- Node <--- Document
Constructor -> Document()
Note-: document is object of Document inteface.
HTML DOM methods are actions you can perform (on HTML Elements).
HTML DOM properties are values (of HTML Elements) that you can set or change.
Important instance properties of Document ->
Document.activeElement-> Returns the Element that currently has focus.Document.adoptedStyleSheets-> Add an array of constructed stylesheets to be used by the document.Document.children-> Returns child elements of Document.Document.doctype-> Returns the document's doctype.Document.documentURI-> Returns document's location as a string.Document.readyState-> Returns the (loading) status of the document.Document.body-> Returns<body>node.Document.documentMode-> Returns the mode used by the browser.Document.baseURI-> Returns the absolute base URI of the document.Document.lastModified-> Returns the date and time the document was updated.
There are more properties but these are important ones.
Important instance methods of Document ->
document.append()-> Inserts a set of Node objects or string objects after last child of the document.document.getElementbyClassName()-> Returns a list of elements with the given class name.document.getElementbyId()-> Returns an object reference to the identified element.document.getElementbyTagName()-> Returns a list of elements with the given tag name.document.getSelection()-> Returns a selection object representing the range of text selected by the user.document.querySelector()-> Returns first element of given class ,id or tag.document.querySelectorAll()-> Returns the list of elements of given class ,id or tag.document.getAnimation()-> Returns an array of all Animation objects currently in effect.document.createElement(element)-> Create an HTML element.document.write()-> Write into the HTML output stream.document.removeChild(element)-> Remove an HTML element.document.replaceChild(new, old)-> Replace an HTML element.
Element Interface
In the HTML DOM, the Element object represents an HTML element, like P, DIV, A, TABLE, or any other HTML element.
Element interface inherits Node interface which inherits EventTarget interface.
EventTarget <--- Node <--- Element
Important instance properties of Element ->
Element.innerHTML-> Returns the content of element.Element.ariaAutoComplete-> Used to specify how a user input field should behave when user interact with it and the browser's autocomplete feature is enabled. This attribute has following values ->
a) Inline -> Indicates that the browser should display a list of suggestions for input as drop down.
b) list -> List of suggestions as pop up dialog.
c) both -> shows as list as well as inline.
d) noneelement.attributes-> Returns a NamedNodeMap object containing the assigned attributes of the corresponding HTML element.element.childElementCount-> Returns the number of child elements of this element.element.children-> Returns the child elements of this element.element.classList-> Returns a DOMTokenList containing the list of class attributes.element.className-> A string representing the class of the element.element.clientHeight, element.clientWidth-> Returns a number representing the inner height and width of the element respectively.element.scrollHeight-> Returns a number representing the scroll view height of an element.element.scrollTop-> A number representing number of pixels the top of the element is scrolled vertically.element.ariaChecked-> Indicates the current "checked" state of checkboxes, radio buttons, and other widgets that have a checked state.
There are more properties but these are important ones.
Important instance methods of Element ->
element.append()-> Inserts a set of Node objects or string objects after last child of the element.element.animate()-> Method to create and run animation.element.after()-> Attaches Node just after element.element.getAtrribute()-> Retrieves the value of the named attribute from the current node and returns it as a string.element.getBoundingClientRect()-> Returns the size of an element and its position relative to viewport.element.scrollBy()-> Scrolls an element by the given amount.element.scrollIntoView()-> Scrolls the page until the element gets into the view.element.setAttribute()-> Sets the value of a named attribute of the current node.element.toggleAttribute()-> Toggles a boolean attribute, removing it if it is present and adding it if it is not present, on the specified element.
Some propeties and methods of Document interface can also be used with Element inteface.
So this is it for this blog I hope you have understood it well. Please feel free to add if I have missed something.
Don't forget to follow me.
Thankyou🩵
Top comments (0)