DOM

DOM

1. Document structure

   • global variable document -> access to these objects
   • documentElement property refer obj representing the <html> tag
   • properties head and body

2. Tree

   • struture of browser's document -> tree
   • document.documentElement is root

3. Moving through the tree

   • not array -> not use array method
   • DOM nodes contain wealth of links to other nearby nodes
   • relationship
     • firstChild - lastChild
     • previousSibling - nextSibling
   • deal with nest data structure
     • use recursive (de quy) functions
     • nodeValue return value of this node
     • function talkAbout(node, string){ if(node.nodeType == document.ELEMENT_NODE){ for(var i = 0; i < node.childNodes.length; i++){ if(talkAbout(node.childNodes[i], string)) return true; } return false; } else if(node.nodeType == document.TEXT_NODE){ return node.nodeValue.indexOf(string) > -1; } } console.log(talkAbout(document.body, "book"));

4. Find Element

   • Get first link in document: var link = document.body.getElementsByTagName("a")[0]; console.log(link.href);
   • All element nodes by tag name a
     • getElementsByTagName
     • return array-link obj
   • find specific single node
     • give it 'id'
     • use document.getElementById
     • getElementsByClassName

5. Change document

   • remove chile node from document
     • removeChild
     • function delete1Node(list){ var list = document.getElementById("myList"); list.removeChild(list.childNodes[0]); }
   • <ul id="myList"> <li>Tea</li> <li>Coffee</li> <li>Milk</li> </ul> <button onClick= "delete1Node(myList)"> Click </button>
   • Add html element
     • appendChild()
     • function delete1Node(list){ var list = document.getElementById("myList"); list.removeChild(list.childNodes[0]); } function addDrink(){ var list = document.getElementById("myList"); var node = document.createElement("li"); var textNode = document.createTextNode("Coca"); node.appendChild(textNode); document.getElementById("myList").appendChild(node); }
   • insert before node
     • insertBefore(givenElement, elementBefore): giveElement se duoc insert vao vi tri truoc elementBefore
     • function insertNode(){ var name = document.getElementById("myList"); var textNode = document.createTextNode("Soda"); var node = document.createElement("li"); node.appendChild(textNode); name.insertBefore(node, name.childNodes[0]); }
   • replace child node
     • replaceChild(newNode, nodeToBeReplace)
     • function myFunction() { var textnode = document.createTextNode("Water"); var item = document.getElementById("myList").childNodes[0]; item.replaceChild(textnode, item.childNodes[0]); }
   • Create node
     • create text node: createTextNode("text")
     • create element: createElement("tagname")

6. Attribute

   • set any attribute
     • setAttribute & getAttribute
     • prefixing names attribute with data-
   • get all test in node
     • textContent
     • var para = document.createElement('p'); para.textContent = "T la paragraph";

7. Layout

   • browser compute a layout, each element a size & position based on its type & content
   • Layout used to draw document
   • offsetWidth & offsetHeight give space the element by pixels
   • clientWidth & clientHeight: size of space inside the element
   • find the precise position of an element
     • getBoundingClientRect
     • return obj with top, left, right properties
   • want relative to whole document -> add current scroll position, found under global pageXOffset & pageYOffset

8. Change CSS

   • manipulate (thđ = tay) through node's style property
   • call css property name in JS
     • font-family -> style.fontFamily
     • var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "pink";
   • query selector
     • querySelectorAll
       • defined both document obj and on element nodes
       • return array obj contain all element that match
     • querySelector
       • select specific, single element
       • return first match or null if no elements match
   • position & animating
     • requestAnimationFrame(function)
       • schedule animate function to run when never the browser is ready to repaint the screeen
     • var cat = document.querySelector("img"); var angle = 0; lastTime = null; function animate(time){ if(lastTime != null) angle += (time - lastTime) * 0.001; lastTime = time; cat.style.top = (Math.sin(angle)*50) + "px"; cat.style.left = (Math.cos(angle)*200) + "px"; requestAnimationFrame(animate); } requestAnimationFrame(animate);