집 > 기사 > 웹 프론트엔드 > JavaScript 구성 구현(BOM, DOM의 상세 해석)

JavaScript 구성 구현(BOM, DOM의 상세 해석)

亚连원래의: 2018-05-21 13:52:551493검색

이제 JavaScript 구현 방법(BOM 및 DOM에 대한 자세한 해석)에 대한 기사를 가져오겠습니다. 이제 나는 그것을 여러분과 공유하고 참고용으로 제공합니다.

우리는 완전한 JavaScript 구현이 ECMAScript(코어), BOM(브라우저 개체 모델) 및 DOM(문서 개체 모델)의 세 부분으로 구성되어야 한다는 것을 알고 있습니다.

BOM:

BOM은 브라우저 기능에 액세스하기 위한 많은 개체를 제공합니다. 이러한 기능은 웹 페이지 콘텐츠와 아무런 관련이 없습니다(이는 DOM 문제입니다). 현재 BOM은 W3C에 의해 HTML5 사양으로 이동되었습니다.

window 객체:

BOM의 핵심은 브라우저의 인스턴스를 나타냅니다. 이는 자바스크립트를 통해 브라우저 창에 액세스하기 위한 인터페이스이자 ECMAScript에 의해 지정된 전역 객체입니다. 이는 웹 페이지 객체에 정의된 객체를 의미합니다. , 변수 및 함수는 전역 개체로 창을 가지므로 paresinInt()와 같은 메서드에 액세스할 수 있습니다. (높이 3에서 발췌) 또한 웹 페이지에 프레임이 포함된 경우 각 프레임에는 자체 창 개체가 있으며 프레임 컬렉션(인덱스 0, ltr, ttb에서 시작)에 저장됩니다.

먼저 전역 실행 환경의 변수와 함수는 모두 window 객체의 속성과 메서드입니다. 물론, 전역 변수와 직접 정의된 창 속성 유형에는 약간의 차이가 있습니다. 전역 변수(정확히 말하면 명시적으로 선언된 전역 변수)는 삭제할 수 없지만 창 속성은 삭제할 수 있습니다. 추가적으로 주의할 점이 또 있습니다. 선언되지 않은 변수에 접근하려고 하면 오류가 발생하지만, 쿼리창 개체를 사용하는데는 문제가 없습니다.

그렇다면 창의 일반적인 속성이나 방식은 무엇일까요?

1.name, 각 창 개체에는 프레임 이름이 포함된 이름 속성이 있습니다. 일반적으로 창 관계와 프레임을 이해합니다.

2. 창 위치 방법: moveTo(새 위치의 x 좌표, 새 위치의 y 좌표), moveBy(x를 수평으로 이동, y를 수직으로 이동). 이 두 가지 방법은 프레임워크에 적용할 수 없습니다.

3. 창 크기 속성: innerWidth/Height(보기 영역 크기(테두리 너비 제외)/* IE, Safari, firefox */), externalWidth/Height(브라우저 창 크기 반환/*IE , Safari, Firefox */) Chrome에서는 내부 및 외부 모두 보기 영역의 크기를 반환합니다.

물론 resizeTo(새 창 너비, 새 창 높이), resizeBy(원래 너비보다 x 증가, 원래 높이보다 y 증가)를 통해 창 크기를 변경할 수 있습니다. 이 사랑 노래 방법은 프레임 구조에는 적용되지 않습니다.

4.window.open(URL, window target, attribute string, boolean 새 페이지가 브라우저 기록에 현재 로드된 페이지를 대체하는지 여부)은 특정 URL로 이동하거나 새 창을 여는 데 사용됩니다. 창 대상이 지정되고 창 대상이 기존 창이나 프레임의 이름인 경우 지정된 URL이 이름이 바뀐 창이나 프레임에 로드됩니다. 그렇지 않으면 열리는 새 창의 이름이 대상 창으로 지정됩니다. 물론, 윈도우 타겟에 지정할 수 있는 키워드로는 _self, _parent, _top, _blank 등이 있습니다.

<a href=http://www.jb51.net>click me</a>
  　　<script>
    var link=document.getElementsByTagName("a")[0];
      alert(link.nodeName);   
     window.onload=function(){
      
      link.onclick=function () {
        window.open(link.href,"good","width=400px,height=300px");
        return false;
    
      }  
    }
　　</script

여기서 특성 문자열의 특정 설정은 자세히 설명하지 않습니다. 관심이 있는 경우 여기를 클릭하세요.

5. 단일 스레드 언어로서 js에서는 여전히 시간 초과 값을 설정할 수 있습니다. 특정 이벤트 이후에 실행됨) 및 간격 시간 값(지정된 시간마다 반복됨)을 사용하여 특정 순간에 코드 실행을 예약합니다.

Timeout 호출: setTimeout(js 코드 문자열, 밀리초 시간) 단일 스레드 언어로서 js 작업 대기열은 설정된 시간 간격 후에 작업 대기열이 비어 있는 경우 한 번에 하나의 코드만 실행할 수 있습니다. 코드 문자가 실행됩니다. 그렇지 않으면 이전 코드가 실행될 때까지 기다린 후 실행하세요.

var al=setTimeout(function () {
      alert("good");
    },5000);
    alert(al); //2

여기서 익명 함수를 호출하여 5초 후에 good을 출력했는데 창에 경고 상자가 팝업되어 2가 표시되었습니다. setTimeout() 함수가 고유한 숫자 ID를 반환하는 것을 볼 수 있습니다. 이 ID를 사용하여 시간 초과 호출을 지울 수 있으며, clearTimeout(ID)을 사용하여 이를 지울 수 있습니다.

간접 호출: setInterval()은 setTimeout()과 동일한 매개변수를 허용하고 숫자 ID도 반환하며, 이는clearTimeout()을 사용하여 지울 수 있습니다.

6. 시스템 대화 방법: 경고(), 확인(), 프롬프트() 등 이전 블로그에 썼는데 여기를 클릭하세요.

위치 개체

는 BOM의 개체가 아닙니다. Location은 window 객체에 있는 속성이라고 합니다. 물론 나중에 설명할 DOM에 있는 document 객체의 속성이기도 합니다. 즉, window.location과 document.location은 동일한 객체를 참조합니다.

위치 개체 속성 목록. 이러한 속성을 수정하면 새 페이지를 로드하고 기록에 새 레코드를 생성할 수 있습니다. location.replace()를 사용하면 기록에 새 레코드가 생성되지 않습니다.

hash	"#contents"	URL에 해시를 반환합니다. ""
host	"www.google.com "	서버 이름과 포트 번호를 반환합니다(사용 가능한 경우)
hostname	"www.google.com"	포트 번호 없이 서버 이름을 반환합니다
href	"www.google.com"	은 할당()
pathname	''/wileyCDA/'	을 호출하여 현재 페이지의 전체 URL을 반환합니다. 반품 디렉터리 이름
port	"8080"	포트 번호를 반환하고 그렇지 않은 경우 빈 문자열을 반환합니다
protocol	"http:"	페이지에서 사용하는 프로토콜로 돌아가기
search	"?=javascript"	물음표로 시작하는 쿼리 문자열을 반환

navigator 객체: 브라우저를 식별하기 위한 사실상의 표준입니다. 해당 속성과 메서드는 주로 브라우저 유형을 감지하는 데 사용됩니다.

이력 객체(기록 기록 저장), 화면 객체(클라이언트의 기능을 나타냄) 등 나머지 부분은 js 프로그래밍에 유용하지 않으므로 자세히 설명하지 않습니다.

-------------------------------------- ---------------------

DOM:

DOM은 XML을 기반으로 하며 HTML API용으로 확장된 DOM은 노드 트리 확장에 의존합니다.

우선 문서 노드가 각 노드의 루트 노드라는 점을 분명히 해야 합니다. 문서 노드에는 html 요소(문서 요소)인 하위 노드가 하나만 있습니다.

노드 유형:

모든 DOM 노드 유형(텍스트 노드, 속성 노드, 요소 노드)으로 구현되는 DOM1의 인터페이스. 이 인터페이스는 js에서 노드 유형으로 구현됩니다.

nodeType 속성은 모든 노드가 소유합니다. 12개의 숫자 값으로 표시됩니다(element--1, attribute--2, text--3...

nodeName 속성). 요소 노드의 경우 nodeName 값은 레이블 이름입니다.

nodeValue 속성, 요소 노드의 경우 nodeValue 값은 null입니다.

노드 관계: 각 노드에는 childNodes 속성이 있으며 NodeList(배열형 객체) 개체를 저장합니다. 각 노드에는 상위 노드를 가리키는 parentNode 속성이 있습니다. childNodes의 노드는 동일한 parentNode를 갖습니다. 형제 노드는 이전Sibling 및 nextSibling 속성을 사용하여 액세스할 수 있습니다. 동시에 childNodes[0]==firstChild, childNodes[childNodes.length-1]==lastChild.

작업 노드:appendChild(), NodeList의 끝에 노드를 푸시하고 새로 추가된 노드를 반환합니다. insertBefore()는 노드를 NodeList의 헤드로 이동 해제하고 새로 추가된 노드를 반환합니다. replacementChild(newChild,targetChild)는 대상 노드를 대체합니다. 원래 노드는 여전히 문서에 있지만 위치는 없습니다. RemoveChild(tragetChild)는 노드를 제거하며, replacementChild()와 비슷한 효과를 갖습니다. cloneChild(boolean), true는 전체 복사본(전체 노드 및 하위 노드)을 의미하고 false는 기본 복사본을 의미합니다.

문서 유형:

문서 개체는 HTMLDDocument(문서 유형에서 상속됨)의 인스턴스이며 전체 HTML 페이지를 나타냅니다. 동시에 문서 개체는 창 개체의 속성이기도 하므로 전역 개체로 액세스할 수 있습니다. document.firstChild==html.document.body==body.doctype--->1a309583e26acea4f04ca31122d8c535에 대한 참조입니다. document.title--->title document.url--->location.url.

요소 찾기: getElementById(),getElementsByTagName(),getElementsByClassName().

문서 작성: write(),writeln( ) , open(), close()

Element 유형:

getAttribute(), 속성 가져오기 클래스의 경우 className 대신 "class"를 사용합니다. element.className을 사용할 때 클래스 속성을 가져올 수 있습니다.

setAttribute(), 속성을 설정하고 속성이 존재하는 경우 대체합니다. 그렇지 않으면 생성하십시오.

removeAttribute(), 요소 속성을 완전히 제거합니다.

createElement(), 새 요소를 생성합니다.

텍스트 유형:

createTextNode(), 텍스트 노드를 생성합니다. 두 텍스트 노드가 인접한 형제 노드인 경우 두 텍스트는 공백 없이 연결됩니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

JavaScript 구성 구현(BOM, DOM의 상세 해석)

관련 기사