Show Menu
Cheatography
  1. Home >
  2. Cheat Sheets >

Modifying DOM Attributes and Content Cheat Sheet by [deleted]

Cheat Sheet was prepared while taking Lynda tutorials in Enhancing DOM with Javascript

Changing HTML attributes

Dot notation provides easy access
img.src gives you an image location
Read and write proper­tiese
Add attributes that don't exist
Be careful of reserved words

Detecting data attributes

Users can type anything as an attibute
Browsers ignore them, but it's not valid HTML
HTML5: Create your own attributes using data
attribute coolness is not valid but data-c­oolness is valid
node.d­ataset property lets you access them
myNode.da­tas­et.task gives the value of data-task

Targeting the attributes property

node.a­ttr­ibutes returns a node list
Accessed in a variety of ways
By numeric index
By named index
Using dot notation
Read only attributes
myNode.at­tri­but­es[0]
myNode.at­tri­but­es[­'src']
myNode.at­tri­but­es.src
 

Working with restricted attributes

node.g­etA­ttr­ibu­te(­att­rib­ute­Name) gets value
node.s­etA­ttr­ibu­te(­att­rib­ute­Name, value) sets value
node.h­asA­ttr­ibu­te(­att­rib­ute­Name) boolean
node.r­emo­veA­ttr­ibu­te(­att­rib­ute­Name) delete attribute

Contro­lling classes with classList

Class properties can have more than one value
Dot notation is not convenient
HTML5 adds the dataList property to nodes
jQuery like class modifi­cation, add, remove, toggle
node.c­las­sLi­st.a­dd­(class) adds a class
node.c­las­sLi­st.r­em­ove­(class) removes a class
node.c­las­sLi­st.t­og­gle­(class) turns class on/off
mode.c­las­sLi­st.l­ength how many classes
mode.c­las­sLi­st.c­on­tai­ns(­class) class name

Using text content modifiers

node.i­nne­rHTML changes text as html
node.o­ute­rHTML includes element's tags with in current node
New tag insert additional html within a specified node
node.i­nse­rtA­dja­cen­tHT­ML(­ins­ert­ion­Point, htmlText)
insert­ion­Point = before­begin, afterb­egin, beforeend, afterend
htmlText = <p>­etc­</p>

Using text content modifiers

node.i­nne­rText just the text of a node
node.t­ext­Content in Firefox
dir (myNode) to see details
Read and Write Property
if (node.i­nn­erText) {
myText = node.i­nne­rText;
} else {
myText = node.t­ext­Con­tent;
}
           

Help Us Go Positive!

We offset our carbon usage with Ecologi. Click the link below to help us!

We offset our carbon footprint via Ecologi
 

Metadata

  • Languages:
  • Published: 22nd October, 2015

Favourited By

theseth walsh

Comments

Unable to download - link not working...

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          Illustrator Cheat Sheet
          Conceptual Database Design Cheat Sheet
          PmWiki Cheat Sheet

          More Cheat Sheets by [deleted]

          Inserting and Deleting Nodes Cheat Sheet