찾다

집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript DOM의 본질과 동작방식

JavaScript DOM의 본질과 동작방식

高洛峰
高洛峰원래의
2016-11-28 10:43:161334검색

jQuery, Prototype 및 MooTools와 같은 일부 현재 JavaScript 프레임워크가 프런트 엔드 개발 효율성을 향상시키고 브라우저 호환성 문제를 잘 해결할 수 있지만 여전히 JavaScript 기술에 견고한 기반을 마련해야 합니다. 이 기사에서는 JavaScript와 DOM(문서 개체 모델)의 본질을 소개합니다.

JavsScript는 다양한 환경에서 사용할 수 있는 동적이며 느슨한 형식의 프로토타입 기반 프로그래밍 언어입니다. 널리 사용되는 웹 클라이언트 프로그래밍 언어일 뿐만 아니라 IDE 플러그인, PDF 파일 또는 다른 플랫폼에 대한 더욱 추상적인 개념에도 사용될 수 있습니다.

JavaScript는 Netscape의 Brendan Eich가 만든 ECMAScript 표준(ECMA-262)을 기반으로 하는 언어입니다. 원래 이름은 LiveScript였지만 나중에 JavaScript로 변경되었습니다. 이는 많은 사람들이 Java와 혼동하는 이유 중 하나입니다. 다음은 일부 기능에 대한 자세한 설명입니다.

◆동적 프로그래밍 언어는 런타임에 실행되며 컴파일되지 않습니다. 이 때문에 JavaScript는 때때로 진정한 프로그래밍 언어가 아닌 스크립팅 언어로 간주됩니다(분명히 오해).

◆느슨한 유형의 언어에는 강력한 유형 시스템이 필요하지 않습니다(JavaScript와 달리). 변수를 선언할 때 'int'(정수)와 같은 것을 선언해야 합니다. JavaScript와의 차이점은 유형을 지정할 필요가 없다는 것입니다.

◆JavaScript에서는 상속과 유사한 효과를 얻기 위해 프로토타입을 사용하지만 JavaScript는 클래스를 지원하지 않습니다.

◆자바스크립트도 함수를 우선순위 객체로 취급하는 함수형 언어입니다. 이는 람다 개념을 기반으로 합니다.

위 개념을 이해하는 것은 자바스크립트 기술을 배우는 것과 별로 관련이 없습니다. 이는 모든 사람에게 JavaScript에 대한 예비적이고 정확한 이해와 JavaScript와 다른 프로그래밍 언어 간의 본질적인 차이점을 제공합니다.

문서 개체 모델

일반적으로 DOM이라고 하는 문서 개체 모델(Document Object Model)은 웹 사이트 콘텐츠와 JavaScript 간의 인터페이스입니다. JavaScript가 가장 일반적으로 사용되는 언어가 되었기 때문에 JavaScript와 DOM은 별도의 개체로 취급되는 경우가 많습니다. DOM 인터페이스는 HTML 및 XML 문서에 액세스하고 탐색하고 제어하는 ​​데 사용됩니다.

다음은 DOM에 대해 알아야 할 몇 가지 중요한 사항입니다.

◆Window 개체는 전역 개체이므로 "window"를 사용하여 액세스하려고 합니다. Window 객체에는 실행할 모든 JavaScript 코드가 포함되어 있습니다. 모든 객체가 속성과 메소드를 포함하는 것과 마찬가지로

◆속성은 객체 아래에 저장되는 변수입니다. 웹 페이지에서 생성된 모든 변수는 창 개체의 속성이 됩니다.

◆메서드는 객체 아래에 저장되는 함수입니다. 모든 함수는 창 개체 아래에 저장되지만 '메서드'를 사용하여 참조할 수 있습니다.

◆DOM은 웹 문서 구조를 기준으로 계층 구조를 생성하며, 계층은 노드로 구성됩니다. 다양한 유형의 DOM 노드가 있으며 그 중 가장 중요한 것은 '요소', '텍스트' 및 '문서'입니다.

◆'Element' 노드는 페이지의 요소를 나타내므로 페이지에 단락 요소('e388a4556c0f65e1904146cc1a846bee')가 있는 경우 DOM 노드를 통해 해당 요소에 액세스할 수 있습니다.

◆'Text' 노드는 페이지(요소 내)의 모든 텍스트를 나타내므로 페이지의 단락에 일부 텍스트 내용이 있으면 DOM 노드를 통해 액세스할 수 있습니다.

◆'Document' 노드는 전체 문서를 나타냅니다. (DOM 트리의 루트 노드입니다)

◆ 또한 요소 속성은 DOM 노드 자체라는 점에 유의하세요.

◆다른 레이아웃 엔진은 DOM 표준 실행에 있어서 일정한 차이가 있습니다. 예를 들어, Gecko 레이아웃 엔진을 사용하는 FireFox 브라우저는 성능이 좋지만(W3C 사양을 완전히 준수하지는 않습니다), Trident 엔진을 사용하는 IE는 버그가 많고 DOM 표준이 불완전한 것으로 알려져 있습니다. 이것이 프론트엔드 개발의 문제점 중 하나입니다.

웹 페이지의 JavaScriptScript 요소

웹 사이트에서 JavaScript를 사용하려면 이를 스크립트 요소에 포함해야 합니다. 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.php.cn">  
   <html xmlns="http://www.php.cn">   
   <head>   
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
      <title>JavaScript!</title>   
  </head>   
  <body>   
    
    <script type="text/javascript">   
    // <![CDATA[ 
          
    // ]]>   
    </script>   
          
  </body>   
</html>

보시다시피 문서 아래에는 스크립트 요소가 있습니다. 사실 엄밀히 말하면 type 속성을 "application/javascript"로 설정해야 하는데 예상대로 IE 브라우저에서는 제대로 동작하지 않기 때문에 혹시나 하는 마음에 "text/javascript"를 사용하거나 type 속성을 사용하지 않습니다. 코드 W3C 사양 확인에 대해 그렇다면 전자("text/javascript")를 사용하는 것이 좋습니다.

defer 속성

script 요소의 JavaScript 코드는 페이지 읽기 프로세스 중에 실행됩니다. 유일한 예외는 script 요소에 defer 속성이 있는 경우입니다. 기본적으로 브라우저는 스크립트 요소를 발견하면 문서 구문 분석을 계속하기 전에 코드를 중지하고 실행합니다. defer 속성은 코드에 문서화되지 않은 코드가 포함되어 있으며 나중에 실행할 수 있음을 브라우저에 알려줍니다. 유일한 문제는 IE에서만 사용할 수 있다는 것입니다. 따라서 사용하지 말고 이해하도록 노력해야 합니다.

외부 스크립트 연결

외부 스크립트 파일에 연결하려면 파일 주소가 포함된 src 속성을 스크립트 요소에 추가하기만 하면 됩니다. 스크립트 파일을 분리하고 독립적으로 호출하는 것은 실제로 인라인 스크립트보다 더 나은 아이디어입니다. 즉, 브라우저가 파일을 캐시할 수 있으므로 CDATA 넌센스에 대해 걱정할 필요가 없습니다.

2f34f031b3620238f37bc8100a7d9b972cacc6d41bbb37262a98f745aa00fbf0 JavaScript 필수

계속하기 전에 뭔가를 배워야 합니다. DOM에 대해 이야기하기 JavaScript의 기본 사항을 이해하는 데 어려움이 있더라도 걱정하지 마십시오. 조만간 알게 될 것입니다. JavaScript에는 숫자, 문자열, 부울, 개체, 정의되지 않음 및 Null 등 다양한 유형의 값이 있습니다. 한 줄 주석은 두 개의 슬래시(//)를 사용하며 이 줄 내의 모든 내용은 주석 내용으로 이해됩니다. 여러 줄 주석은 '/*' 및 '*/'를 사용하여 주석 단락을 완성합니다.

숫자

자바스크립트에서는 모든 숫자 값이 부동 소수점 값으로 표현됩니다. 숫자 변수를 정의할 때 따옴표를 사용하지 마세요.

// 참고: 변수를 선언하려면 항상 'var'를 사용하세요. var leftSide = 100;
var topSide = 50;
varareaOfRectangle = leftSide * topSide;

정의한 문자열은 문자 그대로 간주되며 JavaScript에서는 이를 처리하지 않습니다. 문자열은 큰따옴표나 작은따옴표 쌍으로 둘러싸인 일련의 유니코드 문자로 구성될 수 있습니다.

var firstPart = 'Hello'; var secondPart = 'World!'

var allOfIt = firstPart + ' ' + secondPart // Hello World!
// (수학적 덧셈 연산에도 사용 가능)
Boolean

Boolean 유형은 지정된 기준이 충족되는지 확인하기 위해 조건부 판단을 내릴 때 유용합니다. 부울에는 true와 false의 두 가지 가능한 값이 있습니다. 논리 알고리즘을 사용한 비교 결과는 부울입니다.

5 === (3 + 2); // = true // 변수에 대한 부울 값을 선언할 수 있습니다:

var VeryTired = true

// 이렇게 테스트할 수 있습니다. :
if (veryTired) {
// 코드
}
위에 보이는 '==='는 비교 연산자이며 이에 대해서는 나중에 설명하겠습니다.

함수

함수는 특화된 객체입니다.

// 함수 연산을 사용하여 새 함수를 만듭니다. function myFunctionName(arg1, arg2) {

// 함수 코드는 다음과 같습니다.

}

// 함수 이름을 생략하면 "익명 함수"가 생성됩니다.
function(arg1, arg2) {
// 함수의 코드는 다음과 같습니다.
}

// 함수를 실행하려면 참조를 만들고 괄호를 사용하면 됩니다(매개변수 포함).
myFunctionName(); // 매개변수 없음
myFunctionName('foo', 'bar') // 매개변수 포함

// 변수를 선언하지 않고도 함수를 실행할 수도 있습니다

(function(){
// 이른바 자기 호출 익명 함수입니다
})( );
배열

배열도 모든 양의 데이터를 포함할 수 있는 특수 객체입니다. 배열의 데이터에 액세스하려면 배열의 "인덱스"를 참조하는 숫자를 사용해야 합니다.

// 배열을 선언하는 두 가지 방법, // 리터럴:

var Fruit = ['apple', 'lemon', 'banana']


// 배열 생성자 사용 :
var Fruit = new Array('apple', 'lemon', 'banana')

fruit[0] // 배열의 첫 번째 데이터 항목(apple)에 액세스
Fruit[1]; // 배열의 두 번째 데이터 항목에 액세스(레몬)
fruit[2]; // 배열의 세 번째 데이터 항목에 액세스(바나나)
Object

객체는 이름이 지정된 값 모음(키-값 쌍)으로, 유일한 차이점은 각 데이터 값에 이름을 지정할 수 있다는 것입니다.

// 객체를 선언하는 두 가지 방법 " "

// 리터럴(중괄호):

var profile = { "
" name: 'Li',
" age : 23,
직업: '웹 개발자'
};

// 적용 가능한 객체 생성자:
var profile = new Object()
profile.name = 'Li' ;
profile.age = 23;
profile.job = '웹 개발자';
if/else 문

if/else 문은 JavaScript에서 가장 일반적인 구조입니다. 다음과 같습니다:

var legalDrinkingAge = 21; var yourAge = 23;

if ( yourAge >= legalDrinkingAge )

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：자바스크립트 객체가 존재하는지 확인하는 10가지 방법다음 기사：자바스크립트 객체가 존재하는지 확인하는 10가지 방법

관련 기사

더보기