Javascript-dom key core section summary

Concept: Document ObjectModel (DOM) is a standard programming interface recommended by W3C to deal with extensible markup language (HTML or XML).

What it does: The W3C has defined a set of DOM interfaces that allow you to change the content, structure, and style of a web page.

1. For JavaScript, in order to enable JavaScript to manipulate HTML, JavaScript has its own DOM programming interface. 2. In the case of HTML,DOM makes HTML a DOM tree. Contains documents, elements, and nodes.

The DOM element we get is an object, so it is called the Document Object Model.Copy the code

DOM manipulation, we’re dealing with elements. There are mainly create, add, delete, change, check, attribute operation, event operation.

CreateElement 1.document.write() 2.innerHTML 3.createElement(‘)

AppendChild () 2.insertBefore

1. RemoveChild (child node)

1. Modify element attributes: SRC, href, title, etc. 2. Modify the contents of the normal element: innerHTML, innerText 3. Modify form elements such as value, Type, and Disabled 4. Modify the element styles: style, className

GetElementById; getElementsByTagName; getElementById; getElementsByTagName 2.H5 provides new methods :querySelector, querySelectorAll advocate. 3. Use node operation to obtain elements: parentNode, children, previousElementSibling, nextElementSibling are advocated.

SetAttribute (”,”/): Sets the DOM attribute value. 2. GetAttribute: Obtains the DOM attribute value. 3. RemoveAttribute Remove the attribute.

7. Event operations (register events for elements and take event sources.

var BTN = document.querySelector(‘div’); btn.onclick = function() { … }