caption – This property represents the table caption. If no caption element is associated with the table, it can be null.
tHead – This property represents the table’s <thead> element. Its value can be null if there is no such element.
tFoot – This property represents the table’s <tfoot> element. Its value can be null if there is no such element.
rows – This property rows returns a live HTMLCollection of all the rows in the table, including the rows contained within any <thead>, <tfoot>, and <tbody> elements. Although the property itself is read-only, the returned object is live and allows the modification of its content.
tBodies – This read-only property returns a live HTMLCollection of the table bodies. Although the property is read-only, the returned object is live and allows the modification of its content.
Methods
createCaption() – This method returns the caption for the table. If no caption element exists on the table, this method creates it, then returns it.
deleteCaption() – This method removes the caption from the table. If there is no caption associated with the table, this method does nothing.
createTHead( ) – This method returns the <thead> element association with the table, of type HTMLTableSectionElement. If there is no such element associated to the table, this method creates it, then returns it.
deleteTHead() – This removes a <thead> element from the table.
createTFoot() – This method returns the <tfoot> element associated with the table, of type HTMLTableSectionElement. If there is no footer for this table, this methods creates it, then returns it.
deleteTFoot() – This method removes a <tfoot> element from the table.
insertRow() method inserts a new row in the table and returns a reference to the new row.
Syntax: – var row = HTMLTableElement.insertRow(index = -1);
index is the row index of the new row. row is assigned a reference to the new row. A reference to HTMLTableRowElement. If index is -1 or equal to the number of rows, the row is appended as the last row. If index is greater than the number of rows, an IndexSizeError exception will result. If index is omitted it defaults to -1. If a table has multiple tbody elements, by default, the new row is inserted into the last tbody.
deleteRow() method removes a row from the table. If the number of rows to delete, specified by the parameter, is greater or equal to the number of available rows, or if it is negative and not equal to the special index -1, representing the last row of the table, the exception INDEX_SIZE_ERR is thrown.
Syntax: – HTMLTableElement.deleteRow(index)
an index is an integer representing the row that should be deleted. However, the special index -1 can be used to remove the very last row of a table.
HTMLTableSectionElement
The HTMLTableSectionElement interface provides special properties and methods for manipulating the layout and presentation of sections, that is headers, footers and bodies, in an HTML table.
Properties rows
Methods insertRow() deleteRow()
Rows – This returns a live HTMLCollection containing the rows in the section. The HTMLCollection is live and is automatically updated when rows are added or removed.
insertRow() – It inserts a new row just before the given position in the section. If the given position is not given or is -1, it appends the row to the end of section. If the given position is greater (or equal as it starts at zero) than the amount of rows in the section, or is smaller than -1, it raises a DOMException with the IndexSizeError value.
deleteRow() – It removes the cell at the given position in the section. If the given position is greater (or equal as it starts at zero) than the amount of rows in the section, or is smaller than 0, it raises a DOMException with the IndexSizeError value.
HTMLTableRowElement
The HTMLTableRowElement interface provides special properties and methods for manipulating the layout and presentation of rows in an HTML table.
Properties cells rowIndex sectionRowIndex
Methods insertCell() deleteCell()
Properties
cells – It returns a live HTMLCollection containing the cells in the row. The HTMLCollection is live and is automatically updated when cells are added or removed.
rowIndex – It returns a long value which gives the logical position of the row within the entire table. If the row is not part of a table, returns -1.
sectionRowIndex – It returns a long value which gives the logical position of the row within the table section it belongs to. If the row is not part of a section, returns -1.
Methods
insertCell() – This method inserts a new cell into a table row and returns a reference to the cell.
Syntax: – var cell = HTMLTableRowElement.insertCell(index = -1);
HTMLTableRowElement is a reference to an HTML table row element. index is the cell index of the new cell. cell, is assigned a reference to the new cell. If index is -1 or equal to the number of cells, the cell is appended as the last cell in the row. If index is greater than the number of cells, an IndexSizeError exception will result. If index is omitted it defaults to -1.
Methods
deleteCell() – It removes the cell at the given position in the row. If the given position is greater (or equal as it starts at zero) than the amount of cells in the row, or is smaller than 0, it raises a DOMException with the IndexSizeError value.
The style property is used to get or set the inline style of an element. While getting, it returns a CSSStyleDeclaration object that contains a list of all styles properties for that element with values assigned for the attributes that are defined in the element’s inline style attribute.
Style Property represents only the CSS declarations set in the element’s inline style attribute, not those that come from style rules elsewhere, such as style rules in the <head> section, or external style sheets or browser default.
Syntax:-
Return element.style.property
Set element.style.property = “value”
A style declaration is reset by setting it to null or an empty string, e.g. element.style.property = null
Inline Style Manipulation
The most direct way to modify CSS value with JavaScript is through the style property that corresponding to the inline style sheet specification for a particular HTML element. To perform a manipulation of the CSS with a JavaScript DOM interface, you would access the style object of the element.
Style Property
Example: –
Dynamic Style Manipulation
As we know The most direct way to modify CSS value with JavaScript is through the style property that corresponding to the inline style sheet specification for a particular HTML element, This has performance considerations since you need to change a single property at a time. We might manipulate style rules using CSS class Selector. The element’s class attribute is represented as className property in DOM.
DOMTokenList
The DOMTokenList interface represents a set of space-separated tokens. Such a set is returned by Element.classList, HTMLLinkElement.relList, HTMLAnchorElement.relList, HTMLAreaElement.relList, HTMLIframeElement.sandbox, or HTMLOutputElement.htmlFor. etc. It is indexed beginning with 0 as with JavaScript Array objects. DOMTokenList is always case-sensitive.
The Element.classList is a read-only property that returns a live DOMTokenList collection of the class attributes of the element.
Syntax: –
var elementClasses = elementNodeReference.classList;
Computed Style
The computed style is the style actually used in displaying the element, after “stylings” from multiple sources have been applied. Style sources can include: internal style sheets, external style sheets, inherited styles, and browser default styles. Style Property represents only the CSS declarations set in the element’s inline style attribute, not those that come from style rules elsewhere, such as style rules in the section, or external style sheets or browser default. To get the values of all CSS properties for an element you should use window.getComputedStyle( ) instead. The returned style is a live CSSStyleDeclaration object ( The CSSStyleDeclaration object represents a collection of CSS property-value pairs.), which updates itself automatically when the element’s style is changed.
Syntax:- window.getComputedStyle(element, pseudoElement) Element – Element for which to get the computed style. pseudoElement – A string specifying the pseudo-element to match. Must be omitted (or null) for regular elements.
Ex: – var elm = document.getElementById(“myid”); var allCSSProp = window.getComputedStyle(elm)
Many object properties are simply direct mapping to the attributes of the HTML element. In other words, there is a mapping directly between HTML Syntax and the DOM.
Ex:-
Above title can be accessed in DOM by document.getElementById(“myid”).title
P tag’s title attribute is mapped to DOM property title in the above example that is the reason we can access title in DOM that way.
HTML-DOM Mapping
The mapping is direct between HTML attributes and the DOM properties with the following considerations:-
The mapping is direct if the attribute is a single non-reserved word, so an element’s title attribute is accessed via the corresponding DOM object’s title property.
The mapping will change case as camelCase if the attribute has two word. Ex:- tabindex attribute will be represented tabIndex in the DOM.
If the HTML attribute name is reserved under JavaScript, the value will be modified to work. Ex:- class attribute will be represented className in DOM for attribute will be represented htmlFor in DOM
There are also some exception. Ex: – char attribute will be represented ch in DOM
For others and custom attributes, we have to use getAttribute() and setAttribute( ) Methods because they may not have direct mapping.
CSS-DOM Mapping
We can modify the CSS Properties by applying a mapping between the CSS property and the DOM object. The mapping is direct between CSS properties and the DOM properties with the following considerations:-
CSS properties have a single word, so their mapping is direct. Ex:- color in CSS will be represented as color in DOM too.
Hyphenated CSS properties are repsrented as a single word with camelCase in the DOM. Ex:- background-color in CSS will be represented as backgroundColor in DOM
CSS properties value with vendor prefixs. Ex:- -webkit-box-shadow in CSS will be represented as webkitBoxShadow in DOM.
There are some reserved words which can be exception in the above cases. Ex – float in CSS will be represented as cssFloat in DOM
The attributes property returns a live collection of all attribute nodes registered to the specified node. It is a read-only property.
Syntax:- Element.attributes[index/key]
Attr Object
Properties
name (do not use nodeName)
value (do not use nodeValue or textContent or appendChild() or insertBefore( ) or removeChild( ) or replaceChild( ) these all are deprecated for attr object)
Methods
setAttribute( )
getAttribute( )
removeAttribute( )
setAttribute( )
This method is used to set the value of an attribute on the specified element. If the attribute already exists, the value is updated; otherwise, a new attribute is added with the specified name and value. We should not use this method to set inline style as it will overwrite other CSS properties.
The getAttribute() returns the value of a specified attribute on the element. If the given attribute does not exist, the value returned will either be null or “ ”.
Syntax: – var attribute = element.getAttribute(attributeName);
removeAttribute( )
This method is used to remove an attribute from the specified element.
Syntax: – element.removeAttribute(attrName);
hasAttribute( )
The hasAttribute() method returns a Boolean value indicating whether the specified element has the specified attribute or not.
Syntax:- var result = element.hasAttribute(attr_name);
[ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.1:compile (default-compile) on project chat: Compilation failure: Compilation failure:
[ERROR] Source option 5 is no longer supported. Use 6 or later.
[ERROR] Target option 1.5 is no longer supported. Use 1.6 or later.
[ERROR] -> [Help 1]
[ERROR]
Take a Speedtest directly from your toolbar to quickly test your internet performance without interruption.
2. Save to Google Drive:
This extension allows you to save web content directly to Google Drive through a browser action or context menu. You can save documents, images, and HTML5 audio and video all by right-clicking and selecting ‘Save to Google Drive’. You can save the currently viewed page using the ‘Save to Google Drive’ browser action. You can automatically convert Microsoft Office files or comma-separated files to Google Docs format.
3. Keeper® Password Manager & Digital Vault:
Protect and autofill passwords with the world’s most trusted and #1 downloaded secure password manager and digital vault. Stay protected with the world’s most trusted and #1 downloaded password keeper and digital vault. Keeper’s password manager generates, stores, and auto-fills strong passwords on all of your devices while also securely storing and protecting your private documents. Don’t get hacked. Get Keeper.
4. Vimeo Record – Screen & Webcam Recorder :
Screen recording is often the easiest way to demonstrate something — a design, a functionality, or a new tool — and now, Vimeo makes it straightforward. You can use the Vimeo Record tool to easily record your screen and share that recording with others.
5. Scrn.li – Screenshot Tool and Editor:
The app to make a full webpage screenshot or just any part of it with an opportunity to edit, save and download screen capture to your PC. The app is launched from a browser that totally saves your time. Simply click the extension icon to choose from options whole page screenshot or a selected part. Lots of features at your disposal allow you to – edit and reset changes;………….
6. Full Screen:
This is just a full-screen button added to the toolbar. It does exactly the same as the keyboard shortcuts (F11 on Windows or Cmd+Shift+F on Mac). You can change the icon and add/remove the full-screen function to the context menu.
7. Site Palette – Palette Generator Extension:
This Chrome browser extension generates comprehensive palettes. Site Palette is one of the must-have Chrome extensions for developers (frontend) as well as expert designers. This plugin can aid you in rapidly extracting and creating color pallets. As a developer, you can easily download preview PDFs, palette images and create shareable links. It is armed with flawless integration with Google Art Palette and coolers. co. Site Palette has been considered as one of the essential Chrome browser extensions for designers and developers across the globe.
8. Font Face Ninja – Font Identifier Extension:
FontFace Ninja is one of the best Chrome extensions for developers that help you identify the fonts you see online. This fantastic browser extension allows you to hover over the text on the screen to instantaneously assist you in spotting a font, letter-spacing, line spacing, size, and even the color hex code. Besides, the Chrome browser extension also lets you test the font out yourself with whatever text by writing anything out in the extension’s drop-down window.
9. React – Developer Tools Extension:
React is a Chrome DevTools chrome extension or chrome plugin that provides the open-source React JavaScript library for a website or web page. Among the list of chrome browser extensions, this extension allows you to check a React tree, comprising the component hierarchy, state, props, etc.
10. ColorZilla – Color Picker Extension:
ColorZilla for Google Chrome is an extension that assists web developers and graphic designers with color-related tasks – both basic and advanced.
11. Page Ruler – Size Checker Extension:
Unlike other available tools in the market, it has a lot of unique features which ensure highly accurate measurement of elements. This makes it a must-have tool for developers and designers.
12. Emoji Keyboard by JoyPixels®
The world’s leading emoji keyboard for Chrome. Now Unicode 13 compatible.
13. Enhanced GitHub
Display repo size, size of each file, download link, and option to copy file contents. Extension that provides useful features on top of GitHub Website.
14. AdGuard AdBlocker
Unmatched AdBlock extension against advertising and pop-ups. Blocks ads on Facebook, YouTube, and all other websites. AdGuard ad blocker effectively blocks all types of ads on all web pages, even on Facebook, YouTube and others.
15. Octotree – GitHub code tree
Browser extension that enhances GitHub code review and exploration. Features – IDE-like code tree, Folder, and file search, Support private repositories, Repo/file/issue/pull request bookmarking, High performance, working with repositories of any size
16. Light House:
Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO, and more.
17. Wappalyzer:
Wappalyzer is a technology profiler that shows you what websites are built with. Wappalyzer is more than a CMS detector or framework detector: it uncovers more than a thousand technologies in dozens of categories such as programming languages, analytics, marketing tools, payment processors, CRM, CDN, and others.
18. Momentum:
Replace the new tab page with a personal dashboard featuring to-do, weather, and inspiration. New Tab page that gives you a moment of calm and inspires you to be more productive. Get inspired with a daily photo and quote, set a daily focus, and track your to-dos. Eliminate distractions and beat procrastination with a reminder of your focus for the day on every new tab. Join over 3 million users and get inspired to create the life you want to live.
19. CSSViewer:
CSSViewer is a simple CSS properties viewer originally made by Nicolas Huon as a Firefox add-on (2006-2008).
20. Grammarly for Chrome:
From grammar and spelling to style and tone, Grammarly helps you eliminate writing errors and find the perfect words to express yourself.
21. Code Cola – Source Code Viewer Extension:
From a developer’s perspective, Code Cola is one of the best chrome extensions for developers. You can use it to see the source code of the project you are working on. Simultaneously, this smart chrome browser extension or tool functions as a CSS editor so that you can effortlessly edit and share CSS properties. It helps interactive designers, website operators, visual designers, and other users alter the online pages very smoothly and rapidly.
