document.md

The Document Object

See also:

• The Document Object Model (DOM)
• The Window Object

The document is a property of the browser window object:

window.document

The document object and some properties:

document

document.head
document.body

document.title
document.URL
document.cookie

Traversing the document tree hierarchy (we need to know about JavaScript arrays):

document.childNodes
document.children
document.children[0].children
document.children[0].children[0]
document.children[0].children[1]

Selections

Selecting elements:

• document.getElementById()
• document.getElementsByClassName()
• document.getElementsByTagName()
• document.querySelector()
• document.querySelectorAll()

<div id="my-container">
  <p id="my-message">some placeholder content</p>
</div>

<script type="text/javascript">

  // select elements from the DOM by specifying their unique identifiers:
  var myDiv = document.getElementById("my-container")
  var myParagraph = document.getElementById("my-message")

  // manipulate properties of an element:
  myParagraph.innerHTML = "Fun times!"
  myParagraph.style.color = "red"

  // can even create new elements:
  var myHeading = document.createElement("h3")
  myHeading.innerHTML = "This is a heading"
  myDiv.appendChild(myHeading)

</script>

Event-listening

References:

• https://developer.mozilla.org/en-US/docs/Web/API/EventListener
• https://www.w3schools.com/jsref/met_document_addeventlistener.asp

<button id="my-awesome-btn">
  Click Me
</button>

<script type="text/javascript">
  
  var clickCount = 0

  // access the button element from the DOM by specifying its unique identifier
  var myBtn = document.getElementById("my-awesome-btn")

  // define a click event handler function
  function myBtnClick() {
    clickCount = clickCount + 1
    console.log("YOU CLICKED ME", clickCount, "TIMES! :-)")
  }

  // register the handler function to the button's click event
  myBtn.addEventListener("click", myBtnClick, false)
  
</script>