JS, BOM, DOM (VI)

## JavaScript
	1. ECMAScript:  Basic grammar 
	2. BOM
	3. DOM：
		1.  event 

## DOM Simple learning ：
	*  function ：  control html The content of the document 
	*  Code ：  Get page tags （ Elements ） object  Element
		* document.getElementById("id value "):  By element id Get element object 
	
	*  operation Element object ：
		1.  Modify attribute values ：
			1.  Specify which object to get ？
			2.  see API file , Find out which properties can be set 		
		2.  Modify the content of the label body 
			*  attribute ： innerHTML

##  Simple learning of events 
	*  function ：  After some components have performed some operations , Trigger the execution of some code .
	
	*  How to bind events 
		1.  Directly again html On the label , Specify the properties of the event （ operation ）,  The property value is JS Code 		
			1.  event ： onclick --  Click events 
		2.  adopt js Get element object , Specify event properties , Set up a function 

## BOM 
	1.  Concept ： Browser Object Model  Browser object model 
		*  Encapsulate the components of the browser into objects .

	2.  form ：
		* Window:  Window object 
			*  characteristic ：
				* window Objects do not need to be created and can be used directly .window Use .	window. Method name ();
				* window Quotations can be omitted .	 Method name ();
			*  Methods related to pop ups 
				1. alert()
				2. confirm()
				3. prompt()
			*  Methods related to development closure 
				1. close()
				2. open()：  Open a new browser window 
			*  Methods related to timers 
				1. setTimeout():  Call the function or computing expression after the specified millisecond count. .
				2. clearTimeout()：  Cancel from setTimeout() Method set timeout.
				3. setInterval():  According to the specified period （ In milliseconds ） To call a function or evaluate an expression .
				4. clearInterval()：  Cancel from setInterval() Method set timeout.
			*  attribute ：
				1.  Get something else BOM object 
					1.history
					2.location
					3.navigator
					4.screen
				2.  obtain DOM object 
					* document
		* Navigator:  Browser object 
		* Screen:  Display screen objects 
		* History:  The object of history 
			1.  establish （ obtain ）：
				1. windows.history
				2. history
			2.  Method ：
				* back():  load history  The previous one in the list url.
				* forward():  load history  Next... In the list url.
				* go():  load  history  A specific page in the list .
			3.  attribute 
				* length  return   current window   In the history list URL Number .
		* Location：  Address bar object 
			1.  establish （ obtain ）：
				1. windows.location
				2. location
			2.  Method ：
				* reload()  Reload the current document . Refresh 
			3.  attribute 
				* href  Set or return to full url.

## DOM： 
	*  Concept ： Document Object Model  Document object model 
	
	* W3C DOM  The standard is divided into  3  Different parts ：

		*  The core  DOM -  A standard model for any structured document 
			* Document： Document object 
			* Element： Element object 
			* Attribute： Property object 
			* Text： Text object 
			* Comment: annotation objects 

			* Node： Node object , other 5 A parent of 
	* XML DOM -  in the light of  XML  Standard model for documentation 
	* HTML DOM -  in the light of  HTML  Standard model for documentation 

	*  The core DOM Model ：
		* Document： Document object 
			1.  establish （ obtain ）：  stay HTML DOM You can use window Object to get 
				1. window.document
				2.document
			2. Method 
				1.  obtain Element object ：
					1. getElementById():  according to id Property value gets the element object . id Attribute values are generally unique .
					2. getElementsByTagName():  Get the element objects according to the element name .  The return value is an array .
					3. getElementsByClassName():  according to Class Attribute values get the element objects . The return value is an array .
					4. getElementsByName():  according to name Attribute values get the element objects . The return value is a data .
				2.   Create other DOM object ：
					createAttribute(name)
            				createComment()
            				createElement()
            				createTextNode()
			3. attribute 
		* Element： Element object 
			1.  obtain （ establish ）：  adopt document To get and create 
			2.  Method ：
				1. removeAttribute()：  Delete attribute 
				2. setAttribute()：  Set properties 
		* Node： Node object , other 5 A parent of 
			*  characteristic ：  Accidentally dom Objects can be considered as a node .
			*  Method ：
				* CRUD dom Trees ：
					* appendChild()： Add a new child to the end of the node's child list .
					* removeChild()	： Delete （ And back to ） The specified child of the current node .
					* replaceChild()： Replace a child node with a new one .
			*  attribute ：
				* parentNode  Return the parent of the node .
	* HTML DOM
		1.  Setting and obtaining the label body ： innerHTML
		2.  Use html Properties of the element object 
		3.  Control element styles 
			1.  Using elements style Property to set 
			
			2.  Define the style of class selector in advance , By element className Property to set its class Property value . 

## Event monitoring mechanism ：

	*  Concept ： After some components have performed some operations , Trigger the execution of some code .	
		*  event ： Some operations . Such as ：  single click , double-click , The keyboard is pressed , The mouse moved 
		*  Event source ： Components . Such as ：  Button   Text input box ...
		*  Monitor ： Code .
		*  Register to listen ： Put the event , Event source , The monitors are combined .  When something happens at the source , It triggers the execution of a listener code .

	*  Common events ：
		1.  Click event ：
			1. onclick： Click events 
			2. ondblclick： Double-click the event 
		2.  "Event" 
			1. onblur： Lose focus 
			2. onfocus: Element gets focus .

		3.  Loading event ：
			1. onload： A page or an image is loaded .

		4.  Mouse events ：
			1. onmousedown	 Mouse button pressed .
			2. onmouseup	 Mouse button released .
			3. onmousemove	 Mouse moved .
			4. onmouseover	 Mouse over an element .
			5. onmouseout	 Move the mouse away from an element .
		5.  Keyboard events ：
			1. onkeydown	 A keyboard key is pressed .	
			2. onkeyup		 A keyboard key is released .
			3. onkeypress	 A keyboard key is pressed and released .

		6.  Choice and change 
			1. onchange	 Content of domain changed .
			2. onselect	 The text is selected .

		7.  Form Events ：
			1. onsubmit	 The confirm button is clicked .
			2. onreset	 Reset button is clicked .

Form selected cases

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Choose all the forms </title>
    <style> table{
       border: 1px solid; width: 500px; margin-left: 30%; } td,th{
       text-align: center; border: 1px solid; } div{
       margin-top: 10px; margin-left: 30%; } .out{
       background-color: white; } .over{
       background-color: pink; } </style>

    <script> window.onload = function (){
       document.getElementById("selectAll").onclick = function (){
       var cbs = document.getElementsByName("cb"); for (var i = 0; i < cbs.length; i++) {
       cbs[i].checked = true; } } document.getElementById("unSelectAll").onclick = function (){
       var cbs = document.getElementsByName("cb"); for (var i = 0; i < cbs.length; i++) {
       cbs[i].checked = false; } } document.getElementById("selectRev").onclick = function (){
       var cbs = document.getElementsByName("cb"); for (var i = 0; i < cbs.length; i++) {
       cbs[i].checked = !cbs[i].checked; } } document.getElementById("firstCb").onclick = function (){
       var cbs = document.getElementsByName("cb"); for (var i = 0; i < cbs.length; i++) {
       cbs[i].checked = this.checked; } } var trs = document.getElementsByTagName("tr"); for (var i = 0; i < trs.length; i++) {
       trs[i].onmouseover = function (){
       this.className = "over"; } trs[i].onmouseout = function (){
       this.className = "out"; } } } </script>

</head>
<body>

<table>
    <caption> Student information sheet </caption>
    <tr>
        <th><input type="checkbox" name="cb" id="firstCb"></th>
        <th> Number </th>
        <th> full name </th>
        <th> Gender </th>
        <th> operation </th>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>1</td>
        <td> linghu chong </td>
        <td> male </td>
        <td><a href="javascript:void(0);"> Delete </a></td>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>2</td>
        <td> ren woxing </td>
        <td> male </td>
        <td><a href="javascript:void(0);"> Delete </a></td>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>3</td>
        <td> yue buqun </td>
        <td>?</td>
        <td><a href="javascript:void(0);"> Delete </a></td>
    </tr>

</table>
<div>
    <input type="button" id="selectAll" value=" Future generations ">
    <input type="button" id="unSelectAll" value=" Totally unselected ">
    <input type="button" id="selectRev" value=" Reverse election ">
</div>
</body>
</html>

Form validation case

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Registration page </title>
<style> *{
       margin: 0px; padding: 0px; box-sizing: border-box; } body{
       background: url("img/register_bg.png") no-repeat center; padding-top: 25px; } .rg_layout{
       width: 900px; height: 500px; border: 8px solid #EEEEEE; background-color: white; /* Give Way div Horizontal center */ margin: auto; } .rg_left{
       /*border: 1px solid red;*/ float: left; margin: 15px; } .rg_left > p:first-child{
       color:#FFD026; font-size: 20px; } .rg_left > p:last-child{
       color:#A6A6A6; font-size: 20px; } .rg_center{
       float: left; /* border: 1px solid red;*/ } .rg_right{
       /*border: 1px solid red;*/ float: right; margin: 15px; } .rg_right > p:first-child{
       font-size: 15px; } .rg_right p a {
       color:pink; } .td_left{
       width: 100px; text-align: right; height: 45px; } .td_right{
       padding-left: 50px ; } #username,#password,#email,#name,#tel,#birthday,#checkcode{
       width: 251px; height: 32px; border: 1px solid #A6A6A6 ; /* Make the border rounded */ border-radius: 5px; padding-left: 10px; } #checkcode{
       width: 110px; } #img_check{
       height: 32px; vertical-align: middle; } #btn_sub{
       width: 150px; height: 40px; background-color: #FFD026; border: 1px solid #FFD026 ; } .error{
       color: red; } #td_sub{
       padding-left: 100px ; } </style>

    <script> window.onload = function (){
       document.getElementById("form").onsubmit = function (){
       return checkUsername() && checkpassword(); } document.getElementById("username").onblur = checkUsername(); document.getElementById("password").onblur = checkpassword(); } function checkUsername(){
       var username = document.getElementById("username").value; var reg_username = /^\w{6,12}$/; var flag = reg_username.test(username); var s_username = document.getElementById("s_username"); if(flag){
       s_username.innerHTML = "<img src='img/gou.png' width='35px' height='25px' />" }else{
       s_username.innerHTML = " Wrong account number " } return flag; } function checkpassword(){
       var password = document.getElementById("password").value; var reg_password = /^\w{6,12}$/; var flag = reg_password.test(password); var s_password = document.getElementById("s_password"); if(flag){
       s_password.innerHTML = "<img src='img/gou.png' width='35px' height='25px' />" }else{
       s_password.innerHTML = " Wrong password " } return flag; } </script>

</head>
<body>

<div class="rg_layout">
    <div class="rg_left">
        <p> New user registration </p>
        <p>USER REGISTER</p>

    </div>

    <div class="rg_center">
        <div class="rg_form">
            <!-- Define form  form-->
            <form action="#" id="form" method="get">
                <table>
                    <tr>
                        <td class="td_left"><label for="username"> user name </label></td>
                        <td class="td_right">
                            <input type="text" name="username" id="username" placeholder=" Please enter a user name ">
                            <span id="s_username" class="error"></span>
                        </td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="password"> password </label></td>
                        <td class="td_right">
                            <input type="password" name="password" id="password" placeholder=" Please input a password ">
                            <span id="s_password" class="error"></span>
                        </td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="email">Email</label></td>
                        <td class="td_right"><input type="email" name="email" id="email" placeholder=" Please enter email address "></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="name"> full name </label></td>
                        <td class="td_right"><input type="text" name="name" id="name" placeholder=" Please enter a name "></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="tel"> cell-phone number </label></td>
                        <td class="td_right"><input type="text" name="tel" id="tel" placeholder=" Please enter your mobile number "></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label> Gender </label></td>
                        <td class="td_right">
                            <input type="radio" name="gender" value="male">  male 
                            <input type="radio" name="gender" value="female">  Woman 
                        </td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="birthday"> Date of birth </label></td>
                        <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder=" Please enter the date of birth "></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="checkcode" > Verification Code </label></td>
                        <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder=" Please enter the verification code ">
                            <img id="img_check" src="img/verify_code.jpg">
                        </td>
                    </tr>


                    <tr>
                        <td colspan="2" id="td_sub"><input type="submit" id="btn_sub" value=" register "></td>
                    </tr>
                </table>

            </form>


        </div>

    </div>

    <div class="rg_right">
        <p> There are already accounts ?<a href="#"> Login immediately </a></p>
    </div>


</div>


</body>
</html>