Cheatography
https://cheatography.com
Cheat Sheet was prepared while taking Lynda tutorials in Enhancing DOM with Javascript
Changing HTML attributesDot 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 attributesUsers 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 propertynode.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 attributesnode.getAttribute(attributeName) gets value | node.setAttribute(attributeName, value) sets value | node.hasAttribute(attributeName) boolean | node.removeAttribute(attributeName) delete attribute |
Controlling classes with classListClass 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 modifiersnode.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 modifiersnode.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;
}
|
Created By
Metadata
Favourited By
Comments
Unable to download - link not working...
Add a Comment
Related Cheat Sheets
More Cheat Sheets by [deleted]