DOM (2): node operation, event advanced

Node Overview
A node has at least three basic attributes: nodeType (node ​​type), nodeName (node ​​name), and nodeValue (node ​​value).

• Element node nodeType is 1
• attribute node nodeType is 2
• The text node nodeType is 3 (the text node contains text, spaces, newlines, etc.)

node level

1. Parent node

node.parentNode

• The parentNode attribute can return the parent node of a node, which is the nearest parent node
• Returns null if the specified node has no parent

For example:

result:

Note: newline is a text node

2. Child nodes

（1）parentNode.childNodes

parentNode.childNodes returns the set of child nodes containing the specified node
Note: The return value contains all child nodes, including element nodes, text nodes, etc.

（2）parentNode.children

parentNode.children is a read-only property that returns all child element nodes. It only returns child element nodes.

For example:

result:

（3）parentNode.firstChild

firstChild returns the first child node, returns null if not found, and also seems to contain all nodes

（4）parentNode.lastChild

lastChild returns the last child node, and returns null if it cannot find it. Similarly, it also includes all nodes.

（5）parentNode.firstElementChild

firstElementChild returns the first child element node, if not found, returns null

（6）parentNode.lastElementChild

lastElementChild returns the last child element node, if not found, returns null

For example:

result:

3. Brother nodes

（1）node.nextSibling

nextSibling returns the next sibling node of the current element, or null if not found. Likewise, all nodes are included.

（2）node.previousSibling

previousSibling returns the previous sibling node of the current element, or null if not found. Likewise, all nodes are included.

（3）node.nextElementSibling

nextElementSibling returns the next sibling element node of the current element, if not found, returns null

（4）node.previousElementSibling

previousElementSibling returns the previous sibling node of the current element, if not found, returns null

For example:

result:

4. Create a node

document.createElement(‘tagName’)

The document.createElement() method creates the HTML element specified by tagName. Because these elements did not exist originally, they were dynamically generated according to our needs, so we also call it dynamic creation of element nodes.

5. Add nodes

（1）node.appendChild(child)

The node.appendChild() method adds a node to the end of the list of children of the specified parent node.

(2) node.insertBefore(child, specified element)

The node.insertBefore() method adds a node before the specified child node of the parent node.

For example:

result:

6. Delete node

node.removeChild(child)

The node.removeChild() method removes a child node from the DOM and returns the removed node.

For example:

7. Duplicate nodes

node.cloneNode()

The node.cloneNode() method returns a copy of the node on which the method was called. Also known as clone node/copy node

Notice:

• If the parenthesis parameter is empty or false, it is a shallow copy, only the copied node itself is cloned, and the child nodes inside are not cloned.
• If the parenthesis parameter is true, it is a deep copy, which will copy the node itself and all child nodes inside.

For example:

<ul>
    <li>123</li>
    <li>456</li>
    <li>789</li>
</ul>
<script>
var ul = document.querySelector('ul');
//cloneNode()括号为空或者里面是flase，则只复制标签，不复制里面的内容
var li1 = ul.children[0].cloneNode();
ul.appendChild(li1);
//cloneNode(true);括号里面为true,不仅赋值标签，也复制内容
var li2 = ul.children[1].cloneNode(true);
ul.appendChild(li2);
</script>

result:

event senior

1. Register for events

addEventListener event listening method

eventTarget.addEventListener(type, listener, useCapture)

• type: event type string, such as click, mouseover, be careful not to include on here
• listener: event processing function, when the event occurs, the listening function will be called
• useCapture: optional parameter, is a boolean value, the default is false.

For example:

2. Delete event

traditional way

eventTarget.onclick = null;

Event monitoring method

（1） eventTarget.removeEventListener(type, listener, useCapture);

（2） eventTarget.detachEvent(eventNameWithOn, callback);

For example:

The effect is that after clicking once, clicking again will not pop up the warning box

3. DOM event flow
The event flow describes the order in which events are received from the page.
When an event occurs, it will propagate among element nodes in a specific order. This propagation process is the DOM event flow.

The DOM event flow is divided into 3 phases:

• capture phase
• current target stage
• Bubbling phase
  
  Note:
• Only one of capturing or bubbling can be executed in JS code.
• onclick and attachEvent only get the bubbling phase.
• If the third parameter of addEventListener(type, listener[, useCapture]) is
  true, it means that the event handler is called during the event capture phase; if it is false (the default is false if it is not written), it means that the event handler is called during the event bubbling phase.
• In actual development, we rarely use event capture, and we pay more attention to event bubbling.
• Some events do not bubble, such as onblur, onfocus, onmouseenter, onmouseleave
• Event bubbling sometimes causes trouble, and sometimes it helps to do certain events very cleverly.

For example:

<div class = "father">
 	<div class = "son">son盒子</div>
 </div>

event object

1. Introduction to event objects

The event object represents the state of the event, such as the state of the keyboard key, the position of the mouse, and the state of the mouse button.

eventTarget.onclick = function(event) {}
eventTarget.addEventListener('click', function(event) {})
// where event is the event object, we also like to write it as e or evt

eventTarget.onclick = function(event) { // This event is the event object, we also like to write e or evt } eventTarget.addEventListener('click', function(event) { // This event is the event object, we also like written as e or evt })

Note: event is a formal parameter, the system helps us set it as an event object, and there is no need to pass actual parameters to it.

For example:

result:

Click to see all properties of the event

2. Common properties and methods of event objects

For example:

Example 2:

result:

3. Prevent event bubbling

• standard wording

e.stopPropagation()

• Non-standard writing: IE 6-8 uses the cancelBubble property of the event object

e.cancelBubble = true;

For example:

Added on son to prevent bubbling, so when you click on son, only the warning box of son will pop up; but father does not add to prevent bubbling, after clicking father, the warning box of document will still pop up after popping up father

4. Event delegation

• The principle of event delegation

Instead of setting an event listener for each child node individually, the event listener is set on its parent node, and then uses the bubbling principle to affect the setting of each child node.

• The role of event delegation

We only manipulate the DOM once, improving the performance of the program.

Effect analysis: Click which li, the background color will change.

Reason: To add a click event to the parent element, there is no need to add the click event of the child element li one by one. Click which li, the background color will change. The core of event delegation is to hand over the event to the parent element.