DOM (Document Object Model)
The display of a web page is a page composed of html tags. The dom object actually transforms html tags into a document object. You can find the html tags through the methods provided by js in the dom object. By finding the tag, you can operate the tag to make the page move and make the page move.
Get Tags
// Get tags directly
document.getElementById('i1'); //Get the tag with id i1
document.getElementsByTagName('div'); //Get the array of tags according to the tag name
document.getElementsByClassName('c1'); //Get the array of labels according to the class attribute
document.getElementsByName('dsx'); //Get the label array according to the name property
// Indirect tag acquisition
var tmp=document.getElementById('h-test');
tmp.parentElement; // Parent node label element
tmp.children; //All child Tags
tmp.firstElementChild; //First child label element
tmp.lastElementChild; // Last child tag element
tmp.nextElementSibling; //Next sibling tag element
tmp.previousElementSibling; //Previous brother tag element
Operation label
I. text content operation
innerHTML And innerText tmp.innerText; // Get the text content in the label tmp.innerText='Old fellow double hit 666'; //Change the text content in the label tmp.innerHTML; // Get all content in the tag, including html code tmp.innerHTML = '<a href="http://www.imdsx.cn">Big brother</a>' // innerHTML can turn strings containing HTML code into Tags input,textarea Label tmp.value; //Get input and textarea parameters tmp.value = 'content' // Assign values to the contents of input and textarea select Label tmp.value; //Get the value parameter of the select tag tmp.value = 'option' // Modify the select option tmp.selectedIndex; // Get option subscript of select tag tmp.selectedIndex = 1 // Change the option of select by subscript
Event
Direct binding
Bind events directly in Tags
Indirect binding
Get the label of the event to be bound through JavaScript, obj.onclick=function() {} bind event
Direct binding <input type="button" value="Submission" style="float:left;margin-top: 16px" ondblclick="showValueD();"> //this refers to the label of the current operation <input type="button" value="Submission" style="float:left;margin-top: 16px" ondblclick="showValueD(this);"> // function receives this, and locates the elements of the operation by finding the parent, brother and child. function showValueD(ths) { alert(ths.previousElementSibling.value); } //Indirect binding var obj = document.getElementById('onmouse'); obj.onmouseover = function () { obj.style.background = 'red'; }; // The indirect binding of this refers to the label found by getElementById. var obj = document.getElementById('onmouse'); obj.onmouseout = function () { this.style.background = ''; } //Force binding supports the same operation to execute two different pieces of code var obj = document.getElementById('onmouse'); obj.addEventListener('click', function () { console.log(111) }, false) onfocus() //Take action when getting cursor onblur() //Lose focus and operate onclick() //Do it when you click ondblclick() //Double click onmouseover() //Mouse suspension trigger operation onmouseout() //Trigger action when mouse leaves hover
Operation style
tmp.className = 'c1'; // Only one class attribute can be used to change the label class attribute
tmp.classList;// Get style array
tmp.classList.add('aaa'); //Add style array
tmp.classList.remove('aaa'); //Delete style
tmp.checked; //Get the check box status true to check
//Operation individual style
style.xxx //The granularity of the operation style is more refined. To operate a single style attribute is equivalent to adding a style attribute to the label.
style.backgroundColor // For example: in css, styles can be connected through [-]. In JavaScript, all [-] are removed, and the first character after [-] is capitalized.
Operational attributes
setAttribute(key,value) //Set properties, add properties or custom properties to the label
removeAttribute(key) //Delete attribute, delete the specified attribute in the label
attributes //Get all properties of the label
create label
Create labels in object mode
createElement(tagName) //Create a label object through DOM
appendChild(tagObj) //Add a child label object to the parent label
//Creating labels in string mode
insertAdjacentHTML(where, tagStr) //Add a child or brother label inside or outside the parent label
beforeBegin //Insert before get to label
afterBegin //Insert in front of the child label that gets the label
beforeEnd //Insert after the child label that gets the label
afterEnd //Insert after get to label
Other operations
console.log(msg) //print data
alert() //Bullet box prompt
confirm() //Confirm the pop-up box, return true or false
location.href //Get the current url
location.href = 'http://www.imdsx.cn '/ / redirect
location.reload() //Refresh
location.href = location.href //Refresh
timer
setInterval(function, time) //Set timer, execute every time
clearInterval(intervalObj) //Clear timer
function timeInterval() {
var setInt = setInterval(function () {
console.log(1);
//Finish the scheduled task once
clearInterval(setInt)
}, 1000)
}
setTimeout(function, time) //Set the timer. After the page is loaded and after the time, execute the function once.
clearTimeout(timeoutObj) //Clear timer while waiting
function timeOutInterval() {
var setTime = setTimeout(function () {
console.log('After clicking on the operation, the copywriter will be prompted in two seconds.')
}, 2000);
// Clear timer during etc.
clearTimeout(setTime)
}