DOM in JS: to meet the requirements of the case
Function: control html document content} get page tag object element: document Getelementbyid(): get object by element id
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1 id="title">hello</h1> <script> var title = document.getElementById("title"); alert("What's the result"); title.innerHTML = "world"; </script> </body> </html>
Event binding, through which users can interact with the page
1. In the html tag, specify the event attribute, and the attribute value is JS code
2. Get the element object through JS, specify the event attribute and set the function
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Event binding</title> </head> <body> <img src="../img/xk1.jfif" id="k1"> <script> var k1 = document.getElementById("k1"); var flag = false; k1.onclick = function (){ if(flag){ k1.src = "../img/xk2.jfif"; flag = false; } else{ k1.src = "../img/xk3.jfif"; flag = true; } } </script> </body> </html>
window object
1. Method
*1. Related to pop-up box
*alert() displays a warning box with a message and a confirmation button.
*confirm() displays a dialog box with a message and confirm and Cancel buttons. Click OK to return true. Click Cancel to return false
*prompt() displays a dialog box that prompts the user for input. Return user input
*2. Methods of opening and closing pages
*open() opens a new browser window or finds a named window.
*close() closes the browser window. He closes the current window
*3. Methods related to timer
* setTimeout() calls the function or computing expression after the specified millisecond count.
*clearTimeout() cancels the timeout set by the setTimeout() method.
*setInterval() calls a function or evaluates an expression for a specified period (in milliseconds).
*clearInterval() cancels the timeout set by setInterval().
*2. Properties
*3. Features
*1. Objects do not need to be created, but can be referenced directly
*2. window can be omitted
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Auto jump to home page</title> <style> p{ text-align: center; } span{ color: #1E9FFF; } </style> </head> <body> <p> <span id="time">5</span>Seconds later, automatically jump to the home page </p> <script> //Countdown seconds var second = 5; function showtime(){ second --; if(second <= 0){ location.href = "https://www.baidu.com"; } var time = document.getElementById("time"); time.innerHTML = second; } setInterval(showtime,1000); </script> </body> </html>
Location address bar object
1. Create window location/location
*2. Method
*assign() loads the new document.
reload() reloads the current document.
replace() replaces the current document with a new one.
3. Attributes
herf sets or returns the full URL
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Location object</title> </head> <body> <input type="button" id="btn" value="Refresh"> <input type="button" id="btn1" value="Baidu"> <input type="button" id="btn2" value="New document"> <script> var btn = document.getElementById("btn"); btn.onclick = function (){ location.reload(); } var href = location.href; var btn1 = document.getElementById("btn1"); btn1.onclick = function (){ location.href = "https:www.baidu.com"; } var btn2 = document.getElementById("btn2"); btn2.onclick = function (){ location.assign("https://www.w3school.com.cn/"); } </script> </body> </html>
History history object
1. Create: window history/history
*2. Method:
*back() loads the previous URL in the history list.
forward() loads the next URL in the history list.
go() loads a specific page in the history list.
3. Attributes
length returns the number of URL s in the browser history list.
The following is an exercise I do. The addition and deletion of dynamic tables can be applied to addition, deletion, modification and query
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Dynamic table</title> <style> div{ text-align: center; } </style> </head> <body> <div> <input type="text" id="id" placeholder="Please enter the number"> <input type="text" id="name" placeholder="Please enter your name"> <input type="text" id="sex" placeholder="Please enter gender"> <input type="button" id="btn_add" value="add to"> </div> <table align="center" border="1"> <caption>Student information</caption> <tr> <th>number</th> <th>full name</th> <th>Gender</th> <th>operation</th> </tr> </table> <script> //Bind a click event to a button var btn_add = document.getElementById("btn_add"); btn_add.onclick = function (){ //Get text box content var id = document.getElementById("id").value; var name = document.getElementById("name").value; var sex = document.getElementById("sex").value; //establish td,assignment td Label body of,td Content in text box when var td_id = document.createElement("td"); var text_id = document.createTextNode(id); td_id.append(text_id); var td_name = document.createElement("td"); var text_name = document.createTextNode(name); td_name.append(text_name); var td_sex = document.createElement("td"); var text_sex = document.createTextNode(sex); td_sex.append(text_sex); var td_a = document.createElement("td"); var a = document.createElement("a"); a.setAttribute("href","javascript:void(0);"); a.setAttribute("onclick","delet(this)"); var a1 = document.createTextNode("delete"); a.appendChild(a1); td_a.appendChild(a); //establish tr,And add td reach tr in var tr = document.createElement("tr"); tr.appendChild(td_id); tr.appendChild(td_name); tr.appendChild(td_sex); tr.appendChild(td_a) //obtain table var table = document.getElementsByTagName("table")[0]; table.append(tr); } function delet(obj){ var table = obj.parentNode.parentNode.parentNode; var tr = obj.parentNode.parentNode; table.removeChild(tr); } </script> </body> </html>