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

Editor to share with you what are the DOM elements in JS, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

DOM document object model

Js has the following functions

JavaScript can change all HTML elements in a page

JavaScript can change all HTML properties in a page

JavaScript can change all CSS styles in a page

JavaScript can react to all events on the page

(JS can only manipulate inline styles, not embedded and external styles)

How to find HTML elements

1:var x=document.getElementById ("a")

Find the element through ID. If the element of ID= "a" is found, it is returned in the form of object x. If it is not found, x is null.

2: find elements by signature

Var x=document.getElementsByTagName (") []

3: find the element by the class class element name

Var x=document.getElementsByClassName ("")

The 4:getElementsByName () method returns a collection of objects with the specified name.

five

Var element = document.querySelector (selectors)

Returns the match to the specified selector in the document. Where:

Selectors is a string containing one or more CSS selectors separated by commas

Element, the return value is an element object (DOM element). When there is no return value, null is returned

6:

Var elementList = document.querySelectorAll (selectors)

Selectors is a string containing one or more CSS selectors separated by commas

ElementList, the return value is a list of NodeList elements.

Attribute operation

GetAttribute: syntax: element node .getAttribute (element attribute name). The function gets the attribute value specified in the element node.

SetAttribute: syntax: element node .setAttribute (element attribute name), function to create or change the attribute of element node

RemoveAttribute: syntax: removeAttribute (element attribute name), which deletes the specified element in the element.

DOM changes the HTML element

[xss_clean] output content directly to HTML

Change HTML content innerHTML, innertext. The difference between the two innerHTML can parse the tag, but innertext cannot. If there is a tag inside the selected node, it will be output directly.

DOM events (can be added directly to inline events, or you can call a function with an event handler)

Onclick' when the user clicks the mouse

Onchange event

The onload and onunload events are triggered when the user enters or leaves the page, and the onload event can be used to detect the browser type and browser version of the visitor and load the correct version of the page based on this information.

The onmouseover and onmouseout events can be used to trigger a function when the user's mouse moves over or out of the HTML element.

Onmousedown, onmouseup, and onclick make up all parts of the mouse click event. First, when the mouse button is clicked, the onmousedown event is triggered, when the mouse button is released, the onmouseup event is triggered, and finally, when the mouse click is completed, the onclick event is triggered.

Monitoring events:

For example, when you click a button, it touches:

Element.addEventListener (event, function, useCapture)

The first parameter is the type of event, such as "click" or "mousedown".

The second argument is the function that is called after the event is triggered.

The third parameter is a Boolean value that describes whether the event is bubbling or captured.

Bubbling and capture

Insert p element into div and give p element a click event. If it is bubbling, it will trigger from inside to outside, first trigger p element, and then trigger div element.

If it is a capture, the external element is triggered first, and then the internal element is triggered. Clicking p will trigger the div and then the p element

When the default value is false, the bubble event will be triggered. When the default value is true, the capture event will be triggered.

The above is all the content of the article "what are the DOM elements in JS?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, 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.