Please enable JavaScript.

Coggle requires JavaScript to display documents.

24.3: Manipulating the DOM - Coggle Diagram

- - - - > heading.innerText
        
        outputs
        
        > 'WEAR/IT/WELL'
      - can change
        
        > heading.innerText = 'LOLOLOL'
    - - different from innerText #
        
        returns all elements
        
        such as script and style elements
        
        even if they're not visible
    - - > heading.innerText = '<i>LOLOLOL</i>'
      - you will see
        
        '<i>LOLOLOL</i>'
        
        in the browser
        
        :warning: HTML tags won't be interpreted correctly
  - - - > heading.innerHTML = '<i>LOLOLOL</i>'
      - you will see
        
        LOLOLOL
        
        in the browser
        
        HTML tags will be interpreted correctly
- - - - resets the image
      - by resetting the src attribute
    - - has the same effect
  - - - outputs
        
        > 'http://127.0.0.1:8080/images/lolli_icon.png'
    - - outputs
        
        > './images/lolli_icon.png'
- - - - outputs
        
        but all the properties are empty :!?:
        
        > heading.style.fontWeight === ''
        
        outputs
        
        > true
        
        even though we specify it
        
        in the stylesheet
        
        #headingGroup h1 { font-weight: 100; font-size: 4rem; }
        
        WHY:question:
        
        it only contains inline styles
        
        a long list of properties #
        
        corresponding to css properties #
        
        :warning: but with different names
        
        camelCase
        
        :red_cross: NOT dashes
        
        font-weight
        
        becomes
        
        fontWeight
        
        in style property
        
        in css
        
        > CSSStyleDeclaration {accentColor: '', additiveSymbols: '', alignContent: '', alignItems: '', alignSelf: '', …}
    - - inherits
        
        a style property #
    - - > heading.style.fontWeight = '200'
        
        now outputs
        
        > <h1 class="display-2" style="font-weight: 200;"> WEAR<span>/</span>IT<span>/</span>WELL</h1>
        
        the style is set inline
        
        not really recommended :no_entry:
        
        :warning: the value should always be a string
        
        :red_cross: not a number
      - > heading
        
        outputs
        
        > <h1 class="display-2""> WEAR<span>/</span>IT<span>/</span>WELL</h1>
      - so you can change styles with JavaScript
        
        but inline styles are not best practice :forbidden:
        
        but a better way
        
        is to use a class #
  - - - .purple { color: purple; }
    - - inherits
        
        a classList property
    - - outputs
        
        > DOMTokenList ['display-2', value: 'display-2']
    - - > heading.classList.add('purple')
        
        adds the class to the list
        
        > DOMTokenList(2) ['display-2', 'purple', value: 'display-2 purple']
        
        the heading is now purple
      - to remove it
        
        use the remove method
      - to toggle it
        
        > heading.classList.toggle('purple')
        
        the heading toggles between purple and not purple
  - - - a HTMLHeadingElement object