1. What is DOM?
Document Object Model (DOM) is a standard programming interface recommended by W3C to deal with extensible markup language (HTML or XML).
2. Construction of DOM tree
As shown in the figure below:
Document: a page is a document, which is represented by document in DOM
Element: all tags in the page are elements, which are represented by element in DOM
Node: all contents in a web page are nodes (labels, attributes, text, comments, etc.), which are represented by node in DOM
DOM treats all of the above as objects.
So how do we get the elements in the page? There are several ways.
1. Get element by id
Use the getElementById() method to get the element object with ID.
Syntax:
document.getElementById('id');
2. Get by tag name
Use the getElementsByTagName() method to return a collection of objects with the specified tag name.
Syntax:
document.getElementsByTagName('Tag name');
You can also get all the child elements with specified tag names inside an element (parent element)
element.getElementsByTagName('Tag name');
Note: the parent element must be a single object (which element object must be specified). The parent element itself is not included when obtaining
3. Get element by name
The document.getElementsByName() method obtains elements through the name attribute. It is generally used to obtain form elements. The value of the name attribute is not required to be unique. Multiple elements can also have the same name, such as radio boxes and check boxes in the form.
Syntax:
document.getElementsByName('name name');
4. Get through the new method in HTML5
1. Returns a collection of element objects based on the class name
document.getElementsByClassName('Class name')；
2. Returns the first element object according to the specified selector
document.querySelector('selector');
3. Returns according to the specified selector
document.querySelectorAll('selector');
The selectors in querySelector and querySelectorAll need to be signed, for example: document.querySelector('#nav');
5. Get special element
1. Get body element
doucumnet.body // Returns the body element object
2. Get html element
document.documentElement // Returns the html element object
3. Gets the title element of the document
document.title
4. Returns a reference to all Form objects in the document
document.forms
5. Returns a reference to all Image objects in the document
document.images3, Event basis
1. Three elements of event
Event three elements refer to event source, event type and event handler.
Event source: the element that triggered the event (who triggered the event)
Event type: such as click event (what event is triggered)
Event handler: the code to be executed after the event is triggered (in the form of function), also known as event handler (what to do after the event is triggered)
Make a case of "click the button to pop up the warning box". As follows:
<body> <button id="btn">click</button> <script> var btn = document.getElementById('button'); btn.onclick = function(){ alert('Hello'); }; </script> </body>
The operation results are as follows:
2. To execute an event
1. Get event source
2. Registration event (binding event)
3. Add event handler (in the form of function assignment)
As shown in the above example, it is an event that adopts this step.
3. Common mouse events
Mouse eventTrigger conditiononclickClick the left mouse button to triggeronmouseoverMouse over triggeronmouseoutMouse away triggeronfocusGet mouse focus triggeronblurLoss of mouse focus triggeronmousemoveMouse movement triggeronmouseupMouse bounce triggeronmousedownMouse press trigger 4, Operation elementThe DOM operation of JavaScript can change the content, structure and style of web pages. We can use DOM operation elements to change the content and attributes of elements.
1. Change element content
There are several ways:
//1. element.innerHTML
Sets or returns the HTML between the start and end tags of an element. Include HTML tags with spaces and line breaks
//2. element.innerText
Set or return the text content of the element. When returning, HTML tags, redundant spaces and line breaks will be removed, and special characters will be escaped when setting
//3. element.textContent
Sets or returns the text content of the specified node, while retaining spaces and line breaks
For example:
Use the innerHTML, innerText and textContent attributes to output a piece of HTML text on the console.
The code is as follows:
<body> <div class = 'box'> <p>How do you do</p> <p>Hello, I'm Wang Huan. <div>You are?</div> </p> <div>I'm a bear!</div> </div> <script> var box = document.querySelector('.box'); console.log('box.innerHTML:'+box.innerHTML); console.log('box.innerText:'+box.innerText); console.log('box.textContent:'+box.textContent); </script> </body>
The print result is:
We can find that the printing results of these three methods are also different.
innerHTML will maintain the written format and label style when used
innerText removes all formatting and the plain text content of the label
The textContent property preserves the text format after removing the label
2. Attribute operation of common elements
In DOM, HTML attribute operation refers to using JavaScript to operate the HTML attributes of an element. An element contains many attributes. For example, for an img picture element, its src and title attributes can be manipulated, or for an input element, its disabled, checked, selected attributes can be manipulated.
For example, by modifying the path of the picture, you can click different buttons to produce different pictures.
<body> <button id= 'wh'>Figure 1</button> <button id = 'hly'>Figure 2</button> <img src="../11.20/images/1.png" alt="" title = 'wh' width="256px" height="512px"> <script> var wh = document.getElementById('wh'); var hly = document.getElementById('hly'); var img = document.querySelector('img'); //Using event handlers wh.onclick = function(){ img.src = '../11.20/images/1.png'; img.title = 'Figure 1'; } hly.onclick = function(){ img.src = '../11.20/images/2.png'; img.title = 'Figure 2'; } img.onmouseover = function(){ img.src = '../11.20/images/1.png'; img.title = 'Figure 1'; } img.onmouseout = function(){ img.src = '../11.20/images/2.png'; img.title = 'Figure 2'; } </script> </body>
The print result is:
3. Style attribute action
We can modify the size, color, position and other styles of elements through JS.
//1. In line style operation element.style
//2. Class name style operation element.className
It should be noted that:
- If the style is modified more, you can change the element style by operating the class name.
- Class is a reserved word, so className is used to manipulate the element class name attribute
- className will directly change the class name of the element and overwrite the original class name.
4. Actions for custom attributes
1. Get property value
element.attribute element.getAttribute('attribute');
difference:
Element. Attribute gets the built-in attribute value (the attribute of the element itself)
element.getAttribute('attribute '); Mainly get custom attributes (standard) our custom attributes.
2. Set attribute value
element.attribute = 'value' //Set built-in property values. element.setAttribute('attribute', 'value');
difference:
element. Set the built-in attribute value
element.setAttribute('attribute '); Mainly set custom properties (standard)
3. Remove attribute
element.removeAttribute('attribute');
5. H5 custom attributes
Custom attribute purpose: to save and use data. Some data can be saved to the page instead of the database.
The custom attribute is obtained through getAttribute('attribute ').
However, some custom attributes are easy to cause ambiguity, and it is not easy to judge whether they are built-in attributes or custom attributes of elements.
H5 adds custom attributes to us:
1. Set H5 custom properties
H5 specifies that the beginning of the custom attribute data - is used as the attribute name and assigned a value.
such as
<div data-index="1"></div>
Or use JS settings
element.setAttribute('data-index', 2)
2. Get H5 custom attribute
Compatibility acquisition
element.getAttribute('data-index');