This is the fifth day of my participation in Gwen Challenge

The above system to learn DOM (A) mainly learn some DOM tree node basic types and common methods, today continue to learn DOM API.

Selector API

Using CSS selectors to select DOM elements, there are two:

  • QuerySelector: Returns the first DOM element that matches the CSS selector
  • QuerySelectorAll: Returns all DOM elements matching CSS selectors

Note: In addition to being called on document, these two methods can also be called on element to match selectors in the range of descendants of that element, for example:

const element = document.getElementById('xxx')
const item = element.querySelector('.item')
Copy the code

Element traversal method

The Element Traversal specification defines a set of attributes on a DOM Element for Element Traversal:

  • ChildElementCount: Returns the number of child elements (excluding text nodes and comments)
  • FirstElementChild: the firstChild, firstChild
  • LastElementChild: the lastChild, lastChild
  • PreviousElementsibling: the previousSibling, that is, previousSibling
  • NextElementSibling: the nextSibling, that is, nextSibling

Third, HTML5 expansion

There are a number of JavaScript apis defined in HTML5, of which the main ones related to DOM are:

1. The type of operation

  • GetElementByClassName: Selects elements by class
  • ClassList: used to manipulate element class names. The main methods are as follows:
    • Add: Adds the class name
    • Contains: checks whether the class name exists
    • Remove: Deletes the class name
    • Toggle: Remove the class name if it exists, and add it if it doesn’t

2. Focus management

  • Document.activeelement: Returns the element currently in focus
  • Document.hasfocus: Whether the document is in focus
  • Focus: The element gets focus

3. The HTMLDocument changes

  • Document. readyState: Whether the document is finished loading, return to ‘loading’ or ‘complete’

4. Character set properties

  • Document. charset: Returns the actual character set used in the document (e.g. ‘UTF-8’)
  • Document. defaultCharset: Returns the document default character set (based on default browser and operating system Settings)

5. Customize attributes

Property of the form ‘data-xxx’, where XXX can be named arbitrarily.

  • Dataset: Gets or sets a custom property value (for example<input data-xxx="aaa">Input. Dataset. XXX === ‘aaa’)

6. Insert tags

  • InnerHTML: Gets or sets the element subtree
  • OuterHTML: Is similar to innerHTML, but contains the element
  • InnerText: Read to get the word Text value, write to replace the subtree with a Text node (automatic escape)
  • OuterText: and innerText, but will contain the element

7. The scroll

  • ScrollIntoView: called on the element to scroll it into the viewport
  • ScrollIntoViewIfNeeded: scrollIntoViewIfNeeded only if the element is not visible, do nothing when it is visible

This article continues to introduce the COMMON API of DOM operation, front-end development can not avoid dealing with DOM, good command of these helps us to use flexibly and quickly develop business requirements.