This is the 18th day of my participation in the August More Text Challenge.

Web API

DOM Document Object Model

The W3C defines a set of DOM interfaces through which you can change the content, structure, and style of a web page

The DOM tree

● Document: A page is a document, and DOM is represented by document

● Element: All tags in a page are elements, which are represented in the DOM as elements

● Nodes: All content in a web page is nodes (tags, attributes, text, comments, etc.) and DOM is represented by Node

The DOM gets the page element

Obtain by ID

var element = document.getElementById(‘id’);

● Element is an Element object

● ID is a case-sensitive string

● The return value is an Element object in the DOM, or null if not found under Document

When the console. Dir (); Print objects to better view their properties and methods

Obtained by label name

Low var variable = document. GetElementsByTagName (‘ tag name ‘); The ability to get all the target tags on the page

● Returns a collection of element objects, stored in the form of a pseudo-array; If the page does not have the element, an empty pseudo-array is returned, with subscripts

● You can also specify the tag name based on all the children within an element (parent element)

Low element. GetElementsByTagName (tag)

● Note: The parent element must be a single element (the element object must be specified, and the parent element must be retrieved first), and not the parent element itself

<ol id ="ol"></ol>
Copy the code

Obtain it by using the method added in H5

Low document. GetElementsByClassName (‘ the name of the class ‘) according to the name of the class to return to the object element collection, use the time to bring the subscript

● Document. querySelector(‘ selector ‘), which returns the first element object of the specified selector. Attention! Here the selector must be signed! Class selectors with dots, ID selectors with hash signs

low

Low document. QuerySelectorAll (‘ selector ‘), returns the selector specified all the elements, the return value is the NodeList object, NodeList object represents a collection of nodes. It can be accessed by index, with subscripts starting at 0.

Special element fetch

Get the body and HTML elements

● Document. body // Returns the body element object

● Document.documentElement // Returns an HTML element object