JS DOM APIs.md

Eloquent Javascript by Marijn Haverbeke

• Tree structure with document.documentElement serving as root.

  • Element nodes representing HTML tags e.g. document.body

  • Leaf nodes such as pieces of text or comment nodes.

  • Each node has nodeType property - Node.ELEMENT_NODE, Node.TEXT_NODE, Node.COMMENT_NODE

  • Element node has childNodes also firstChild, lastChild, previousSibling, nextSibling, parentNode

  • Finding elements

    1. getElementsByTagName
    2. getElementById
    3. getElementsByClassName

  • Changing document

    1. appendChild
    2. insertBefore
    3. replaceChild

  • Creating nodes

    1. createTextNode
    2. createElement

  • Attributes

    1. getAttribute, setAttribute
    2. most common attributes can be accessed through property of same name on the element's DOM object e.g. href, className(since class is a keyword in JS)

  • Layout

    1. block elements span whole width of document e.g. <p> or <h1>
    2. inline elements are rendered on the same line with surrounding text e.g. <a> or <strong>
    3. offsetWidth, offsetHeight - space element takes up in pixels.
    4. clientWidth, clientHeight - space inside the element ignoring border width
    5. getBoundingClientRect - returns object with top, bottom, left, right indicating pixel positions of the sides of the elemtn relative to the top left of the screen.
    6. pageXOffset, pageYOffset - current scroll position

  • Styling

    1. Using the style property (<p id="para" style="color: purple">Nice</p>) - node.style.color = "magenta"

       • style ="display: block" - display as block, style="display: none" - prevents an element from showing up on screen.
       • for property names with hyphens e.g. font-family, in JS it is style.fontFamily

    2. Cascading Style Sheets

       • set of rules for how to style elements in a document. Cascading refers to the fact that multiple rules are combined to produce the final style for an element.
       • it can be given inside <style> tag.
       • <style> strong { font-style: italic; color: gray; } </style>
       • .abc - applies to all elements with "abc" in their class attribute
       • #xyz - applies to the element with an id attribute of "xyz"
       • p#main.a.b - p elements with id main and with classes a and b
       • more specific rule takes precedence - p.a > p or a
       • p > a - applies to all a tags that are direct children of p tags
       • p a - applies to all a tags inside p tags, whether they are direct or indirect children.

  • Query Selectors

    • selector syntax - used in style sheets can be used also to find DOM elements.
    • querySelectorAll - takes a selector string and returns a NodeList containing all the matching elements.
    • querySelector - return first matching element
    • p .animal - Animal inside of <p>
    • p > .animal - direct child of <p>

  • Positioning

    1. position - can be one of static, relative, absolute.
    2. requestAnimationFrame - request browser for animation update by passing an animate function