집 > 기사 > 웹 프론트엔드 > 타이머 및 DOM 문서의 JavaScript 전체 요약

타이머 및 DOM 문서의 JavaScript 전체 요약

jacklove원래의: 2018-05-21 14:33:351539검색

JavaScript를 학습하는 과정에서 타이머, DOM 등 많은 문제에 직면하게 됩니다. 이 기사에서는 관련 문제를 자세히 설명합니다.

JavaScript에는 두 가지 유형의 타이머가 있습니다. 하나는 setTimeout()이고 다른 하나는 setTimeout()입니다.

setTimeout()

setTimeout 함수는 특정 기능이나 특정 부분이 끝난 후 몇 밀리초를 지정하는 데 사용됩니다. 코드를 구현합니다. 나중에 타이머를 취소하는 데 사용할 수 있는 타이머 번호를 나타내는 정수를 반환합니다.
var 타이머Id = setTimeout(func|code, Delay)

위 코드에서 setTimeout 함수는 두 개의 매개변수를 받습니다. 첫 번째 매개변수 func|code는 지연될 함수의 이름 또는 코드 조각이고, 두 번째 매개변수는 딜레이 매개변수는 실행할 지연 시간입니다.

실행을 연기하는 코드는 문자열 형태로 setTimeout에 넣어야 한다는 점에 유의해야 합니다. 왜냐하면 엔진은 내부적으로 eval 함수를 사용하여 문자열을 코드로 변환하기 때문입니다.
연기된 실행이 함수인 경우 함수 이름을 setTimeout에 직접 넣을 수 있습니다. 한편으로 eval 함수는 보안 문제를 가지고 있으며, 다른 한편으로는 JavaScript 엔진이 코드를 최적화할 수 있도록 하기 위해 setTimeout 메소드는 일반적으로 아래와 같이 함수 이름의 형식을 취합니다.

function f(){  console.log(2);}setTimeout(f,1000);// 或者setTimeout(function (){console.log(2)},1000);
setInterval()
setInterval函数的用法与setTimeout完全一致，区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行。
clearTimeout()，clearInterval()

setTimeout和setInterval函数，都返回一个表示计数器编号的整数值，将该整数传入clearTimeout和clearInterval函数，就可以取消对应的定时器。
var id1 = setTimeout(f,1000);var id2 = setInterval(f,1000);

clearTimeout(id1);
clearInterval(id2);

setTimeout和setInterval返回的整数值是连续的，也就是说，第二个setTimeout方法返回的整数值，将比第一个的整数值大1。利用这一点，可以写一个函数，取消当前所有的setTimeout。

(function() {  var gid = setInterval(clearAllTimeouts, 0);  function clearAllTimeouts() {    var id = setTimeout(function() {}, 0);    while (id > 0) {      if (id !== gid) {
        clearTimeout(id);
      }
      id--;
    }
  }
})();```

위 코드를 실행한 후 모든 setTimeout 설정은 실제로 유효하지 않습니다. ###setTimeout 및 setInterval의 작동 메커니즘은 다음과 같습니다. 1. 지정된 코드를 이 실행 밖으로 이동하고 이벤트 루프의 다음 라운드까지 기다린 후 지정된 시간에 도달했는지 확인합니다. 2. 도착하면 해당 코드를 실행하고, 도착하지 않으면 다음 이벤트 루프까지 기다려 재심사합니다.

이것은 이번에 실행된 코드가 모두 실행될 때까지 setTimeout에 지정된 코드가 실행되지 않는다는 의미입니다.

setTimeout의 기능은 지정된 시간까지 코드 실행을 연기하는 것입니다. 즉, setTimeout(f,0)은 즉시 실행되지 않습니다. )는 두 번째 매개변수를 0으로 설정합니다. 이 함수는 기존 작업(스크립트의 동기화 작업 및 "작업 대기열"의 기존 이벤트)이 종료되자마자 f가 실행되도록 허용하는 것입니다. 즉, setTimeout(f,0)의 기능은 지정된 작업을 최대한 빨리 실행하는 것입니다. #DOM>이전에는 기본적으로 js의 구문에 대해 이야기했지만 이제는 html과 js를 결합합니다.
문서 개체 모델(DOM)은 HTML 및 XML 문서용 프로그래밍 인터페이스입니다. 이는 문서의 구조화된 표현(구조 트리)을 제공하고 프로그램이 구조 트리에 액세스하여 문서의 구조, 스타일 및 내용을 변경할 수 있는 방법을 정의합니다.

DOM은 속성과 메서드를 포함하는 노드와 객체의 구조화된 그룹으로 문서를 표현하는 방법을 제공합니다. 기본적으로 웹페이지를 스크립트나 프로그래밍 언어에 연결합니다.
![](http://upload-images.jianshu.io/upload_images/961879-30d442b188b865e3.gif?imageMogr2/auto-orient/strip) 페이지의 내용을 변경하려면 JavaScript가 HTML의 모든 정보를 가져와야 합니다. document 요소가 액세스하기 위한 진입점입니다. HTML 요소를 추가, 이동, 변경 또는 제거하기 위한 메소드 및 속성과 함께 이 항목은 모두 DOM을 통해 획득됩니다. ##Document Object* 브라우저에 로드된 각 HTML 문서는 문서 객체가 됩니다. 문서 객체에는 문서의 기본 정보가 포함되어 있으며 JavaScript를 통해 HTML 페이지의 모든 요소에 액세스하고 수정할 수 있습니다. ####문서 객체의 일반적으로 사용되는 속성 문서 객체에는 문서 정보를 설명하는 많은 속성이 있습니다. 다음은 일반적으로 사용되는 몇 가지 속성입니다
* ####doctype HTML 문서를 작성할 때 일반적으로 첫 번째 문장은 doctype 문입니다. 문서 객체를 통해 얻을 수 있습니다. 그렇지 않은 경우 return null`document.doctype; // 8b05045a5be5764f313ed5b9168a17e6document.doctype.name; // "html"`* ####head、body`document .head;`
`document.body; `
이 두 속성을 통해 각각 문서의 헤드 및 본문 노드를 가져오는 방법
* ####activeElement activeElement 속성은 현재 문서에서 포커스를 받은 요소를 반환합니다.
사용자는 일반적으로 탭 키를 사용하여 포커스를 이동하고 스페이스바를 사용하여 포커스를 활성화할 수 있습니다. 예를 들어 포커스가 링크에 있는 경우 스페이스바를 누르면 링크로 이동합니다

* ####documentURI, domain, lastModifieddocumentURI 속성은 현재 문서의 URL을 반환합니다.
domain 속성은 문서의 도메인 이름을 반환합니다.
lastModified는 현재 문서의 마지막 수정 시간을 반환합니다.

* location
location 속성은 URL을 제공하는 읽기 전용 개체를 반환합니다. 현재 문서의 정보

// 현재 URL이
http://user:passwd@www.example.com:4097/path/a.html?x=111#part1
document.location.href // "http://라고 가정합니다. 사용자: passwd@www.example.com:4097/path/a.html?x=111#part1"
document.location.protocol // "http:"document.location.host // "www.example.com: 4097"
document.location.hostname // "www.example.com"
document.location.port // "4097"
document.location.pathname // "/path/a.html"document.location.search / / " ?x=111"
document.location.hash // "#part1"
document.location.user // "user"
document.location.password // "통과"
// 다른 URL로 이동
document .location.sign('http://www.google.com')
// 서버
document.location.reload(true)
// 로컬 캐시에서 다시 로드 우선순위를 지정합니다(기본값)
문서. location.reload(false)
// 다른 URL로 이동하지만 현재 문서는 기록 개체에 유지되지 않습니다.
// 즉, 뒤로 버튼을 사용하여 현재 문서로 돌아갈 수 없습니다
document.location.sign ('http:// /www.google.com')// 위치 개체를 document.location.href
document.location.toString()```

과 동일한 문자열로 변환합니다. 개체가 반환되었지만 위치 속성은 읽기 전용이지만 이 속성에 URL을 할당할 수 있으며 웹 페이지는 자동으로 지정된 URL로 이동합니다.
document.location = 'http://www.example.com';// document.location.href = 'http://www.example.com';

title, CharacterSet

title 속성과 동일합니다. 현재 문서의 제목, 이 속성은 쓰기 가능합니다.
characterSet 속성은 현재 문서를 렌더링하는 데 사용되는 문자 집합을 반환합니다.

readyState

readyState 속성은 현재 문서의 상태를 반환하며, 세 가지 가능한 값이 있습니다.
loading: HTML 로드 코드 단계, 아직 완료되지 않음 구문 분석
interactive: 외부 리소스 로드 단계
complete: 모든 로드 완료

#######compatMode
compatMode 속성은 문서 처리를 위한 브라우저 모드를 반환합니다.
BackCompat: 이전 버전과의 호환성 모드, 즉 없음 DOCTYPE
CSS1Compat 추가됨: 엄격 모드, 추가됨 DOCTYPE

#######cookie
쿠키는 클라이언트에 저장된 텍스트이며 나중에 클라이언트 저장소 장에서 소개됩니다

innerText

innerText는 쓰기 가능한 속성으로, 요소에 포함된 텍스트 내용을 반환합니다. 수준이 여러 개인 경우 내용은 얕은 것부터 깊은 것까지 순서대로 이어집니다.
e388a4556c0f65e1904146cc1a846bee ;45654bdf357c58b8a65c66d7c19c8e4d11494b3e26ee717c64999d7867364b1b4a3< ;/div>
외부 div의 innerText 반환 콘텐츠는 "123456"입니다.

innerHTML, externalHTML

innerHTML 속성은 innerText와 유사하지만 텍스트를 반환하는 대신
e388a4556c0f65e1904146cc1a846bee 123 94b3e26ee717c64999d7867364b1b4a3950c0e09a208ea6a6c67c615a801fbc6
외부 div의 innerHTML 반환 콘텐츠는 "e388a4556c0f65e1904146cc1a846bee123< ;span>45654bdf357c58b8a65c66d7c19c8e4d11494b3e26ee717c64999d7867364b1b4a3"입니다
outerHTML 반환 콘텐츠에는 자체도 포함됩니다

#######Common 문서 객체의 메소드

open(), close()
document.open 메소드를 사용하여 내용을 작성하기 위해 write 메소드에 대한 새 문서를 생성합니다. 실제로는 현재 문서를 지우고 내용을 다시 쓰는 것과 같습니다. document.close 메서드는 open 메서드로 생성된 문서를 닫는 데 사용됩니다. 일단 닫히면 쓰기 메소드는 내용을 쓸 수 없습니다.

write()

document.write 메소드는 현재 문서에 내용을 쓰는 데 사용됩니다. 현재 문서가 close 메소드를 사용하여 닫히지 않는 한, 문서에 기록된 내용은 기존 내용에 추가됩니다.

document.open();document.write("hello");document.write("world");document.close();```

1. 페이지가 렌더링된 경우 쓰기 방법은 다음과 같습니다. 호출되면 먼저 open 메소드를 호출하여 현재 문서의 모든 내용을 지운 다음 작성합니다.
2. 페이지 렌더링 중에 write 메소드가 호출되면 open 메소드가 호출되지 않습니다.
close 메소드를 호출한 후에는 write 메소드를 더 이상 사용하여 콘텐츠를 작성할 수 없지만 현재 페이지의 다른 DOM 노드는 계속 로드됩니다.
#####*특수한 상황을 제외하고는 document.write 메소드를 사용하지 않는 것이 좋습니다.

이 기사에서는 타이머와 관련된 문제를 설명합니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트를 참고하세요.

타이머 및 DOM 문서의 JavaScript 전체 요약

관련 기사