This is the 10th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

What is DOM?

DOM, known as the Document Object Model.

In THE JS through the DOM to operate HTML documents, as long as you understand the DOM can do as you want to operate Web pages.

Node (Node)

Nodes are the basic components that make up our web pages, and each part is a node.

Node classification:

  • Document node: The entire HTML document
  • Element node: AN HTML node in an HTML document
  • Attribute node: attributes in an element
  • Text node: Text content in an HTML tag

The event

Events are the interactions between the user and the browser. Click a button, move the mouse, close the window, etc.

We can bind handler functions to button events so that when the event is fired, the corresponding function is called.

Documentation

When a browser loads a page, it loads it in a top-down order.

If the script tag is written at the top of the page and the code is executed before the page is loaded and the DOM object is loaded, the DOM object cannot be retrieved.

Onlaod event

The onLoad event will load after the entire page has loaded. We can bind an onLoad event to the window to ensure that all DOM objects are loaded by the time our code executes.

<script type="text/javascript">
window.onload = function(){}
</script>
Copy the code

DOM query

Get element nodes

  • GetElementById () : Gets an element node object from the ID attribute
  • GetElementsByTagName () : Gets a set of element object nodes by tag name
  • GetElementsByName () : Gets a set of element node objects through the name attribute

If you need to read the attributes of an element node, you can use the element directly. The property name.

Note: The class attribute cannot be read in this way. The element className should be read instead.

Example:

<script type="text/javascript"> var TAB = document.getelementById ("# TAB ") var color = tab.color </script>Copy the code

Element attributes:

  • ChildNode () : Retrives all nodes, including text nodes (DOM label Spaces are also treated as blank nodes)
  • Children () : Can get all the children of the current element
  • FirstChild ()/lastChild() : can get the first /lastChild(including blank nodes) of the current element
  • FirstElementChild () : Get the first child of the current element (but not IE8 and below)
  • InnerText () : Gets the text content inside the element
  • PreviousSibling ()/nextSibling() : Gets the previous/last sibling node (including whitespace nodes)
  • PreviousElementSibling () : Retrieves the previous sibling (not supported in IE8 and below)
  • ParentNode () : gets the parentNode of the current element
  • NodeValue () : Gets and sets the contents of the text node

Note: In Internet Explorer 8 and below, blank text is not treated as a child node.

Other methods of DOM query

  • Document. GetElementByClassName () : according to the class attribute value to obtain a set of element node objects
  • Document.queryselector () : Requires a CSS selector to query an element node object against.
  • Document. QuerySelectorAll () : with the document. QuerySelector () methods are similar, but it will be eligible elements encapsulated in an array of return, even if only one is also returned array.

There is no getElementByClassName() in IE8. Instead, use document.querySelector(), which returns only one unique element, or one if more than one satisfies the condition.

The DOM to add authorization

  • Document.createelement () : Creates an element node object. It takes a tag name as an argument. It creates an element node object based on the tag name and returns the created object as a return value.
  • Document.createtextnode () : Creates a text node object, takes a text content as an argument, creates a text node based on that text, and returns the new one.
  • AppendChild () : adds a new node to a parent node

AppendChild (child node)

  • InnerBefore () : You can insert a new node in front of a specified child node

Syntax: parent node innerBefore (new node, old node)

  • ReplaceChild () : You can replace an existing child node with a specified child node

Syntax: parent node. replaceChild(new node, old node)

  • RemoveChild () : You can remove a child node

Syntax: parent node renoveChild

Supplementary knowledge:

Use confirm() to bring up a prompt box with confirm and cancel buttons, requiring a string as an argument that will be displayed as the prompt text. Return true if the user clicks ok, false otherwise.

\

​