[Directory]
I. BOM Operation
1. window Object
2. window child object
3. Hisry Object
4. location object (master)
5. Pop-up box
6. Timer-related
2. DOM Manipulation
1. DOM-related concepts
2. Find labels
3. Node Operation
4. Get Value Operation
5. class, css operations
(Here's what you do with a browser in a mac notebook (check the console interface for elements)
1. BOM Operation
Browser Object Model
js code manipulation browser
1. window Object
# window object window Objects refer to browser windows window.innerHeight Height of browser window 900 window.innerWidth Width of browser window 1680# New Window Open Page Write blank for the second parameter to write the size and location of the new window for the third parameterwindow.open(url,target,features)eg:window.open('https://www.baidu.com/','','height=400px,width=400px,top=400px,left=400px') # Extend parent-child page communication window.opener() understand window.close() Close the current page
2. window child object
window.navigator.appName
"Netscape"
window.navigator.appVersion
"5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"
window.navigator.userAgent #is used to indicate whether or not a browser is currently in use
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"
"""
Extension: Crawl prevention
1. The easiest and most common one is to verify that the originator of the current request is a browser
(with the following configuration information, browser)
userAgent
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36
2. How to crack this measure
Add the user-agent configuration above to your code
"""
window.navigator.platform
"MacIntel"
#If it is a child object of windows, windows can be omitted from not writing
3. Hisry Object
window.history.back() falls back to the previous page
window.history.forward() to the next page
#corresponds to the two arrows on the top left of the browser you are using
4. location object (master)
window.location.href #Get the url of the current page
window.location.href = url #Jump to the specified url
window.location.reload() #Property Page Browser Top Left Small Circle
5. Pop-up box
Warning box
alert('Please visit this site carefully')
Confirmation box
confirm('Are you sure you want to join the game?')
false
confirm('Are you sure you want to go to the next game?')
true
prompt box
prompt('Welcome,'Sign in first')
"Welcome to join"
6. Timer-related
1,Trigger after a period of time(Once)
setTimeout(func1,3000)
clearTimeout(t)
2,Trigger every other time(loop)
setInterval(func2,3000)
clearInterval(t)
<script>
// 1,Trigger after a period of time(Once) function func1() { alert(123) } let t = setTimeout(func1,3000); // Automatically executes after 3 seconds in milliseconds func1 function clearTimeout(t) // Cancel the timed task If you want to clear the timed task you need to specify the timed task with a variable before the day
//2,Trigger every other time(loop) function func2() { alert(123) } function show(){ let t = setInterval(func2,3000); // Execute every 3 seconds function inner(){ clearInterval(t) // Clear timer } setTimeout(inner,9000) // 9 Trigger after seconds } show() </script>
2. DOM Operation
Document Object Model
js code action label
1. DOM-related concepts
# Concepts of DOM Trees
All tags can be called nodes
# JavaScript can create dynamic HTML from DOM:
JavaScript can change all HTML elements in a page
JavaScript can change all HTML properties on a page
JavaScript can change all CSS styles on a page
JavaScript can respond to all events on a page
# DOM Operation
Tags work and there are many tags on an html page.
1. Learn how to find labels first
2. Learn the DOM operation label again
# DOM operations need to start with the keyword document
2. Find labels
(1) Direct search
""" id lookup //Class lookup //Label Lookup """ # Notice that the return values of the three methods are different document.getElementById('d1') <div id="d1">...</div> document.getElementsByClassName('c1') HTMLCollection [p.c1]0: p.c1length: 1__proto__: HTMLCollection document.getElementsByTagName('div') HTMLCollection(3) [div#d1, div, div, d1: div#d1] let divEle = document.getElementsByTagName('div')[1] divEle <div> div>div </div>
""" //When you use variable names to refer to label objects, it is generally recommended that you write as xxxEle divEle aEle pEle """
(2) Indirect search
let pEle = document.getElementsByClassName('c1')[0] # Note if index values are required pEle.parentElement # Take Parent Node <div id="d1">"div "<div>div>div</div><p class="c1">...</p><p>div>p</p></div>
pEle.parentElement.parentElement <body>...</body>
pEle.parentElement.parentElement.parentElement <html lang="en"><head>...</head><body>...</body></html>
pEle.parentElement.parentElement.parentElement.parentElement null let divEle = document.getElementById('d1') divEle.children # Get all sublabels divEle.children[0] <div>div>div</div> divEle.firstElementChild <div>div>div</div> divEle.lastElementChild <p>div>p</p> divEle.nextElementSibling # First under same level <div>div Below div</div> divEle.previousElementSibling # First above same level <div>div Above div</div>
3. Node Operation
(1)
""" //Dynamic creation of img tags through DOM operations //And add attributes to the label //Finally, add the label to the text """ let imgEle = document.createElement('img') # create label imgEle.src = '111.png' # Set default properties for labels "111.png" imgEle imgEle.username = 'jason' # Custom properties cannot be set point-wise "jason" imgEle <img src="111.png"> imgEle.setAttribute('username','jason') # You can set both custom properties and default writing undefined imgEle <img src="111.png" username="jason"> imgEle.setAttribute('title','A picture') imgEle <img src="111.png" username="jason" title="A picture"> let divEle = document.getElementById('d1') undefined divEle.appendChild(imgEle) # Add element inside label(Tail append) <img src="111.png" username="jason" title="A picture">
(2)
""" //Create a Label //set a property //Set Text //Add to Label Inside //Add to the specified label """ let aEle = document.createElement('a') aEle <a></a> aEle.href = 'https://www.mzitu.com/' "https://www.mzitu.com/" aEle <a href="https://www.mzitu.com/"></a> aEle.innerText = 'I look good to you at a point!' # Set text content for labels "I look good to you at a point!" aEle <a href="https://www.mzitu.com/">I look good to you at a point!</a> let divEle = document.getElementById('d1') undefined let pEle = document.getElementById('d2') undefined divEle.insertBefore(aEle,pEle) # Add Label Content Specify Location Add <a href="https://www.mzitu.com/">I look good to you at a point!</a>
(3)
""" //Additional Supplement appendChild() removeChild() replaceChild() setAttribute() set a property getAttribute() get attribute removeAttribute() Remove Attribute """ # innerText and innerHTML divEle.innerText # Get all the text inside the label "div I look good to you at a point! div>p div>span" divEle.innerHTML # Inside text and labels are taken "div <a href="https://www.mzitu.com/">I look good to you at a point!</a><p id="d2">div>p</p> <span>div>span</span> " divEle.innerText = 'heiheihei' "heiheihei" divEle.innerHTML = 'hahahaha' "hahahaha" divEle.innerText = '<h1>heiheihei</h1>' # Unrecognized html Label "<h1>heiheihei</h1>" divEle.innerHTML = '<h1>hahahaha</h1>' # Distinguish html Label "<h1>hahahaha</h1>"
4. Get Value Operation
# Get data inside user data label let seEle = document.getElementById('d2') seEle.value "111" seEle.value "333" let inputEle = document.getElementById('d1') inputEle.value
# How to get file data uploaded by users let fileEle = document.getElementById('d3') fileEle.value # Unable to get file data "C:\fakepath\02_Test Route.png" fileEle.files FileList {0: File, length: 1}0: File {name: "02_Test Route.png", lastModified: 1557043082000,
lastModifiedDate: Sun May 05 2019 15:58:02 GMT+0800 (China Standard Time),
webkitRelativePath: "", size: 29580, ...}length: 1__proto__: FileList fileEle.files[0] # Get file data File {name: "02_Test Route.png", lastModified: 1557043082000,
lastModifiedDate: Sun May 05 2019 15:58:02 GMT+0800 (China Standard Time), webkitRelativePath: "", size: 29580, ...}
5. class, css Operation
let divEle = document.getElementById('d1') undefined divEle.classList # Gets all class properties of a label DOMTokenList(3) ["c1", "bg_red", "bg_green", value: "c1 bg_red bg_green"] divEle.classList.remove('bg_red') # Remove a class attribute undefined divEle.classList.add('bg_red') # Add Class Properties undefined divEle.classList.contains('c1') # Verify that a class property is included true divEle.classList.contains('c2') false divEle.classList.toggle('bg_red') # Delete or Add false divEle.classList.toggle('bg_red') true divEle.classList.toggle('bg_red') false divEle.classList.toggle('bg_red') true divEle.classList.toggle('bg_red') false divEle.classList.toggle('bg_red') true # DOM Operation Label Style Unified First style Beginning let pEle = document.getElementsByTagName('p')[0] undefined pEle.style.color = 'red' "red" pEle.style.fontSize = '28px' "28px" pEle.style.backgroundColor = 'yellow' "yellow" pEle.style.border = '3px solid red' "3px solid red"
Reference reading:
https://www.cnblogs.com/xiaoyuanqujing/articles/11670078.html