Record my journey 3 JavaScript Dom Study Notes

Next we will go on Journey 2 to continue our Dom journey. In this blog post, I have completed all the introduction of the document attribute and explained these knowledge points with a few small cases. Some of these special effects are very common. When registering a website, we will limit the time of clicking the control so that users can have enough time to read the control to register.

1. Document attribute 1

(1) document is an attribute of the window object. Because window can be omitted when a window object member is used, the document is always written.

(2) document Method

1) write: write the content to the document. writeln is similar to write, but the last carriage return is added.

<Script type = "text/javascript">

Document. write ("<a href = 'HTTP: // www. baidu/com'> baidu </a> ");

</Script>

<Input type = "button" value = "click" onclick = "document. write ('Hello ')"/>

Note: The code written in The onclick event will overwrite the page content, and the write will only be combined with the original content during page loading.

2) write is often widely used in advertising code and integrated resource code.

(3) The getElementById method (very useful) obtains the object based on the element Id. The IDs in the webpage cannot be repeated or can be referenced directly by the element Id, however, there is a problem such as the valid range. Therefore, it is not recommended to operate the object through Id, but through getElementById.

<Script type = "text/javascript">

Function btnClick (){

Var txt = document. getElementById ("textBox1 ");

// Alert (txt. value );

Alert (textBox1.value );

}

Function btnClick2 (){

Var txt = document. getElementById ("textBox2 ");

// Alert (txt. value );

// Alert (textBox2.value) // This sentence is incorrect

Alert (form1.textBox2. value );

}

</Script>

<Input type = "text" id = "textBox1"/>

<Input type = "button" value = "click" onclick = "btnClick ()"/>

<Form action = "f1f2.htm" id = "form1">

<Input type = "text" id = "textBox2"/>

<Input type = "button" value = "click" onclick = "btnClick2 ()"/>

</Form>

Note: We recommend that you use getElementById to obtain the object.

(4) getElementByName: obtains the object based on the element name. Because the names of elements on the page can be repeated, for example, multiple RadioButton names are the same, the returned value of getElementByName is an array of objects.

<Script type = "text/javascript">

Function btnClick (){

Var radios = document. getElementsByName ("gender ");

/* The code in the lower part of JS is not like the foreach in C #. Instead, it traverses the Key instead of every element.

For (var r in radios ){

Alert (r. value );

}*/

For (var I = 0; I <radios. length; I ++ ){

Var radio = radios [I];

Alert (radio. value );

}

}

</Script>

<Input type = "radio" name = "gender" value = "male"/> male <br/>

<Input type = "radio" name = "gender" value = "female"/> female <br/>

<Input type = "radio" name = "gender" value = "confidential"/> confidentiality <br/>

<Input type = "button" value = "click" onclick = "btnClick ()"/>

(5) getElementsByTagName: obtains the array of elements in the specified tag process. For example, getElementByTagName ("P") can obtain all <p> tags.

Function btnClick1 (){

Var inputs = document. getElementsByTagName ("input ");

For (var I = 0; I <inputs. length; I ++ ){

Var input = inputs [I];

Input. value = "Han Yinglong ";

}

}

<Input type = "button" value = "click" onclick = "btnClick ()"/>

<Input type = "button" value = "click"/>

<Input type = "button" value = "click"/>

<Input type = "button" value = "click" onclick = "btnClick1 ()"/>

Case 1: When you click a control, the property of the control changes. That is, the control displays "Haha ", but when we click it, it will become "Hello". When we click another one, the previous control will restore the original state.

<Script type = "text/javascript">

Function initEvent (){

Var inputs = document. getElementsByTagName ("input ");

For (var I = 0; I <inputs. length; I ++ ){

Var input = inputs [I];

Input. onclick = btnClick; // click The onclick event of the control.

}

}

Function btnClick (){

Var inputs = document. getElementsByTagName ("input ");

For (var I = 0; I <inputs. length; I ++ ){

Var input = inputs [I];

// Window. event. srcElement --> get the control that triggers the event

If (input = window. event. srcElement ){

Input. value = "Hello ";

}

Else {

Input. value = "Haha ";

}

}

}

</Script>

<Body onload = "initEvent ()">

<Input type = "button" value = "Haha"/>

<Input type = "button" value = "Haha"/>

<Input type = "button" value = "Haha"/>

</Body>

Case 2: Click the register button in the protocol text box after 10 seconds, and the clock is counted down (btn. disabled = true ).

Idea 1. Registration button initialization status unavailable, disabled

2. start the timer and setInterval. Set a global variable with an initial value of 10 and run the CountDown method once every second. In the CountDown method, the global variable is counted down, then write the value on the Registration button (please read the agreement carefully (8 seconds left ))

3. Make the Registration button available until the global variable value is <= 0, and set the text of the button to "agree ".

<Script type = "text/javascript">

Var leftSeconds = 10;

Var intervalId;

Function CountDown (){

Var btnReg = document. getElementById ("btnReg ");

If (btnReg) {// if the webpage speed is very slow, the control may not be loaded when the timer is running.

If (leftSeconds <= 0 ){

BtnReg. value = "agree ";

BtnReg. disabled = "";

ClearInterval (intervalId); // stop the timer

}

Else {

BtnReg. value = "please read the Protocol carefully (" + leftSeconds + "seconds left )";

LeftSeconds --;

}}}

IntervalId = setInterval ("CountDown ()", 1000 );

</Script>

<Body>

<Textarea> </textarea> <br/>

<Input type = "button" value = "agree" disabled = "disabled" id = "btnReg"/>

</Body>

Case 3: Add calculator, enter data in two text boxes, and click [=] to put the result of addition in the third text box.

<Script type = "text/javascript">

Function CalClick (){

Var value1 = document. getElementById ("txt1"). value;

Var value2 = document. getElementById ("txt2"). value;

Value1 = parseInt (value1, 10 );

Value2 = parseInt (value2, 10 );

Document. getElementById ("txtResult"). value = value1 + value2;

}

</Script>

<Body>

<Input type = "text" id = "txt1"/> + <input type = "text" id = "txt2"/>

<Input type = "button" onclick = "CalClick ()" value = "="/>

<Input type = "text" id = "txtResult" readonly = "readonly"/>

</Body>

Case 3: The beauty clock shows a beauty in a cycle every second (when the last second is changed to a single digit ).

<Script type = "text/javascript">

// Var now = new Date (); Do not write it here; otherwise, the obtained time remains unchanged.

Function FillTwoLen (I ){

If (I <10 ){

Return "0" + I;

}

Else {

Return I;

}

}

Function Refersh (){

Var imgMM = document. getElementById ("imgMM ");

If (! ImgMM ){

Return;

}

Var now = new Date ();

Var fileName = FillTwoLen (now. getHours () + "-" + FillTwoLen (now. getSeconds () + ". jpg ";

ImgMM. src = "images/" + fileName;

}

SetInterval ("Refersh ()", 1000 );

</Script>

<Body onload = "Refersh ()">

</Body>