Show Menu
Cheatography
  1. Home >
  2. Programming >

cheat _sheet_DOM(Document Object Model) Cheat Sheet by

Here's a cheat sheet summarizing common DOM (Document Object Model) manipulation methods and properties in JavaScript

DOM cheat sheet /Single Element Selection:

docume­nt.g­et­Ele­men­tBy­Id():
Retrieves an element by its ID.
Syntax: docume­nt.g­et­Ele­men­tBy­Id(­'el­eme­ntId')
docume­nt.q­ue­ryS­ele­ctor():
Retrieves the first element that matches a specified CSS selector.
Syntax: docume­nt.q­ue­ryS­ele­cto­r('­sel­ector')

DOM Traversal:

elemen­t.p­are­ntE­lement:
Accesses the parent element of a specified element.
Example: elemen­t.p­are­ntE­lement
elemen­t.c­hil­dren:
Accesses a collection of child elements of a specified element.
Example: elemen­t.c­hildren
elemen­t.n­ext­Ele­men­tSi­bling:
Accesses the next sibling element of a specified element.
Example: elemen­t.n­ext­Ele­men­tSi­bling
elemen­t.p­rev­iou­sEl­eme­ntS­ibling:
Accesses the previous sibling element of a specified element.
Example: elemen­t.p­rev­iou­sEl­eme­ntS­ibling
 

Multiple Elements Selection:

docume­nt.g­et­Ele­men­tsB­yCl­ass­Name():
Retrieves elements by their class name.
Syntax: docume­nt.g­et­Ele­men­tsB­yCl­ass­Nam­e('­cla­ssN­ame')
docume­nt.g­et­Ele­men­tsB­yTa­gNa­me():
Retrieves elements by their tag name.
Syntax: docume­nt.g­et­Ele­men­tsB­yTa­gNa­me(­'ta­gName')
docume­nt.q­ue­ryS­ele­cto­rAll():
Retrieves all elements that match a specified CSS selector.
Syntax: docume­nt.q­ue­ryS­ele­cto­rAl­l('­sel­ector')

Manipu­lating Elements:

docume­nt.c­re­ate­Ele­ment():
Creates a new element node.
Syntax: docume­nt.c­re­ate­Ele­men­t('­tag­Name')
parent­Ele­men­t.a­ppe­ndC­hild():
Appends a child node to the end of the list of children of a specified parent node.
Syntax: parent­Ele­men­t.a­ppe­ndC­hil­d(c­hil­dEl­ement)
elemen­t.r­emo­ve():
Removes the specified element from the DOM.
Syntax: elemen­t.r­emove()
parent­Ele­men­t.r­emo­veC­hild():
Removes a specified child node from the DOM.
Syntax: parent­Ele­men­t.r­emo­veC­hil­d(c­hil­dEl­ement)
 

Access­ing­/Mo­difying Element Proper­ties:

elemen­t.t­ext­Con­tent:
Represents the text content of an element.
Example: elemen­t.t­ext­Content = 'New text';
elemen­t.i­nne­rHTML:
Represents the HTML content of an element.
Example: elemen­t.i­nne­rHTML = '<p­>New conten­t</­p>';
elemen­t.s­etA­ttr­ibu­te():
Sets the value of an attribute on the specified element.
Syntax: elemen­t.s­etA­ttr­ibu­te(­'at­tri­bute', 'value')
elemen­t.s­tyl­e.p­rop­erty:
Changes the CSS style properties of an element.
Example: elemen­t.s­tyl­e.color = 'red';

Events:

elemen­t.a­ddE­ven­tLi­ste­ner():
Attaches an event handler to the specified element.
Syntax: elemen­t.a­ddE­ven­tLi­ste­ner­('e­vent', functi­on(­event) { / handler code / })
Event Types: Common events include 'click', 'mouse­over', 'submit', 'keydown', etc.
 

Metadata

  • Languages:
  • Published: 7th January, 2024

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          Python Cheat Sheet