1. Find the elements:
document.getElementById("id"); find according to id, and find at most one;
var a =docunment.getElementById("id"); Place the found element in the variable;
document.getElementsByName("name"); find according to name, and the array is found;
document.getElementsByTagName("name"); find the array according to the tag name;
document.getElementsByClassName("name") Find according to classname, and the array is found;
2. Operation content:
1. Non-form elements:
(1) Obtain content:
alert(a.innerHTML); The html code and text in the tag are obtained, and all the contents in the tag are obtained.
For example: There is such a div in the body:
<div id="me"><b>Try it</b></div>
Use innerHTML to get the content in the div in script:
var a= document.getElementById("me");
alert(a.innerHTML);
The results are as follows:
alert(a.innerText); only take the text inside
alert(a.outerHTML); includes the content of the tag itself (simple understanding)
(2) Set content:
a.innerHTML = "<font color=red >hello world </font>";
If the result is as follows with the setting content code, the content in the div is replaced:
a.innerText will present the content as it is
Clear content: Assign an empty string
2. Form elements:
(1) There are two ways to obtain content:
var t = document.f1.t1; form form form form ID is input with t1 in f1;
var t = document.getElementById("id"); Get it directly with ID.
alert(t.value); gets the value value in input;
alert(t.innerHTML); Get the value here <textarea></textarea>;
(2) Set content: t.value="Content Change";
3. A little knowledge point:
<a href="http://www.baidu.com" onclick ="return false">Turn to Baidu</a>; if return flase is added, it will not jump, the default is return true will jump. The same is true for buttons. If return flase is set in the button, the submission will not be made. This can be used to control the submission jump.
3. Operation properties
First, use the element's ID to find the element and store it in a variable:
var a = document.getElementById("id");
Then you can operate on the properties of the element:
a.setAttribute("attribute name", "attribute value"); Set an attribute, add or change it;
a.getAttribute("attribute name"); get the value of the attribute;
a.removeAttribute("attribute name"); remove an attribute.
Example 1: Do a question. If the input answer is correct, it will pop up correctly, and the error will pop up errors;
Here is a daan attribute written in the text, which contains the answer value. When clicking to check the answer, the content input by cheak is the same as the answer:
Code in Body:
<form>In what year was the founding of the Republic of China? <input type="text" daan="1912" value="" id="t1" name="t1" /><input type="button" onclick="check()" id="t2" name="t2" value="check the answer" /></form>
Code in JS:
function check() { var a=document.getElementById("t1"); var a1=a.value; var a2=a.getAttribute("daan"); if(a1==a2) { alert("Congratulations for answering correctly!"); } else { alert("Idiot!"); } }Results when the answer is correct:
Example 2: The agree button, countdown to 10 seconds, the agree button becomes submitable. Here, the operation attribute: disabled is used to change the state of the button. When disabled="disabled" is not available.
Code in body:
<form><input type="submit" id="b1" name="b1" value="Agree (10)" disabled="disabled" /></form>
Code in JS:
var n=10;var a= document.getElementById("b1");function bian() { n--; if(n==0) { a.removeAttribute("disabled"); a.value="Agree"; return; } else { a.value= "Agree ("+n+")"; window.setTimeout("bian()",1000); } } window.setTimeout("bian()",1000);Results of the run:
4. Operation style
First, use the element's ID to find the element and store it in a variable:
var a = document.getElementById("id");
Then you can operate on the properties of the element:
a. ; Operate the properties of this ID style.
The style is a style in CSS, and all styles can be operated with code.
document.body.style.backgroundColor="Color"; background color of the entire window.
class of operation style: a.className="classname in style sheet" operates a batch of styles
Example 1: Automatic and manual switching of display pictures;
The code in Body, to make a div with background image and control objects on both sides:
<div id="tuijian" style=" background-image:url(imges/tj1.jpg);"> <div id="p1" onclick="dodo(-1)"></div> <div id="p2" onclick="dodo(1)"></div></div>
Code in stylesheet:
<style type="text/css"> *{ margin:0px auto; padding:0px; font-family:"Microsoft Yahei"; } #tuijian{ width:760px; height:350px; background-repeat:no-repeat; } .pages{ top:200px; background-color:#000; background-position:center; background-repeat:no-repeat; opacity: 0.4; width: 30px; height:60px; } #p1{ background-image:url(imges/prev.png); float:left; margin:150px 0px 0px 10px; } #p2{ background-image:url(imges/next.png); float:right; margin:150px 10px 0px; } </style>The code in JS mainly calls the huan() function every 3 seconds to modify the style of the background image. When clicking the left and right switch, it will be manually switched, and the automatic switch stops:
<script language="javascript">var jpg =new Array(); jpg[0]="url(imges/tj1.jpg)";jpg[1]="url(imges/tj2.jpg)";jpg[2]="url(imges/tj3.jpg)";var tjimg = document.getElementById("tuijian");var xb=0;var n=0;function huan() { xb++; if(xb == jpg.length) { xb=0; } tjimg.style.backgroundImage=jpg[xb]; if(n==0) { var id = window.setTimeout("huan()",3000); } }function dodo(m) { n=1; xb = xb+m; if(xb < 0) { xb = jpg.length-1; } else if(xb >= jpg.length) { xb = 0; } tjimg.style.backgroundImage=jpg[xb]; } window.setTimeout("huan()",3000);</script>The effect is as follows:
5. Related element operations:
var a = document.getElementById("id"); find a;
var b = a.nextSibling, find the next peer element of a, pay attention to containing spaces;
var b = a.previousSibling, find the previous peer element of a, pay attention to containing spaces;
var b = a.parentNode, find the previous parent element of a;
var b = a.childNodes, the array is found, and the next level child element of a is found;
var b = a.firstChild, the first child element, lastChild last, childNodes[n] find the number of the first;
alert(nodes[i] instanceof Text); determine whether it is text, returns true, not flase, use if to determine whether its value is false, and you can remove spaces.
6. Creation, addition, and deletion of elements:
var a = document.getElementById("id"); find a;
var obj = document.createElement("tag name"); create an element
obj.innerHTML = "hello world"; When adding, you need to create an element first.
a.appendChild(obj);Add a child element to a.
a.removeChild(obj); delete a child element.
a.selectedIndex in the list: the number of selected;
//a.options[a.selectIndex] Remove the option object from the subscript according to the index.
7. String operation:
var s = new String(); or var s = "aaaa";
var s = "hello world";
alert(s.toLowerCase()); to lowercase toUpperCase() to uppercase
alert(s.substring(3,8)); intercept from the third position to the eighth position
alert(s.substr(3,8)); starts to intercept from the third position, intercept eight characters in length, and do not write the following numbers to the end.
s.split(''); Disassemble the characters according to the specified characters, put them into an array, and automatically sort them
s.length is the property
s.indexOf("world");world's first occurrence in the string does not return -1
s.lastIndexOf("o");o where the last occurrence of s.lastIndexOf("o");o in the string
8. Date and time operation
var d = new Date(); current time
d.setFullYear(2015,11,6);/*Subtract 1 setting on the month you want to set*/
d.getFullYear: Take the year;
d.getMonth(): Take the month, and the fewer ones you get are taken out;
d.getDate(): Take the sky;
d.getDay(): Take the day of the week
d.getHours(): Take the hour;
d.getMinutes(): Take minutes; d.getSeconds(): Take seconds
d.setFullYear(): Set the year and pay attention to -1 when setting the month.
9. Operation of mathematical functions
Math.ceil(); The smallest integer greater than the current decimal
Math.floor(); The largest integer of the current decimal number of the small fish
Math.sqrt(); open squared
Math.round(); round(); round
Math.random(); Random number, between 0-1
10. Some tips
Double quotes outside, and double quotes inside are changed to single quotes;
When setting the row height in the div, no matter how high the setting is, the occupied row is in the middle position by default (the middle of the upper and lower areas of the div - [Default] vertically centered).
The value taken out of the text box is a string, and needs to be converted into a number using parseint().
s.match(reg); s represents a string, reg represents a string, and the two match. If the two strings do not match, a null is returned.
The above detailed explanation of JavaScript-DOM operation-Window.document object is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.