Modifying DOM Attributes and Content Cheat Sheet

A cheat sheet in English by [deleted]

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

Attributes Content Dom Modifying

9,012 views 2,065 downloads 22 Oct 2015 History

PRs

Download

3.7 avg · 0 ratings

Changing HTML attributes

Dot notation provides easy access

img.src gives you an image location

Read and write propertiese

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-coolness is valid

node.dataset property lets you access them

myNode.dataset.task gives the value of data-task

Targeting the attributes property

node.attributes returns a node list

Accessed in a variety of ways

By numeric index

By named index

Using dot notation

Read only attributes

myNode.attributes[0]

myNode.attributes['src']

myNode.attributes.src

Working with restricted attributes

node.getAttribute(attributeName) gets value

node.setAttribute(attributeName, value) sets value

node.hasAttribute(attributeName) boolean

node.removeAttribute(attributeName) delete attribute

Controlling 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 modification, add, remove, toggle

node.classList.add(class) adds a class

node.classList.remove(class) removes a class

node.classList.toggle(class) turns class on/off

mode.classList.length how many classes

mode.classList.contains(class) class name

Using text content modifiers

node.innerHTML changes text as html

node.outerHTML includes element's tags with in current node

New tag insert additional html within a specified node

node.insertAdjacentHTML(insertionPoint, htmlText)

insertionPoint = beforebegin, afterbegin, beforeend, afterend

htmlText = <p>etc</p>

Using text content modifiers

node.innerText just the text of a node

node.textContent in Firefox

dir (myNode) to see details

Read and Write Property

if (node.innerText) {
myText = node.innerText;
} else {
myText = node.textContent;
}

Modifying DOM Attributes and Content Cheat Sheet

Changing HTML attributes

Detecting data attributes

Targeting the attributes property

Working with restricted attributes

Controlling classes with classList

Using text content modifiers

Using text content modifiers

Badges

Comments (1)

Modifying DOM Attributes and Content Cheat Sheet

Changing HTML attributes

Detecting data attributes

Targeting the attributes property

Working with restricted attributes

Contro­lling classes with classList

Using text content modifiers

Using text content modifiers

Badges

Comments (1)

Controlling classes with classList