Dom of JavaScript (get element, event basis, operation element)

1, Introduction to DOM

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.

2, Get element

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.images

3, 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 condition
onclickClick the left mouse button to trigger
onmouseoverMouse over trigger
onmouseoutMouse away trigger
onfocusGet mouse focus trigger
onblurLoss of mouse focus trigger
onmousemoveMouse movement trigger
onmouseupMouse bounce trigger
onmousedownMouse press trigger

4, Operation element

The 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:

  1. If the style is modified more, you can change the element style by operating the class name.
  2. Class is a reserved word, so className is used to manipulate the element class name attribute
  3. 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');

Tags: Javascript Front-end ECMAScript

Posted on Fri, 26 Nov 2021 04:23:56 -0500 by shivani.shm