Browser Object Model: The document object

Properties, methods and events

`activeElement`
`adoptedStyleSheets`
`adoptNode()`
`afterscriptexecute`	Event Non-standard
`alinkColor`	Deprecated
`all`	Deprecated
`anchors`	Deprecated
`append()`
`applets`	Deprecated
`beforescriptexecute`	Event Non-standard
`bgColor`, `fgColor`	Deprecated
`body`	Compare with `document.documentElement`
`caretPositionFromPoint()`
`caretRangeFromPoint()`	Non-standard
`characterSet`
`childElementCount`
`children`
`clear()`	Deprecated
`close()`
`compatMode`	Returns the browser's rendering mode.
`contentType`
`cookie`	Read and write cookies associated with the document. See also the `Set-Cookie` response and `Cookie` request HTTP headers and the (preferred) Cookie Store Web API.
`copy`	Event
`createAttribute()`
`createAttributeNS()`
`createCDATASection()`
`createComment()`
`createDocumentFragment()`
`createElement()`	Compare with `createTextNode()`
`createElementNS()`
`createEvent()`
`createExpression()`
`createNodeIterator()`
`createNSResolver()`
`createProcessingInstruction()`
`createRange()`
`createTextNode()`	Compare with `createElement()`
`createTouch()`	Non-standard, Deprecated
`createTouchList()`	Non-standard, Deprecated
`createTreeWalker()`
`currentScript`	Returns the currently running `<script>` tag and is not a JavaScript module. Compare with `scripts`.
`cut`, `paste`	Event
`defaultView`	In browsers, `defaultView` returns a `window` object.
`designMode`
`dir`
`doctype`
`documentElement`	Usually the `HTMLHtmlElement` that represents the document's `<html>` element. Compare with `document.body`
`documentURI`	Compare with `window.location`
`domain`	Deprecated
`DOMContentLoaded`	Event, compare with `window.onload`.
`elementFromPoint()`
`elementsFromPoint()`
`embeds`
`enableStyleSheetsForSet()`	Non-standard, Deprecated
`evaluate()`
`Events`
`execCommand()`	Deprecated. See also the Clipboard Web API.
`exitFullscreen()`
`exitPictureInPicture()`
`exitPointerLock()`
`featurePolicy`	Experimental
`firstElementChild`
`fonts`
`forms`
`fullscreen`	Deprecated
`fullscreenchange`	Event
`fullscreenElement`
`fullscreenEnabled`
`fullscreenerror`	Event
`getAnimations()`
`getElementById()`	Returns the `Element` whose `id` attribute is equal to the value passed as parameter. See also this example.
`getElementsByClassName()`
`getElementsByName()`	Returns an array (a `NodeList`) of HTML elements whose `name` attribute has the specified value. See also this example.
`getElementsByTagName()`	Returns an array (a `HTMLCollection`) of HTML elements whose name is specified in the argument. See also this example.
`getElementsByTagNameNS()`
`getSelection()`
`hasFocus()`
`hasStorageAccess()`
`head`
`hidden`
`images`
`implementation`
`importNode()`
`Instance` methods
`lastElementChild`
`lastModified`
`lastStyleSheetSet`	Non-standard, Deprecated
`linkColor`	Deprecated
`links`	An `HTMLCollection` of all `<area>` and `<a>` elements with a value for the `href` attribute.
`location`
`lostpointercapture`	Event
`mozSetImageElement()`	Non-standard
`mozSyntheticDocument`	Non-standard
`msCapsLockWarningOff`	Non-standard
`mssitemodejumplistitemremoved`	Event Non-standard
`msthumbnailclick`	Event Non-standard
`open()`
`origin`	Non-standard, Deprecated
`pictureInPictureElement`
`pictureInPictureEnabled`
`plugins`
`pointerlockchange`	Event
`pointerLockElement`
`pointerlockerror`	Event
`preferredStyleSheetSet`	Non-standard, Deprecated
`prepend()`
`queryCommandEnabled()`	Non-standard, Deprecated
`queryCommandState()`	Non-standard, Deprecated
`queryCommandSupported()`	Non-standard, Deprecated
`querySelector()` / `querySelectorAll()`	Selects the first/all elements that match a given CSS selector. Compare with development/web/DOM/interfaces-mixins/Element].querySelector and Element.querySelectorAll`.
`readyState`
`readystatechange`	Event
`referrer`
`registerElement()`	Non-standard, Deprecated
`releaseCapture()`	Non-standard
`replaceChildren()`
`requestStorageAccess()`
`rootElement`	Deprecated
`scripts`	The list of the document's `<script>` elements. Compare with `currentScript`.
`scroll`	Event
`scrollingElement`
`selectedStyleSheetSet`	Non-standard, Deprecated
`selectionchange`	Event
`styleSheets`	A list (`StyleSheetList`) of `CSSStyleSheet` objects. See also this example
`styleSheetSets`	Non-standard, Deprecated
`timeline`
`title`
`URL`
`visibilitychange`	Event
`visibilityState`
`vlinkColor`	Deprecated
`write()`
`writeln()`
`xmlEncoding`	Deprecated
`xmlVersion`	Deprecated

document.addEventListener

<html>
<head>
  <meta charset="utf8">

<title>document.addEventListener</title>

<script type="text/JavaScript">
<!--


var out;


function p(txt) {

   out.innerHTML += txt + '<br>';
}

function main() {

  out = document.getElementById('out');


  document.addEventListener('keydown',
      function(ev) {

        p('keydown, ev.keyCode = ' + ev.keyCode);
       
        if ( ev.keyCode ===  9 || // Tab
             ev.keyCode === 32 || // Space
             ev.keyCode === 33 || // Pg Up
             ev.keyCode === 34 || // Pg Down
             ev.keyCode === 37 || // Left
             ev.keyCode === 38 || // Up
             ev.keyCode === 39 || // Right
             ev.keyCode === 40    // Down
           )
          {
             ev.preventDefault();
           }
     }, false);

  document.addEventListener('keyup',
      function(ev) {

        p('keyup, ev.keyCode = ' + ev.keyCode);
       
        if ( ev.keyCode ===  9 || // Tab
             ev.keyCode === 32 || // Space
             ev.keyCode === 33 || // Pg Up
             ev.keyCode === 34 || // Pg Down
             ev.keyCode === 37 || // Left
             ev.keyCode === 38 || // Up
             ev.keyCode === 39 || // Right
             ev.keyCode === 40    // Down
           ) 
          {
             ev.preventDefault();
           }
     }, false);

}

//-->

</script>
</head>
<body onload='main()'>

  <div id='out'>
  </div>


</body>
</html>

Github repository Browser-Object-Model, path: /document/addEventListener.html

document.querySelectorAll

<html>
<head>
<meta charset="utf8">

<style type='text/css'> 

  div {

     margin-bottom: 10px;
     margin-left:   20px;
     border: black solid 1px;
     padding: 3px;
     width: 300px;

  }


</style>
   

<title>document.querySelectorAll</title>

<script type="text/JavaScript">

function main() {

  var matched_bar = document.querySelectorAll('[id^="bar-"]');
  for (i in matched_bar) {
    matched_bar[i].innerHTML += " (id='baz...')";
  }

  var matched_two = document.querySelectorAll('[id$="-two"]');
  for (i in matched_two) {
    matched_two[i].innerHTML += " (id='...-two')";
  }

}


</script>
</head>
<body onload='main()'>

  <div id='foo-one'  >foo-one  </div>
  <div id='foo-two'  >foo-two  </div>
  <div id='bar-one'  >bar-one  </div>
  <div id='baz-one'  >baz-one  </div>
  <div id='baz-two'  >baz-two  </div>
  <div id='bar-two'  >bar-two  </div>
  <div id='foo-three'>foo-three</div>
  <div id='baz-three'>baz-three</div>
  <div id='bar-three'>bar-three</div>


</body>
</html>

Github repository Browser-Object-Model, path: /document/querySelectorAll.html

Browser Object Model: The document object

Properties, methods and events

document.addEventListener

document.querySelectorAll

See also