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

This article introduces the relevant knowledge of "what is the role of DOM in JavaScript". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

What can DOM do?

● 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

When a web page is loaded, the browser creates a document object model (Document Object Model) for the page. The HTML DOM model is constructed as a tree of objects:

Find element method:

1. Find directly:

● getElementByid (): find the HTML element through id

● getElementsByTagName (): find the HTML element (list) by signing the tag

● getElementsByClassName (): find the HTML element (list) by the class name

● getelementsByName (): find the HTML element (list) through the name attribute

2. Indirect search:

ParentNode parent node childNodes all child nodes firstChild first child node lastChild last child node nextSibling next brother node previousSibling on a brother node parentElement parent node label element children all child labels firstElementChild first child label element lastElementChild last child tag element nextElementtSibling next Brother tag element previousElementSibling a brother tag element

3. Add and delete nodes and elements:

Method of operation:

InnerText text, specify the stitching of all the text under ID, remove the interval of the HTML element outerText write mode, replace all child elements innerHTML will create a new DOM tree based on the specified value, and then completely replace all the previous child nodes of the calling element with this DOM tree. In outerHTML write mode, the new element replaces the original DOM tree value property to set or return the default value of the password field. Gets the value of the text box.

Class attribute action (CSS stylesheet name):

ClassName gets all class names classList.remove (cls) deletes the specified class classList.add (cls) adds a class

Checkbox attribute:

Checkbox.checked:true selected, false not selected

Tag tag operation:

1. CreateElement () creates a tag:

Each HTML tag has its own attribute, which is referred to: https://www.w3school.com.cn/jsref/dom_obj_anchor.asp

Function append_tag () {var a = document.createElement ('a') var cur = document.getElementById ('dd') a [XSS _ clean] =' click me' a.hrefring.' http://www.baidu.com' a.classNameplate tags' cur.appendChild (a) / add tags}\-equivalent to var astats = "

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.