DOM
Full Reference Book
Future research, questions
Query dom parent, sibling, children
Notes
console.dir(document); // Will show all elements of the DOM
console.dir(document.domain); // return the domain
console.dir(document.all); // return all existing DOM, indexed
Each HTML element is unique and each has it's own unique JavaScript constructor
Example : HTMLAnchorElement, HTMLParamElement, HTMLTableRowElement, HTMLTableCellElement, HTMLLIElement
write/generate html to page, innerHTML, createElement, createTextNode, appendChild, setAttribute id
Show Hide and html element & passing variables from button to javascript
dynamic id to dynamic elements, table with div with styles
dynamic sound button and source
dynamic hide show table, table column (TR), checkbox
hide/show based on Radio button
Dynamically get text based on click and url
example shows addEventListner (submit, click, keyup) createElement, functions, remove/add item
Dom Basics
get an item by item id and assign it to a var
var itemid = document.getElementById("foreachmulti");
get elements by name, example form input field name is lastname
document.getElementsByName("last_name");
get an item(s) by class it's been assigned to and assign it to a var
var buttons = document.getElementsByClassName("Class_Name");
Change or get the text of an element, and all its descendants like the styles
document.getElementById("para").innerText = "new text";
Changes or get the text content of an element
document.getElementById("para").textContent= "new text";
change or get the text of an element, you can also add html
document.getElementById("myP").innerHTML = "<h3>Hello Dolly.</h3>";
If the item is set to an onclick event, but you don't know the id, you can select the parent's ID but using the fundtion "this". This will give you the parent ID which you can then use to ....
var parent = this.parentElement;
add eventlistners to and object, assign it onclick execute a function
var button document.getElementById("btn1");
button.addEventListner("click", function);
click, change, input, mouseover, mouseout, mousedown,
Get the form action
var theform = document.getElementById("form1a"); var action = theform.getAttribute("action");
Disable a submit button after its been submitted
var formbutton = document.getElementById("submitbutton"); formbutton.disable= true;
Custom or manual attributes
You can make up your our attributes to an element, example attribute data_page
<button id="load-more" data_page="0">Load more</button>
var load_more = document.getElementById('load-more');
var page = parseInt(load_more.getAttribute('data-page'));
example
Remove a dom element, in this case 1st option of select dropdown
var year_select = document.getElementById("year");
year_select.remove(year_select[0]);
Add class to an html object, Changing CSS
If parent object has css change child
Using the para variable above
para.style.display = "none";
Execute two functions onClick
button.onclick = function(){reshuffle(); HideAnswer(); return false;} ;
Query selector
returns the first element that matches a specified
CSS selector(s) in the document
The code below finds the first item with class .example.
document.querySelector(".example");
Finds the first input item on the page
document.querySelector('input');
Finds the first input item with type submit
document.querySelector('input[type="submit"]');
If you have a list and want to find the last item on the list, list style = "liststyle1"
document.querySelector('.liststyle1:last-child');
If you want to 2nd item on the list
document.querySelector('.liststyle1:nth-child(2)');
Query selector all
Does the same thing as Query Selector, except that it selects all item
The code below finds the all item with class .example.
document.querySelectorAll(".example");
Select odd or even items on the list and change their color
- Test1
- test2
- test3
- test4
- test6
- test36
Attributes
getAttribute(attributename)
setAttribute(attributename)
hasAttribute(attributename)
removeAttribute(attributename)
Classlist
classlist.add(class) add a class
classlist.remove(class) remove a class
classlist.toggle(class) turn class on/off
classlist.length(class) how many
classlist.contains class name
Creating new elements
Create a new html element, in this case a paragraph
var para = document.createElement("p");
set a element id
document.getElementById("element_name").id = "newelementid";
Append to a element, add the text to to the element para (element created above)
var node = document.createTextNode("This is from JS.");
para.appendChild(node);
You can also use the insertBefore() to insert elements, which is more precise
There is not a insertAfter() so you can use .nextSibling example
HERE
var br = document.createElement("br");
var foo = document.getElementById("fooBar");
foo.appendChild(br);
var img = document.createElement('img');
var imageURL = '../../images/people/' + word + '.jpg';
img.src = imageURL;
img.width = 100;
img.style.borderRight = "10px solid #000"
imageContainer.appendChild(img);
text conetent modifiers
innerText - just the text of a node
textContent - same as above but for Firefox browser
Because of the browser issues you will need to create a if statement
if (node.innerText) {
mytext=node.innerText;
} else {
mytext=node.textContent;
}
Cloning, removing, replacing a node
cloneNode() makes a copy
removeChild() remove a node, you must be careful with this one as this one
has to be called from the parent nodes
replaceChild() - replaces a node you must be careful with this one as this one
has to be called from the parent nodes
style object properties
full list @ https://www.w3schools.com/jsref/dom_obj_style.asp
var div = document.getElementById("div_left");
div.innerHTML = "text in the div";
div.style.height = '100px';
div.style.cssFloat = 'left';
div.style.backgroundColor='#2b2b2b';
Moving around the DOM
parentNode to go up a level
childNodes to do down a level
firstchild/lastchild - first /last element
previousSibbling/nextSibbling - elements with same parent
Transversing the Dom