Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of JavaScript DOM case analysis, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this JavaScript DOM case analysis article. Let's take a look at it.

1. DOM

Document object Model (DOM) is a standard programming interface recommended by W3C to deal with Extensible markup language (HTML or XML). The W3C has defined a series of DOM interfaces that can change the content, structure and style of web pages through these DOM interfaces.

2. DOM tree

DOM treats all of the above as objects, and the DOM element we get is an object (object), so it is called the document object model.

Document: a page is a document, which is represented by document in DOM.

Elements: all tags on the page are elements, which are represented by element in DOM.

Nodes: all content in a web page is a node (tags, attributes, text, comments, etc.), represented by node in DOM.

3. DOM operation

1. 1 get element

You can get the elements in the page in the following ways:

According to ID, getElementById ('ID name')

According to the tag signature, getElementsByTagName ('tag signature')

Get getElementsByClassName ('class name), document.querySelector (' (. / #) selector'), document.querySelectorAll ('(. / #) selector') through the new method added by HTML5

Special element acquisition, document.body; (get body element), document.documentElement; (get html element)

Note:

Get through the tag signature: because what we get is a collection of objects, we need to traverse the elements if we want to manipulate them, and we get that the element objects are dynamic.

Getting elements based on ID is unique.

H5 New method: a collection of element objects is returned based on the class name. The first element object is returned according to the specified selector.

1.2 event basis

Event Overview: JavaScript gives us the ability to create dynamic pages, and events are behaviors that can be detected by JavaScript.

Simple understanding: trigger-response mechanism.

Each element in a web page can generate some event that can trigger a JavaScript.

An event consists of three parts: the event source, the event type, the event handler, which we also call the event three elements

For example:

/ / Click a button to bring up the dialog box

Event is composed of three parts, event source, event type, event handler, which we also call event three elements.

/ / (1) who is the button on which the event source event is triggered?

Var btn = document.getElementById ('btn')

/ / (2) how the event type triggers what event, such as mouse click (onclick) or mouse over or keyboard press

/ / (3) the event handler is done by assigning a function.

Btn.onclick = function () {

Alert ('point Qiuxiang')

}

To execute the event:

For example:

/ / perform event steps

/ / Click div, console output, I am selected

/ / 1. Get the event source

Var div = document.querySelector ('div')

/ / 2. Bind events to register events

/ / div.onclick

/ / 3. Add event handlers

Div.onclick = function () {

Console.log ('I was chosen')

}

1.3 mouse event

Supplementary mouse events:

Mouseenter: move into the event.

Mouseleave: remove event.

Contextmenu: right-click event.

Selectstart: disable mouse selection.

1.4 keyboard event

For example:

/ / commonly used keyboard events

/ / 1. Triggered when the keyup button pops up

/ / _ document.onkeyup = function () {

/ / console.log ('I'm playing')

/ /}

Document.addEventListener ('keyup', function () {

Console.log ('I'm playing')

})

/ / 3. Unrecognized function keys such as ctrl shift left and right arrows are triggered when the keypress button is pressed.

Document.addEventListener ('keypress', function () {

Console.log ('I pressed press')

})

/ / 2. Trigger the identification function key such as the left and right arrow of ctrl shift when the keydown button is pressed.

Document.addEventListener ('keydown', function () {

Console.log ('I pressed down')

})

/ / 4. The execution order of the three events keydown-- keypress-- keyup

1.5 operation element

The DOM operation of JavaScript can change the content, structure and style of the web page, and we can use the DOM operation element to change the content, attributes and so on.

1.51 change the content of elements

Element.innerText; content from the start position to the end position, but it removes the html tag, as well as spaces and line breaks

Element [XSS _ clean]; everything from the start position to the end position, including the html tag, while leaving spaces and line breaks

For example:

/ / the difference between innerText and innerHTML

/ / 1. InnerText does not recognize html tags with non-standard removal of spaces and line feeds

Var div = document.querySelector ('div')

/ / div.innerText=' today is: 2019'

/ / 2. InnerHTML identifies html tags W3C standard preserves spaces and line breaks

Div [XSS _ clean] = 'Today is: 2019'

/ / these two attributes are readable and writable to get the contents of the element.

Var p = document.querySelector ('p')

Console.log (p.innerText)

Console.log (p [XSS _ clean])

This is the end of the article on "DOM example Analysis of JavaScript". Thank you for reading! I believe you all have a certain understanding of the knowledge of "DOM case Analysis of JavaScript". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.