Skip to content

Instantly share code, notes, and snippets.

@tpowell

tpowell/gist:9db487e680f3e18b4aa9

Created November 5, 2014 04:59
Show Gist options
  • Save tpowell/9db487e680f3e18b4aa9 to your computer and use it in GitHub Desktop.
Save tpowell/9db487e680f3e18b4aa9 to your computer and use it in GitHub Desktop.
Download ZIP
DOM Fun
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vanilla JS DOM Fun</title>
<style>
#p1 {background-color: orange}
.done {font-style: italic;}
</style>
</head>
<body>
<h1>Vanilla JS DOM Fun</h1>
<p id="p1">A paragraph that is <em>just</em> an example!</p>
<form>
<fieldset>
<legend>Tree Traversal</legend>
<input type="button" value="First Child" id="firstChildBtn">
<input type="button" value="Last Child" id="lastChildBtn">
<input type="button" value="Parent" id="parentNodeBtn">
<input type="button" value="Next Sibling" id="nextSiblingBtn">
<input type="button" value="Previous Sibling" id="previousSiblingBtn">
<hr>
<label>Node Name</label>
<input type="text" id="nodeNameField" name="nodeNameField"><br>
<label>Node Type</label>
<input type="text" id="nodeTypeField"><br>
<label>Node Value</label>
<input type="text" id="nodeValueField"><br>
</fieldset>
<fieldset>
<legend>Element Manipulation</legend>
<select id="typeOfTag">
<option>h1</option>
<option>p</option>
<option>b</option>
<option>u</option>
<option>i</option>
</select>
<input type="text" placeholder="Enter content to add" id="elementText">
<input type="button" value="Create" id="createBtn">
<br>
<input type="button" value="Delete" id="deleteBtn">
<br>
<input type="button" value="Clone" id="cloneBtn">
<!-- add thing to modify pull down -->
<input type="button" value="Modify" id="modifyBtn">
</fieldset>
</form>
<script>
var JS1 = { }; // global wrapper object for 'namespace'
/*
* show - Display the standard DOM element properties in text fields.
*
* Returns: nothing
* Calls: nothing
*/
JS1.show = function (el) {
document.getElementById("nodeNameField").value = el.nodeName;
document.getElementById("nodeTypeField").value = el.nodeType;
if (el.nodeValue == null)
{
document.getElementById("nodeValueField").value = "null";
}
else {
document.getElementById("nodeValueField").value = el.nodeValue;
}
} /* JS1.show */
/*
* moveElement - moves the current element to a new element
* based upon some tree direction or errors
* if not possible to move.
*
* Returns - current element pointer
* Calls - JS1.show (to display current position)
*/
JS1.moveElement = function (currentElement,direction) {
var errorMessages = [];
errorMessages['firstChild'] = 'No first child';
errorMessages['lastChild'] = 'No last child';
errorMessages['parentNode'] = 'No parent';
errorMessages['previousSibling'] = 'No previous sibling';
errorMessages['nextSibling'] = 'No next sibling';
errorMessages['unspecified'] = 'Illegal direction';
if (currentElement[direction]) {
currentElement = currentElement[direction]
JS1.show(currentElement);
return currentElement
} else {
if (errorMessages[direction]) {
alert(errorMessages[direction])
} else {
alert(errorMessages['unspecified']);
}
// no movement retain current position
return currentElement;
}
} /* JS1.moveElement */
/*
* createElement - makes a tag you defined and the text.
*
* Returns - nothing
* Calls - nothing
*/
JS1.createElement = function () {
var el,tagToMake,txtToUse;
el = document.getElementById("typeOfTag");
tagToMake = el.options[el.selectedIndex].text;
txtToMake = document.getElementById("elementText").value;
el = document.createElement(tagToMake);
txtToUse = document.createTextNode(txtToMake);
el.appendChild(txtToUse);
document.body.appendChild(el);
}; /* JS1.createElement */
/*
* cloneElement - copies the p tag and clones it deep
*
* Note: careful with the copy of unique items like id
*/
JS1.cloneElement = function () {
var el,theClone;
el = document.getElementById("p1");
theClone = el.cloneNode(true);
document.body.appendChild(theClone);
}; /* JS1.cloneElement */
/*
* deleteElement - removes the last element in body
*
* Note: press button many times to see fun!
*/
JS1.deleteElement = function () {
document.body.removeChild(document.body.lastChild);
}; /* JS1.deleteElement */
/*
* modifyElement - modifies the p tag named p1 in various ways
*
* Calls - none
* Returns - none
*/
JS1.modifyElement = function () {
var el;
el = document.getElementById("p1");
// change an attribute - traditional style
el.setAttribute("align","right");
// change attribute take 2
el.setAttribute("foo","bar");
// change attribute DOM1 way
// if HTML attribute then JS object property is roughly same
// <p title=> p.title
// except two things
// 1. camelCase
// HTML - tabindex JS - tabIndex
// 2. reserved words
// HTML <p class=""> JS - className
el.title = "Oh yeah I changed you!";
el.className = "done"; // el.class = "done" --> BOOM!
// alternative method el.setAttribute('class','done');
// DOM2 mapping for CSS
// CSS name font-size becomes remove - and up case fontSize
// only other time to worry is again reserved words
// ex: float: right CSSFloat
el.style.fontSize = "32px";
el.style.border = "4px solid purple";
el.style.borderRadius = "4px";
}; /* JS1.modifyElement */
/*
* Main - Bind events once document is ready
*/
document.addEventListener('DOMContentLoaded', function () {
// Bind all the traversal buttons
document.getElementById("firstChildBtn").addEventListener("click", function () {
JS1.currentElement = JS1.moveElement(JS1.currentElement,'firstChild');
}, false);
document.getElementById("parentNodeBtn").addEventListener("click", function () {
JS1.currentElement = JS1.moveElement(JS1.currentElement,'parentNode');
}, false);
document.getElementById("lastChildBtn").addEventListener("click",function () {
JS1.currentElement = JS1.moveElement(JS1.currentElement,'lastChild');
}, false);
document.getElementById("nextSiblingBtn").addEventListener("click", function () {
JS1.currentElement = JS1.moveElement(JS1.currentElement,'nextSibling');
}, false);
document.getElementById("previousSiblingBtn").addEventListener("click", function () {
JS1.currentElement = JS1.moveElement(JS1.currentElement,'previousSibling');
}, false);
document.getElementById("createBtn").addEventListener("click", function () {
JS1.createElement();
});
document.getElementById("cloneBtn").addEventListener("click", function () {
JS1.cloneElement();
});
document.getElementById("deleteBtn").addEventListener("click", function () {
JS1.deleteElement();
});
document.getElementById("modifyBtn").addEventListener("click", function () {
JS1.modifyElement();
});
// start traversal at known point and set currentElement value
JS1.currentElement = document.getElementById("p1");
JS1.show(JS1.currentElement);
}, false);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment