Dom 속성을 사용하는 방법

이번에는 Dom속성속성 사용법과 Dom속성 사용시 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

1. javascript

의 세 가지 코어 1. ECMAScript js

의 구문 표준 2.DOM Document 객체 모델 문서 객체 모델은 js가 html 태그

를 작동할 수 있는 메소드를 제공합니다. BOM 브라우저 개체 모델 브라우저 개체 모델은 js가 브라우저를 작동할 수 있도록 하는 메서드를 제공합니다

참고:1 js의 가장 큰 보스는 창이고 문서는 창 아래의 개체일 뿐입니다

1. document.documentElement html

                document(在文档里，document是老大)
                       |
                      html
                      /  \
                     /    \
                    /      \
                   body    head
                   /       / | \
                  /       /  |  \
                 /       /   |   \
               / | \   meta title  style...
              /  |  \
             /   |   \
            p  p   ul...
            /
          /
          a

2. DOM 속성

js ---> DOM --> html

　js는 DOM을 사용하여 html 태그를 작동합니다.

1. childNodes는 현재 객체 Node 객체 아래의 모든 children을 반환합니다. , 텍스트 노드가 반환됩니다

참고: IE8에서는 요소 노드만 반환됩니다.

1. nodeType은 노드 유형을 반환하고, 요소 노드는 1을 반환하고, 텍스트 노드는 3을 반환합니다. CommentNode는 8

2. 을 반환합니다. children 객체 아래의 모든 하위 요소 노드를 반환하며 호환성 문제는 없습니다.

3. firstChild는 IE8의 childNodes와 동일하게 동작하는 첫 번째 하위 노드를 반환합니다

1. lastChild는 위와 같이 마지막 하위 노드를 반환합니다.

1. firstElementChild는 IE8과 호환되지 않는 마지막 요소 노드를 반환합니다.

1. nextSibling 주류 브라우저에서는 다음 형제 노드가 IE8에서 요소 노드 이외의 노드를 얻을 수 있습니다. 그렇지 않은 경우 null을 반환합니다.

2. previousSibling 이전 형제 노드는 위와 동일합니다.

3. nextElementSibling 다음 형제 요소 노드가 없으면 null을 반환합니다.

1. previousElementSibling과 같습니다. 위

2. parentNode * Return 부모 노드에 호환성이 없습니다

3. offsetParent 위치 지정 부모를 반환합니다. 발견되지 않으면 최종적으로 호환성 문제가 없습니다

. 13.nodeName 태그의 생성자 태그 이름을 반환합니다대문자

3. DOM의 일부 메서드

　creatElement('p')

　　이것이 라벨입니다

　　새 요소 노드를 생성하려면 수락해야 합니다. 매개변수이며 매개변수는 생성해야 하는 라벨입니다.

　createTextNode()

　　 새 텍스트 노드 만들기

　createComment()

　　 새 댓글 노드 만들기

노드 작업

　요소 노드 추가

　 1. Parent.appendChil d (자식 노드)

　 다음에 하위 노드 추가 상위 노드에서 상위

　2. Parent.insertBefore(자식 노드, 지정된 하위 노드)

　　지정된 노드 앞에 추가

1. parent.removeChild. (삭제해야 하는 노드)

　　1. 복제 노드 cloneNode

　　 복제 노드, clone parent.cloneNode()

　　 함수는 부울 값인 매개변수를 받습니다. 기본값은 false입니다. copy, deep copy의 경우 true

　Shallow copy: 라벨만 복사합니다

　 딥 카피: 이 태그 객체와 관련된 일부 태그의 인라인 정보를 복사하며, js의 사용자 정의 속성은 복사되지 않습니다.

　DOM 학습에 관한 저의 노트입니다. 도움이 되신다면 정말 기쁘겠습니다.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

JavaScript 최적화 DOM

WeChat 애플릿에서 양방향 데이터 바인딩을 구현하는 방법
JavaScript 문자열을 사용하는 방법

위 내용은 Dom 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!