1. 요소 찾기 :
document.getElementById ( "id"); ID에 따라 찾아서 최대를 찾으십시오.
var a = docunment.getElementById ( "id"); 발견 된 요소를 변수에 배치하십시오.
document.getElementsByName ( "name"); 이름에 따라 찾아서 배열이 발견됩니다.
document.getElementsByTagName ( "name"); 태그 이름에 따라 배열을 찾으십시오.
document.getElementsByClassName ( "Name") ClassName에 따라 찾아서 배열이 발견됩니다.
2. 운영 컨텐츠 :
1. 비 형식 요소 :
(1) 콘텐츠 얻기 :
경고 (a.innerhtml); 태그의 HTML 코드 및 텍스트가 얻어지고 태그의 모든 내용이 얻어집니다.
예를 들어, 신체에는 그러한 div가 있습니다.
<div id = "me"> <b> 시도해보십시오 </b> </div>
InnerHTML을 사용하여 DIV에서 내용을 스크립트로 가져옵니다.
var a = document.getElementById ( "me");
경고 (a.innerhtml);
결과는 다음과 같습니다.
경고 (a.innertext); 내부에서만 텍스트를 가져 가십시오
경고 (A.outerhtml); 태그 자체의 내용을 포함합니다 (간단한 이해)
(2) 콘텐츠 설정 :
a.innerhtml = "<font color = red> hello world </font>";
결과가 설정 컨텐츠 코드와 함께 다음과 같이 DIV의 컨텐츠가 대체됩니다.
a.innertext는 그대로 컨텐츠를 제시합니다
명확한 내용 : 빈 문자열을 할당하십시오
2. 양식 요소 :
(1) 콘텐츠를 얻는 두 가지 방법이 있습니다.
var t = document.f1.t1; 양식 양식 양식 ID는 F1에서 T1로 입력됩니다.
var t = document.getElementById ( "id"); ID로 직접 가져옵니다.
경고 (t. value); 입력에서 값 값을 가져옵니다.
경고 (t.innerhtml); 여기에서 값을 얻으십시오 <textRea> </textRea>;
(2) 내용 설정 : T.Value = "컨텐츠 변경";
3. 작은 지식 요점 :
<a href = "http://www.baidu.com"onclick = "return false"> Baidu로 돌아갑니다 </a>; 리턴 플라스가 추가되면 점프하지 않으면 기본값이 반환됩니다. 버튼도 마찬가지입니다. 버튼에 리턴 플라스가 설정되면 제출이 이루어지지 않습니다. 이것은 제출 점프를 제어하는 데 사용할 수 있습니다.
3. 작동 속성
먼저 요소의 ID를 사용하여 요소를 찾고 변수에 저장하십시오.
var a = document.getElementById ( "id");
그런 다음 요소의 속성에서 작동 할 수 있습니다.
A.setAttribute ( "속성 이름", "속성 값"); 속성을 설정하고 추가 또는 변경하십시오.
a.getAttribute ( "속성 이름"); 속성의 값을 얻으십시오.
a.removeattribute ( "속성 이름"); 속성을 제거하십시오.
예 1 : 질문을하십시오. 입력 답변이 올바른 경우 올바르게 나타나고 오류가 오류가 나타납니다.
다음은 텍스트에 작성된 DAAN 속성이며, 여기에는 답변 값이 포함되어 있습니다. 답을 확인하기 위해 클릭하면 Cheak의 내용 입력은 답과 동일합니다.
신체 코드 :
<양식> 몇 년 동안 중국 공화국의 창립은? <입력 유형 = "text"daan = "1912"value = ""id = "t1"name = "t1" /> <입력 유형 = "버튼"onclick = "check ()"id = "t2"name = "t2"value = "답변 확인" /> < /form>
JS의 코드 :
함수 check () {var a = document.getElementById ( "t1"); var a1 = a.Value; var a2 = a.getAttribute ( "daan"); if (a1 == a2) {alert ( "올바른 답변을 축하합니다!"); } else {alert ( "idiot!"); }}결과 대답이 올바른 경우 결과 :
예 2 : 동의 버튼, 카운트 다운에서 10 초, 동의 버튼이 제출 될 수 있습니다. 여기서는 조작 속성 : 비활성화 된 버튼 상태를 변경하는 데 사용됩니다. 비활성화 된 경우 = "비활성화"를 사용할 수 없습니다.
신체 코드 :
<form> <입력 유형 = "제출"id = "b1"name = "b1"value = "convers (10)"disabled = "disabled" /> < /form>
JS의 코드 :
var n = 10; var a = document.getElementById ( "b1"); function bian () {n-; if (n == 0) {a.removeattribute ( "disabled"); a.value = "동의"; 반품; } else {a.value = "동의 ("+n+")"; Window.settimeout ( "bian ()", 1000); }} window.settimeout ( "bian ()", 1000);실행 결과 :
4. 운영 스타일
먼저 요소의 ID를 사용하여 요소를 찾고 변수에 저장하십시오.
var a = document.getElementById ( "id");
그런 다음 요소의 속성에서 작동 할 수 있습니다.
에이. ; 이 ID 스타일의 속성을 작동하십시오.
스타일은 CSS의 스타일이며 모든 스타일은 코드로 작동 할 수 있습니다.
document.body.style.backgroundColor = "색상"; 전체 창의 배경색.
작동 스타일의 클래스 : A.className = "스타일 시트의 클래스 이름"은 스타일의 배치를 작동합니다.
예 1 : 디스플레이 사진의 자동 및 수동 전환;
본문의 코드, 배경 이미지와 양쪽에 객체를 제어하는 DIV를 만들기위한 코드 :
<div id = "tuijian"style = "background-image : url (imges/tj1.jpg);"> <div id = "p1"onclick = "dodo (-1)"> </div> <div id = "p2"onclick = "dodo (1)"> </div.
스타일 시트의 코드 :
<스타일 유형 = "text/css"> *{마진 : 0px 자동; 패딩 : 0px; Font-Family : "Microsoft Yahei"; } #tuijian {너비 : 760px; 높이 : 350px; 배경 반복 : 비 반복; } .Pages {top : 200px; 배경색 :#000; 배경 위치 : 센터; 배경 반복 : 비 반복; 불투명도 : 0.4; 너비 : 30px; 높이 : 60px; } #p1 {background-image : url (imges/prev.png); 플로트 : 왼쪽; 여백 : 150px 0px 0px 10px; } #p2 {배경-이미지 : url (imges/next.png); 플로트 : 오른쪽; 여백 : 150px 10px 0px; } </style>JS의 코드는 주로 배경 이미지의 스타일을 수정하기 위해 3 초마다 Huan () 함수를 호출합니다. 왼쪽 및 오른쪽 스위치를 클릭하면 수동으로 전환되고 자동 스위치가 중지됩니다.
<script language = "javaScript"> var jpg = new Array (); jpg [0] = "url (imges/tj1.jpg)"; jpg [1] = "url (imges/tj2.jpg)"; if (xb == jpg.length) {xb = 0; } tjimg.style.backgroundimage = jpg [xb]; if (n == 0) {var id = window.settimeout ( "huan ()", 3000); }} 함수 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>효과는 다음과 같습니다.
5. 관련 요소 작업 :
var a = document.getElementById ( "id"); 찾기;
var b = a.nextsibling, A의 다음 피어 요소를 찾고, 공백에주의를 기울이십시오.
var b = a.previoussibling, a의 이전 피어 요소를 찾고, 공백을 포함하는 것에주의를 기울이십시오.
var b = a.parentNode, a의 이전 상위 요소를 찾으십시오.
var b = a.childnodes, 배열이 발견되고 A의 다음 수준의 자식 요소가 발견됩니다.
var b = A.FirstChild, 첫 번째 자녀 요소, LastChild Last, Childnodes [n] 첫 번째 수를 찾으십시오.
경고 (노드 [i] 텍스트 인스턴스); 텍스트 여부를 결정하고, 플레인이 아닌 true를 반환하고, 값이 False인지 확인하고 공백을 제거 할 수 있습니다.
6. 요소의 생성, 추가 및 삭제 :
var a = document.getElementById ( "id"); 찾기;
var obj = document.createElement ( "tag name"); 요소를 만듭니다
obj.innerhtml = "Hello World"; 추가 할 때는 먼저 요소를 만들어야합니다.
A.AppendChild (OBJ); a에 자식 요소를 추가하십시오.
A.RemoveChild (OBJ); 자식 요소를 삭제하십시오.
A.SelectedIndex 목록에서 : 선택된 수;
//a.options=a.selectIndex] 인덱스에 따라 첨자 옵션에서 옵션 개체를 제거합니다.
7. 문자열 작동 :
var s = new String (); 또는 var s = "aaaa";
var s = "Hello World";
경고 (s.tolowercase ()); ToupperCase ()에 소문자로 대문자로
경고 (s.substring (3,8)); 세 번째 포지션에서 8 위로 가로 웁니다
경고 (s.substr (3,8)); 세 번째 위치에서 가로 채기 시작하고 길이가 8자를 가로 채며 다음 숫자를 끝까지 쓰지 마십시오.
s.split ( ''); 지정된 문자에 따라 문자를 분해하고 배열에 넣고 자동으로 정렬하십시오.
S.length는 속성입니다
s.indexof ( "World"); 문자열에서 세계 최초의 발생은 -1을 반환하지 않습니다.
s.lastindexof ( "O"); o String에서 s.lastindexof ( "O")의 마지막 발생; o
8. 날짜 및 시간 작동
var d = 새로운 날짜 (); 현재 시간
D. SETILLYEAR (2015,11,6);/*설정하려는 달에 1 개의 설정*/
D. GetLyLyER : 1 년을 보냅니다.
D. getmonth () : 달을 찍고, 당신이 얻는 것들이 더 적어집니다.
D. getDate () : 하늘을 타십시오.
d.getday () : 요일을 찍습니다
d.gethours () : 시간을 내십시오.
d.getMinutes () : 몇 분이 걸립니다. d.getSeconds () : 몇 초가 걸립니다
d.setlyear () : 연도를 설정하고 달을 설정할 때 -1에주의를 기울이십시오.
9. 수학적 함수의 작동
Math.ceil (); 현재 소수점보다 가장 작은 정수
Math.floor (); 작은 물고기의 현재 십진수 수의 가장 큰 정수
Math.sqrt (); 제곱을 엽니 다
math.round (); 둥근(); 둥근
Math.random (); 임의 번호, 0-1 사이
10. 몇 가지 팁
외부의 이중 인용문과 내부의 이중 인용문은 단일 따옴표로 변경됩니다.
DIV에서 행 높이를 설정할 때 설정이 아무리 높아도 점유 행은 기본적으로 중간 위치에 있습니다 (DIV- [기본값]의 상단 및 하단 영역의 중간 및 수직 중앙).
텍스트 상자에서 찍은 값은 문자열이므로 parseint ()를 사용하여 숫자로 변환해야합니다.
S.match (reg); s는 문자열을 나타내고, Reg는 문자열을 나타내고, 두 경기를 나타냅니다. 두 줄이 일치하지 않으면 널이 반환됩니다.
JavaScript-Dom Operation-Window.document 객체에 대한 위의 자세한 설명은 내가 공유하는 모든 내용입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.