Detailed explanation of JavaScript WebAPI, DOM, events and operation element examples

WebAPI
DOM

DOM Tree
DOM element acquisition method
Document Object Properties

event

Steps to use events
Type of event

Operating elements

Operation element content
Operation element attributes
Operation element style
Exclusive thinking
H5 custom attributes

Summarize

WebAPI

API : Application Programming Interface, which is a set of predefined functions that are open to developers by a certain software to help developers implement certain functions. Developers do not need to access the source code or understand the details of its internal working mechanism, but only need to know how to use it.

Simple understanding : API is a tool provided to programmers to make it easier to achieve the functions they want to complete.

WebAPI : An API mainly for browsers, which is encapsulated as an object in the JavaScript language. Web API can be used by calling the properties and methods of the object

Simple understanding : Web API is a set of APIs (BOM and DOM) provided by the browser to operate browser functions and page elements

DOM

The Document Object Model is a standard programming interface for processing extensible markup language (HTML or XML) recommended by the W3C organization.

DOM Tree

DOM processes HTML documents into a tree (inverted) structure, treating HTML documents as a tree. The tags, attributes, and contents of tags in the document are all nodes.

4Mg==,size_16,color_FFFFFF,t_70)

The top of the DOM tree is the document, and the top of the BOM is the window

Document: A page is treated as a document
All tag elements in the element page
All the content in a web page is a node in the document tree (such as element nodes, attribute nodes, text nodes, comment nodes, etc.). Each node is an object with properties and methods.

DOM element acquisition method

How to get it	usage	Return Value
Get by Id	document.getElementById('id')	Returns the element object with the specified id. If not found, returns null. If there are multiple ids, returns undefined.
According to the tag name	document.getElementsByTagName('tag name')	What is returned is a dynamic collection of the specified tags, which is an array-like object, a pseudo-array, but not an array. Can be accessed via subscript indexing
Get by Name	document.getElementByName('name attribute value')	Returns a collection of element objects with the specified name
Get by ClassName (new in HTML5)	document.getElementByClassName('class attribute value')	Returns a collection of element objects of the specified classname
Get by selector (new)	document.querySelector('selector')	Gets the given selector element, and can only return the first element of the given selector
Get by selector (new)	document.querySelectorAll('selector')	Gets the given selector element and returns a collection of elements

Document Object Properties

method	effect
document.body	Returns the body element of the document
document.title	Returns the title element of the document, indicating the title of the page
document.documentElement	Returns the html element of the document, that is, all the information of the HTML page (through this, all the elements of the document can be put into a string for others to read and analyze
document.froms	Returns references to all From objects in the document, in plural form, and can return multiple forms
document.images	Returns all image objects in the document, the same as above

event

Event: The user performs an action (a behavior that can be detected by JavaScript). It is a "trigger-response" mechanism and a way to achieve page interaction.

Three elements of the event:

Event source: who triggered the event Event type: what event was triggered Event handler: the code executed after the event is triggered (in function form)

Steps to use events

<body>
  <button id="btn">Click</button>
  <script>
    var btn = document.getElementById('btn') // Step 1: Get the event source // Step 2: Register the event btn.onclick
    btn.onclick = function () { // Step 3: Add event handler (in the form of function assignment)
        alert('popup')
    }
  </script>
</body>

Event name = function name ([parameters])

Note: There are two ways to create a button:

<input type="button" value="Button display text">
<button type="button">Button display text</value>

Type of event

Operating elements

Operation element content

The attributes provided by DOM implement the operation methods of element content:

innerHTML (W3C) identifies html tags. The format and label style of the writing will be retained when used
innerText (non-standard) does not recognize html tags. Plain text without all formatting and tags
The textContent property retains the text formatting after removing the tags

<body>
    <div id="box">
        The first paragraph...
        <p>
            The second paragraph...
            <a href="#">third</a>
        </p>
    </div>
</body>
<script>
    var box = document.getElementById('box')
    console.log(box.innerHTML)
    console.log(box.innerText)
    console.log(box.textContent)
</script>

Operation element attributes

In DOM, HTML attribute manipulation refers to using JavaScript to manipulate the HTML attributes of an element.

Elements: src, href, etc.
In the form: id, alt, title, etc.

Operation element style

①Operate the style attribute: element object.style.style attribute name

The style attribute name corresponds to the CSS style name, but you need to remove the hyphen "-" in the CSS style name and capitalize the first letter of the English word after the hyphen.

<body>
    <div id="box"></div>
    <script>
        var ele = document.querySelector('#box'); // Get the element object ele.style.backgroundColor= 'red';
        ele.style.width = '100px';
        ele.style.height = '100px';
        ele.style.transform = 'rotate(7deg)';
    </script>
    <!-- The above 3 lines of code are equivalent to adding the following styles in CSS: -->
    <style>
        #box {
            background-color: red;
            width: 100px;
            height: 100px;
            transform: rotate(7deg);
        }
    </style>
</body>

②Operate the className attribute: element object.className

During development, if there are many style changes, you can change the element style by manipulating the class name.
Accessing the value of the className attribute means getting the class name of the element, and assigning a value to the className attribute means changing the class name of the element.
className will change the class name of the element, overwriting the original class name
If an element has multiple class names, separate them with spaces in className.

Exclusive thinking

If there are the same set of elements, and you want a certain element to achieve a certain style, you need to use a cyclic exclusive idea algorithm:

Clear styles for all elements (kill others)
Set the style for the current element (leave it to me)
Note that the order cannot be reversed. Kill others first, then set yourself up.

H5 custom attributes

The purpose of custom attributes is to save and use data. Some data can be saved to the page instead of to the database

Some custom attributes are easily ambiguous, and it is not easy to determine whether they are built-in attributes of the element or custom attributes. HTML5 adds a new specification for custom attributes. In HTML5, it is stipulated that custom attributes can be set by " data-attribute name "

Set the property value :

①Set custom attributes in HTML

data-attribute name='value'

// Set the data-index attribute on the div element <div data-index="2"></div>

②Set custom properties in JavaScript

element.setAttribute('attribute', value)
element.dataset.attribute name = 'value'

<div></div>
<script>
    var div = document.querySelector('div');
    div.dataset.index = '2';
     div.setAttribute('data-name', 'andy');
</script>

Get the property value:

element.getAttribute()
element.dataset.property
element.dataset['attribute'] (compatibility issues)

Note: dataset is a collection that stores all custom attributes starting with data. If a custom attribute contains multiple hyphens (-), camel case naming is used when obtaining it.

<div getTime="20" data-index="2" data-list-name="andy"></div>
<script>
  var div = document.querySelector('div');
  console.log(div.getAttribute('data-index')); // Result: 2
  console.log(div.getAttribute('data-list-name')); // Result is: andy
  // A new method for getting custom attributes in HTML5. You can only get attributes starting with "data-" console.log(div.dataset); // DOMStringMap {index:"2",listName:"andy"}
  console.log(div.dataset.index); // Result: 2
  console.log(div.dataset['index']); // Result: 2
  console.log(div.dataset.listName); // Result: andy
  console.log(div.dataset['listName']); // Result is: andy
</script>

To remove a property value:

element.removeAttribute('attribute')

<div id="test" class="footer" ></div>
<script>
    var div = document.querySelector('div');   
    div.removeAttribute('id'); // Remove the id attribute of the div element div.removeAttribute('class'); // Remove the class attribute of the div element</script>

For specific operation element cases, see the article: JavaScript operation element case exercises

Summarize

This is the end of this article about JavaScript WebAPI, DOM, events and operation elements. For more relevant js WebAPI, DOM, events and operation elements, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

Detailed explanation of using new methods of html5 to manipulate element class names in JavaScript
JavaScript operation element examples
js operates two json arrays to merge, remove duplicates, and delete a certain element
vue.js click event gets the operation of the current element object
JavaScript HTML DOM element (node) add, edit, delete operation example analysis
JS document form form element operation complete example
Summary of common methods of JavaScript operation elements
JavaScript operation elements teach you how to change the page content style

<<: Ubuntu 18.04 one-click upgrade of all third-party Python packages and installation of Python packages

>>: A Brief Analysis of MySQL PHP Syntax