Why get page elements?

For example, if we want to manipulate a part of the page (show/hide, animation), we need to get the element corresponding to that part before we manipulate it.

1. Obtain the value by ID

Use the getElementById() method to get an element object with an ID.

  • Grammar: document getElementById (id)
  • Gets the element object by ID
  • Parameter: ID value, case sensitive string
  • Return value: Element object or NULL

Case code

<body> <div id="time">2019-9-9</div> <script> So we have to have the tag first so we write script underneath the tag var timer = document.getelementById ('time'); console.log(timer); console.log(typeof timer); // console.dir prints the element object we return for a better view of the properties and methods inside console.dir(timer); </script> </body>Copy the code

Using console.dir(), we can print the element object we fetch to better view the properties and methods in the object.

  • Note 1: The JS code comes after the tag
  • Note 2: The argument is a case-sensitive string
  • Note 3: Return 1 element object

2. Obtain the element based on the label name

  • Grammar:
    • Document. GetElementsByTagName (‘ tag name) “using the getElementsByTagName () method returns a collection of objects with the specified tag name.”
    • Or element. GetElementsByTagName (‘ tag name) “you can also get some element (parent) inside all of the specified tag name child element.”
  • Gets an element object based on the label name
  • Parameter: Label name
  • Return value: collection of element objects (pseudo-array, array elements are element objects)

Case code

22</li> <li> know/know/know/know/know/know/know/know/know/know/know/know/know/know/know/know/know/know/know/know/know/know/know/know/know/know/know/know/know/know/know/know/know/know/know/know/know/know/know/know/know/know/know / Should be waiting for you for a long time of 55 < / li > < / ul > < ul id = "nav" > < li > rarely used word < / li > < li > rarely used word < / li > < li > rarely used word < / li > < li > rarely used word < / li > < li > rarely used word < / li > < / ul > < script > / / 1. Returns the access element object collection Stored in the form of pseudo array of var lis = document. The getElementsByTagName (" li "); console.log(lis); console.log(lis[0]); Var I = 0; for (var I = 0; i < lis.length; i++) { console.log(lis[i]); } / / 3. Element. GetElementsByTagName () can get certain tags within this element var nav = document. The getElementById (" nav "); Var navLis = nav.getelementsBytagName ('li'); var navLis = nav.getelementsBytagName ('li'); console.log(navLis); </script> </body>Copy the code

Note:

  • 1. Because we get a collection of objects, we need to iterate if we want to manipulate the elements inside.
  • 2. Get the element object is dynamic
  • 3. Return an empty pseudo-array if no element is retrieved (because no object is retrieved)

Note that getElementsByTagName() is retrieved as a dynamic collection, that is, when the page adds tags, elements are added to the collection.

Note: the parent element must be a single object (which element object must be specified). The parent element itself is not included when fetching.

3. H5 added the method of obtaining elements

  1. Document. The getElementsByClassName (” the name of the class “); // Returns a collection of element objects based on the class name

  2. Document. querySelector(‘ selector ‘); // Returns the first element object according to the specified selector

  3. Document. QuerySelectorAll (‘ selector ‘); // Returns based on the specified selector

Note:

The selectors in querySelector and querySelectorAll need symbols, such as document.querySelector(‘#nav’);

Case code

The < body > < div class = "box" > the box 1 < / div > < div class = "box" > box 2 < / div > < div id = "nav" > < ul > < li > home page < / li > < li > products < / li > < / ul > < / div > < script > / / 1. GetElementsByClassName according to the name of the class get some elements set var boxs = document. The getElementsByClassName (' box '); console.log(boxs); Box #nav var firstBox = document.querySelector('.box'); console.log(firstBox); var nav = document.querySelector('#nav'); console.log(nav); var li = document.querySelector('li'); console.log(li); / / 3. QuerySelectorAll () returns all objects in the specified selectors var allBox = document. QuerySelectorAll (' box '); console.log(allBox); var lis = document.querySelectorAll('li'); console.log(lis); </script> </body>Copy the code

4. Get special elements (body, HTML)

4.1. Get the Body element

Doucumnet. body // Returns the body element object

4.2. Get HTML elements

Document.documentelement // Returns an HTML element object