JS Strengthening learning-dom Learning Summary

1. Dom Review

Dom:document object Model document or document Tree model.

1.1 Node classification

There are 5 node types in the DOM, and now we use three kinds: tag (Element) node, attribute node, text node.

We can get the node's type (a number) through NodeType, get the node name through NodeName, and get the value of the node by NodeValue.

1.2 Three ways to get page elements

document.getElementById: The element is obtained by the ID value of the tag.

document.getElementsByTagName: Gets the element through the tag name.

Document.getelementsbyclassname: The element is obtained through the class name of the tag, but it is not recommended because there is a large compatibility problem with this method.

1.3 Events

Event: A moment when a user interacts in a document or in a browser.

The usual events are:

Mouse events: OnClick mouse click events, ondblclick mouse double-clicking events, onmouseover Mouse-over events, onmouseout mouse-out events, onmousemove Mouse movement events, onfocus get focus events, Onblur loses focus event.

Keyboard event: onkeydown Keyboard When a key is pressed, a key onkeyup the keyboard is pressed and released.

Register Event Mode: on+ event name.

Register event Location: inline, in-line.

1.4 Events three elements

Event Source: The object that the event is acting on.

Event name: The specific interaction moment.

Event handlers: Code to execute when an event is triggered.

In an event handler, this is often used to always refer to the object that is currently triggering the event.

1.5 Node Hierarchy

Gets the parent node parentnode

Gets the child node ChildNodes children (only gets the label node)

Get sibling node: nextsibling the next sibling node, nextelementsibling the next sibling element node, previoussibling the previous sibling node, previouselementsibling the previous sibling element node.

The first child node of the parent element and the last child node: Firstchild,firstelementchild,lastchild,lastelementchild.

Node Operation:

Clone node: CloneNode (True/false);

Append node: appendchild;

Remove node: removechild;

Insert node: InsertBefore.

1.6 Custom Properties

SetAttribute Set custom properties, GetAttribute get custom properties that have been set, removeattribute remove custom properties.

1.7 Creating elements Dynamically:

document.write (): It is not recommended because Document.Write will render again after the original document stream has been removed.

InnerHTML: Renders a string as a label in HTML in the form of an assignment.

Document.createelement (): Create a bunch of labels.

JS Strengthening learning-dom Learning Summary