Scribd Logo
Upload

Welcome to Scribd!

  • Summary Node Query Method

    Uploaded by

    Yaqub Ansari
    6 views2 pages
    The document describes various methods for querying DOM elements in JavaScript, including document.querySelector(), document.getElementById(), document.querySelectorAll(), document.getElementsByClassName(), and document.getElementsByTagName(). It also notes the document.body, document.head, and document.documentElement properties for selecting parts of the document. Each method takes different parameters like CSS selectors or element types and returns a single element, NodeList, or HTMLCollection of matching elements.

    Original Description:

    Original Title

    Summary Node query method

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document describes various methods for querying DOM elements in JavaScript, including document.querySelector(), document.getElementById(), document.querySelectorAll(), document.getElementsByClassName(), and document.getElementsByTagName(). It also notes the document.body, document.head, and document.documentElement properties for selecting parts of the document. Each method takes different parameters like CSS selectors or element types and returns a single element, NodeList, or HTMLCollection of matching elements.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    6 views2 pages

    Summary Node Query Method

    Uploaded by

    Yaqub Ansari
    The document describes various methods for querying DOM elements in JavaScript, including document.querySelector(), document.getElementById(), document.querySelectorAll(), document.getElementsByClassName(), and document.getElementsByTagName(). It also notes the document.body, document.head, and document.documentElement properties for selecting parts of the document. Each method takes different parameters like CSS selectors or element types and returns a single element, NodeList, or HTMLCollection of matching elements.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 2

    Summary: Node Query Methods

    Here's a summary of the various methods you got to reach out to DOM elements (note: you can
    only query for element nodes).

    Besides the below query methods, you also got these special properties on the document object
    to select parts of the document:

    document.body => Selects the <body> element node.

    document.head => Selects the <head> element node.

    document.documentElement => Selects the <html> element node

    ---

    QUERY METHODS

    ---

    1. document.querySelector(<CSS selector>);

    Takes any CSS selector (e.g. '#some-id' , '.some-class' or 'div p.some-class' )


    and returns the first (!) matching element in the DOM. Returns null if no matching element
    could be found.

    More information: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

    1. document.getElementById(<ID>);

    Takes an ID (without # , just the id name) and returns the element that has this id. Since the same
    ID shouldn't occur more than once on your page, it'll always return exactly that one element.
    Returns null if no element with the specified ID could be found.

    More information: https://developer.mozilla.org/en-US/docs/Web/API/Document/


    getElementById

    1. document.querySelectorAll(<CSS selector>);

    Takes any CSS selector (e.g. '#some-id' , '.some-class' or 'div p.some-class' )


    and returns all matching elements in the DOM as a static (non-live) NodeList . Returns and
    empty NodeList if no matching element could be found.

    More information: https://developer.mozilla.org/en-US/docs/Web/API/Document/


    querySelectorAll
    1. document.getElementsByClassName(<CSS CLASS>);

    Takes a CSS class g (e.g. 'some-class' ) and returns a live HTMLCollection of matched
    elements in your DOM. Returns an empty HTMLCollection if not matching elements were
    found.

    More information: https://developer.mozilla.org/en-US/docs/Web/API/Document/


    getElementsByClassName

    1. document.getElementsByTagName(<HTML TAG>);

    Takes an HTML tag (e.g. 'p' ) and returns a live HTMLCollection of matched elements in
    your DOM. Returns an empty HTMLCollection if not matching elements were found.

    More information: https://developer.mozilla.org/en-US/docs/Web/API/Element/


    getElementsByTagName

    There also is the getElementsByName() method which really isn't used


    commonly (https://developer.mozilla.org/en-US/docs/Web/API/Document/
    getElementsByName).

    You might also like