Summary of JavaScript knowledge points: DOM

1. Introduction to DOM

1.1 What is DOM

A complete JavaScript implementation consists of the following 3 different parts:

• Core (ECMAScript): The core part of the language, which describes the syntax and basic objects of the language.

• Document Object Model (DOM): Web page document operation standard, describing methods and interfaces for processing web page content.

• Browser Object Model (BOM): The basis for client and browser window operations, describing the methods and interfaces for interacting with the browser.

Document Object Model ( Document Object Model，简称DOM ) is a standard编程接口recommended by the W3C organization for processing extensible markup language (HTML or XML).
W3C has defined a series of DOM interfaces through which the content, structure and style of web pages can be changed.

Official language: Document Object Model (DOM) is a standard programming interface recommended by the W3C organization for processing extensible markup languages. It is a platform- and language-independent application programming interface (API) that can dynamically access programs and scripts and update their content, structure, and style of www documents (HTML and XML documents are defined through description sections). The document can be further processed and the results of the processing can be added to the current page. DOM is a tree-based API document that requires the entire document to be represented in memory during processing. Another simple API is event-based SAX, which can be used to process very large XML documents. Because they are large, they are not suitable for processing all in memory.

1.2 DOM tree

• Document: A page is a document. Document is used in DOM to represent
• elements: all tags in the page are elements, and element is used in DOM to represent
• nodes: all content in the web page is nodes (labels, attributes, text, comments, etc.). Use node in DOM to represent

DOM 把以上内容都看做是对象

2. Get elements

2.1 How to get page elements

. DOM is mainly used to operate elements in our actual development.
How do we get the elements in the page? You can get the elements in the page in the following ways:

• Get based on ID
• Get based on tag name
• Get special elements
• via new methods in HTML5
• 
  

2.2 Obtain based on ID

Use the getElementById() method to obtain the element object with ID.

document.getElementById('id');

Use console.dir() to print the element object we obtained and better view the properties and methods in the object.

2.3 Get based on tag name

Use the getElementsByTagName() method to return a collection of objects with the specified tag name.

document.getElementsByTagName('tag name');

Note:

1. Because what we get is a collection of objects, we need to traverse if we want to operate the elements inside.
2. Obtaining the element object is dynamic

2.4 Obtain document.getElementsByClassName('class name') through the new method of HTML5

; // Return the element object collection according to the class name document.querySelector('selector'); // Return according to the specified selector The first element object document.querySelectorAll('selector'); // Return according to the specified selector

注意：
The selectors in querySelector and querySelectorAll need to be marked, for example: document.querySelector('#nav');

2.5 Get special elements (body, html)

1. Get the body element

doucumnet.body // Return the body element object

2. Get the html element

document.documentElement // Return the html element object

3. Event basics

3.1 Event overview

JavaScript enables us to create Dynamic pages, and events are behaviors that can be detected by JavaScript.
简单理解： 触发--- 响应机制。
Each element in the web page can generate certain events that can trigger JavaScript. For example, we can generate an event when the user clicks a button, and then perform certain operations.

3.2 Three elements of events:

1. event source (who)
2. event type (what event)
3. event handler (what to do)

case:

var btn = document.getElementById('btn');
btn.onclick = function() {
 alert('How are you'); 
};

3.3 Steps to execute events:

1. Obtain event source,
2. register event (bind event)
3. , add event handler (in the form of function assignment)

3.3 Common mouse events

注：以下图片的事件只是常见的并不代表所有

3.4 Analyze the three elements

of events:
1. Event source (what do you want to operate on)

2. Event (what do you want to do to achieve the desired interaction effect)

3. Processing function (what do you want the target to look like after the event proceeds)

4. Operation element

JavaScript DOM operations can change the content, structure and style of web pages. We can use DOM operation elements to change the content, attributes, etc. inside the elements. Note that the following are all attributes

4.1. Change the element content

element.innerText

from the starting position to the ending position, but it removes the html tag. At the same time, spaces and line breaks will also remove

the entire content from the starting position to the ending position of

element.innerHTML

tag, while retaining spaces and line breaks

4.2 Common element attribute operations

innerText and innerHTML to change element content
src,href
id, alt, title

4.3 Attribute operations of form elements

You can use DOM to operate the attributes of the following form elements:

type, value, checked, selected, disabled

4.4 Style attribute operations

We can modify the size, color, position and other styles of elements through JS.

1. element.style Inline style operation
2. element.className Class name style operation

注意：
1.JS 里面的样式采取驼峰命名法比如fontSize、 backgroundColor
2.JS 修改style 样式操作，产生的是行内样式，CSS 权重比较高

the operating elements are the core content of the DOM.

4.5 Exclusionary thinking

If there are the same group of elements, and we want a certain element to implement a certain style, we need to use the loop exclusive algorithm:

1. clear the styles of all elements (kill other people)
2. and set the style for the current element (leaving myself alone).
3. Note that the order cannot be Reverse it, first kill other people, and then set yourself

4.6 Operation of custom attributes

1. Get the attribute value

• element.property Get the attribute value.
• element.getAttribute('attribute');

Difference:

• element.attribute gets the built-in attribute value (the attribute that comes with the element itself)
• element.getAttribute('attribute'); mainly gets the customized attributes (standard) customized by our programmers Property

2. Set the property value

• element.property = 'value' Set the built-in property value.
• element.setAttribute('Attribute', 'Value');

Difference:

• element.Attribute sets built-in attribute value
• element.setAttribute('Attribute'); Mainly sets custom attributes (standard)

3. Remove attributes

• element.removeAttribute(' Properties');

4.7 H5 custom properties

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

Custom attributes are obtained through getAttribute('attribute').
However, some custom attributes can easily cause ambiguity, and it is difficult to determine whether they are built-in attributes or custom attributes of the element.

H5 has added new custom attributes to us:

1. Set H5 custom attributes

. H5 stipulates that the beginning of the custom attribute data- should be used as the attribute name and assigned a value.

Or use JS to set

element.setAttribute('data-index', 2)

2. Get H5 custom attributes <br/> Compatibility Get element.getAttribute('data-index');
H5 has added element.dataset.index or element.dataset['index'], which is supported only in IE 11.

5. Node operations

usually use two methods to obtain elements:
1. Use the methods provided by DOM to obtain elements

• document.getElementById()
• document.getElementsByTagName()
• document.querySelector, etc.  The logic is not strong and cumbersome.

2. Use the node hierarchical relationship to obtain elements.

• Use the parent-child-sibling node relationship to obtain elements.
• The logic is strong, but Slightly less compatible.

Both methods can obtain element nodes, which will be used later, but node operations are simpler.

5.2 Node Overview

All content in a web page is a node (label, attribute, text, comment, etc.). In the DOM, a node Use node to represent.
All nodes in the HTML DOM tree can be accessed through JavaScript, and all HTML elements (nodes) can be modified, created or deleted.

Generally, nodes have at least three basic attributes: nodeType (node ​​type), nodeName (node ​​name) and nodeValue (node ​​value).

• The element node nodeType is 1,
• the attribute node nodeType is 2,
• and the text node nodeType is 3 (text nodes include text, spaces, line breaks, etc.)

我们在实际开发中，节点操作主要操作的是元素节点

5.3 Node level

uses the DOM tree to divide the nodes. For different hierarchical relationships, the most common one is父子兄层级关系

1. Parent node

node.parentNode

• The parentNode property can return the parent node of a certain node. Note that it is the most recent parent node.
• If the specified node has no parent node, null will be returned.

2. Child node

parentNode.childNodes (standard)

parentNode.childNodes returns include A collection of child nodes of the specified node, which is an immediately updated collection.
Note: The return value contains all child nodes, including element nodes, text nodes, etc.
If you only want to get the element nodes inside, you need to handle it specially. Therefore, we generally do not advocate the use of childNodes

var ul = document. querySelector('ul');for(var i = 0; i < ul.childNodes.length;i++) {if (ul.childNodes[i].nodeType == 1 ) {
 // ul.childNodes[i] is the element node console.log(ul.childNodes[i]);}}

2. parentNode.children (non-standard)

parentNode.children is a read-only property that returns all child element nodes. It only returns child element nodes, and other nodes are not returned (this is what we focus on).
Although children is a non-standard, it is supported by various browsers, so we can safely use

3. parentNode.firstChild

firstChild to return the first child node, or null if not found. Likewise, all nodes are included.

4. parentNode.lastChild

lastChild returns the last child node, or null if not found. Similarly, it also contains 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, or null if not found.
注意：这两个方法有兼容性问题，IE9 以上才支持

In actual development, firstChild and lastChild contain other nodes, which is inconvenient to operate. And firstElementChild and lastElementChild have compatibility issues. So how do we get the first child element node or What about the last child element node?
Solution:

1. If you want the first child element node, you can use parentNode.chilren[0]
2. If you want the last child element node, you can use

parentNode.chilren[parentNode.chilren.length - 1]

Summary

Document Object Model (Document Object Model (DOM for short) is a standard programming interface recommended by the W3C organization for processing extensible markup language (HTML or XML).

W3C has defined a series of DOM interfaces through which the content, structure and style of web pages can be changed.

For JavaScript, in order to enable JavaScript to operate HTML, JavaScript has its own set of DOM programming interfaces.

For HTML, DOM makes HTML form a DOM tree.

The DOM element that contains documents, elements, and nodes is an object, so it is called the document object model

. Regarding DOM operations, we mainly focus on the operation of elements. Mainly include creation, addition, deletion, modification, query, attribute operation, and event operation.