JavaScript series blog

JavaScript series blog (5)

Preface

This blog study js selector to control css and html, use event (hook function) to handle the specified function after the event is completed, and js event control page content.

js selector

There are several concepts you need to understand before you learn about js selectors.

  • Node (1): all content appearing in the document is a node in the document.
  • Node (2): label node (element), comment node, text node, and DOCTYPE > node.

js selector is a bridge that connects js and html, just like css selector is a bridge between css and html, but js calls html tags as elements.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js selector</title>
    <style>
        #d {
            color: red;
        }
    </style>
</head>
<body id="bd">
    <!--Notes-->
    <div id="d" class="dd">I am ddd111</div>
    <div id="d" class="dd">I am ddd222</div>

    <div class="sup1">
        <div id="div"></div>
    </div>
    <div class="sup2">
        <div id="div"></div>
    </div>
</body>
</html>

Match by id name

<script>
    console.log(d); // Both can be matched to
    </script>

Through getElement

All content displayed in the page belongs to the document object and is stored in the document.

console.log(document)
// id acquisition
getElementById('id name'); // Can only be called by document

// class acquisition
getElementByClassName('class name'); // Can be called by document and all parents

// tag acquisition
getElementByTagName('Tag name'); // Can be called by document and its parent

querySelector

// Get the first goal that meets the requirements
querySelector()

// Get all the objectives that meet the requirements
querySelectorAll()

// 1. Parameters: css selector syntax is adopted
// 2. It can be called by document and parent
// 3. The id retrieval is not rigorous, and the id selector should be used with caution

js operation page content

  • Text content
box.innerText
// It can be set or obtained directly
  • Label content
box.innerHTML
// Can be set, can also get value, can parse html syntax code

box.outerHTML
// Get all sub content information that contains its own label information
  • style
/box.style. Style name = = > can be set or obtained, but the operation can only be inter line

//getComputedStyle(box, null). Style name = = > can only get values, not set values, and can get values set in all ways (inter line and calculated styles)

//Note: to obtain the calculated style, you need to pay attention to the format of the value
  • Page label global properties operation
ele.getAttribute("alert");
// Get the value of alert global property of page label ele. If there is no global property value, it is null

ele.setAttribute("attr_key", "attr_value");
// The page label ele already has the global attribute, that is, modify the value, or add the global attribute and assign the corresponding value
// Note: in general application scenarios, the style modification is completed in combination with the attribute selector of css

Event

// js event: the process that a page tag can complete a specified function under certain conditions is called an event
// Some conditions: such as mouse click on the label: click on the event | mouse double click on the label: double click on the event | keyboard press: keyboard press on the event
// Specified function: it means that the developer can complete the corresponding function realization according to the actual demand

// Hook function: the function that is called back by the system to meet certain conditions (to complete the specified function)
// Click event: specify the conditions for activating the hook = what logic to process after activating the hook, and complete the specified function (function)

// Getting page labels is a prerequisite
var div = document.querySelector('.div');
// Hook condition: Double Click = specified function (its background color turns red)
div.ondblclick = function () {
    this.style.backgroundColor = 'red';
}

Binding of events

// First kind
box.onclick = function(){}
// Only one implementation can be bound. If there are multiple bindings, keep the last one
// box.onclick = null to unbind the event

// Second kinds
var fn = function() {}
box.addEventListener('click', fn)
// It can bind multiple implementers. If there are multiple bindings, they will be executed in sequence
// box.removerEventListener('click', fn) to unbind the event
// Understanding: the third parameter determines the bubble order (the child parent who is the first to respond to the event)

Event object

// When the system calls back the event function, an event argument is passed
// If you want to use the passed parameter event, define the received parameter
box.onclick = function(ev){
    // Using event objects
    // Special key eg: ev.altKey: true | false
    // Mouse trigger point: ev.clientX | ev.clientY
    
    // Cancel bubble
    ev.cancelBubber = true;
    
    // Cancel default event
    return false;
}

Tags: Javascript Attribute

Posted on Tue, 03 Dec 2019 21:04:08 -0500 by jannoy