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">I am ddd111</div> <div id="d">I am ddd222</div> <div> <div id="div"></div> </div> <div> <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
- 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; }