JS 학습노트 5_DOM

##1.DOM 노드의常用 속성 (모든 노드가 지원)##

nodeType: 요소 1, 속성 2, 텍스트 3
nodeName: 요소 태그명의대문자형식
nodeValue: 요소 노드는 null, 텍스트 노드는 텍스트 내용, 속성 노드는 속성 값
관계 속성: parentNode, childNodes, nextSibling, previousSibling, firstChild, lastChild
ownerDocument: 문서 노드 (document 객체)

##2.DOM 노드 조작 (추가/삭제/변경)##

appendChild(node); 현재 노드의 childNodes 리스트末尾에 노드를 추가합니다. node 가 이미 존재하면 node 를 현재 노드 아래로 이동합니다
insertBefore(node, targetNode); targetNode 앞에 node 를 삽입합니다
replaceChild(node, targetNode); node 로 targetNode 를 교체합니다. 주의: 교체 후 targetNode는 파괴되지 않습니다. DOM 트리 밖에 떠 있는 문서 조각이 되었을 뿐입니다
removeChild(node); node 를 제거합니다. 주의: 제거 후 node도 파괴되지 않습니다. 이 메서드는 node 의 참조를 반환합니다
cloneNode(true/false); 현재 노드와 완전히 동일한 노드를 복사합니다. true 면 깊은 복사, 아니면 얕은 복사. IE 는 관련 이벤트 핸들러를 복사합니다. 다른 브라우저는 복사하지 않습니다
normalize(); 빈 텍스트 노드를 삭제하고 인접한 텍스트 노드를 병합하는 데 사용합니다

##3.document 객체 관련##

document.documentElement; 요소를 가리킵니다
document.body; 요소를 가리킵니다
document.title; 요소를 가리키며, 직접 대입하여문서 제목을 수정할 수 있습니다
document.URL; 전체 URL 을 가져옵니다

document.domain; 도메인 이름을 가져옵니다. 도메인 이름을 직접 대입하여 설정할 수 있습니다. 페이지 내 여러 frame 이 통신해야 할 경우 이 속성을 수정하여크로스도메인 보안 제한을 해제해야 합니다

document.referrer; 이전 페이지의 url 을 가져옵니다. 빈 문자열일 수 있습니다

요소 검색
- document.getElementById(str);
- document.getElementsByTagName(str); 컬렉션을 반환합니다. 대괄호 구문으로 액세스합니다. 대괄호 내는 name 속성 값으로 요소를 가져오는 문자열입니다 (str 은*로 모든 DOM 요소를 가져올 수 있습니다)
- document.getElementsByName(str); 주로 라디오 버튼 그룹에 사용됩니다

P.S. 처음 두 개는 모든 XML 문서의 DOM 조작에 적용되며, 마지막은 HTML 문서에만 적용됩니다. HTML5 에서 지원하는 document.querySelector(str) 및 document.getElementsByClassName(str) 는 여기서 논의하지 않습니다. 위에 나열된 3 가지 방식은 모두 전 브라우저 호환입니다

document.write(str); 문서 쓰기. 문서 로딩 중 직접 호출하면 지정 위치에 내용을 출력합니다. load 이벤트 핸들러 내에 배치하면페이지 전체를 다시 씁니다
document.createTextNode(text); 텍스트 노드를 생성합니다. document.createElement(tagName); 요소를 생성합니다

##4.요소 노드 관련##

요소 노드의 속성: id, title(ToolTip 유사), className. 모두 읽기/쓰기 가능합니다 (네이티브 js 코드를 작성할 때 이 3 개 속성이 매우 자주 사용되며, 특히className이 매우 편리합니다)
elem.getAttribute(attr); attr 속성의 값을 가져옵니다. 커스텀 속성도 가져올 수 있지만, HTML5 에서는 커스텀 속성에"data-"접두사를 붙여야 합니다 (물론, 붙이지 않아도 문제없지만, 사양 규범 요구). elem.dataset.attr 로 가져옵니다

elem.setAttribute(attr, value); 속성 값을 설정합니다. 커스텀 속성 설정에만 사용합니다. 커스텀 속성은 직접 설정할 수 없기때문입니다

elem.removeAttribute(attr); 속성과 값을 삭제합니다 ([IE6-] 는 지원하지 않음)

P.S. 일반적으로 속성에 직접 액세스합니다. 예를 들어 elem.id, elem.style 등. get/setAttribute 방식은자주 사용되지 않습니다 (커스텀 속성 읽기/쓰기만). 함수 방식으로 style 이나 onclick 이나 기타 이벤트 속성에 액세스하면문자열이 반환되기 때문입니다. 직접 액세스하면 조작 가능한 객체 (함수 참조 등) 가 반환되므로 일반적으로 요소 속성에 직접 액세스합니다

attributes 속성: elem.attributes['id'].nodeValue = value; 이 방식으로 속성에 액세스할 수도 있지만, 더 많은 경우attributes 속성을 사용하여 요소 속성을 순회합니다
요소 노드를 순회할 때는 nodeType 감지를 추가해야 합니다. 일부 브라우저는 태그 사이의 공백 문자도 노드로 취급하기 때문입니다 (Unicode 서명 BOM)

##5.텍스트 노드##

node.nodeValue 또는 node.data 로 텍스트 내용에 액세스할 수 있습니다

##6.DOM 성능 최적화##

NodeList 액세스 횟수를 최소화

NodeList, NamedNodeMap, HTMLCollection 은 모두실시간 업데이트됩니다. document.getElementByxxx 의 반환 값이 이 타입입니다. NodeList 액세스 횟수를 최소화해야 합니다. 액세스 시 DOM 트리를 확인해야 하므로 상당한성능 손실이 있기 때문입니다. NodeList 객체의 참조를 저장해 두어야 합니다. 예를 들어 다음 코드는 피하세요:

    for(var i = 0;i < 100;i++){
      document.getElementsByTagName('li')[i].className = 'disabled';
    }

이는 매우 좋지 않습니다. 더 나은 방법은:

    var lis = document.getElementsByTagName('li');
    for(var i = 0;i < 100;i++){
      lis[i].className = 'disabled';
    }

일반적인 HTMLCollection 객체: document.forms, document.images, document.links, document.anchors

DocumentFragment 를 사용하여 여러 번의"현장 업데이트"회피

DocumentFragment 는 비교적 마이너하지만매우 유용한 노드입니다. 성능 최적화에서 특히 중요합니다. 대량의 DOM 노드를 삽입해야 할 때 두 가지 선택이 있습니다: 하나씩 DOM 트리에 삽입하거나, 먼저 문서 조각에 삽입한 후 문서 조각을 DOM 트리에 삽입하는 것입니다. 첫 번째 방식은 DOM 트리를 n 번 업데이트해야 하지만, 두 번째 방식은 1 번만 업데이트하면 됩니다. 예를 들어:

    //创建文档碎片
    var frag = document.createDocumentFragment();
    //插入节点
    var node = null, text = null;
    for(var i = 0;i < 10;i++){
      node = document.createElement('p');
      text = document.createTextNode('段落' + i);
      node.appendChild(text);
      frag.appendChild(node);
    }
    //把携带着节点的文档碎片插入 DOM 树
    document.body.appendChild(frag);

문서 조각은 DOM 트리에 존재하지 않습니다. 조각을 DOM 트리에 삽입하는 것은 실제로 그것이 가진 노드를 삽입하는 것입니다. 문서 조각은 보이지 않는 컨테이너입니다. 물론 컨테이너로 div 를 생성할 수도 있습니다. 문서 조각을 생성하는 것과 같은 이치입니다. n 번의 현장 업데이트를 회피하면 됩니다. DOM 트리의 어떤 노드가 업데이트되든 브라우저는 페이지를 다시 렌더링하므로 대량의 스타�� 수치 계산이 필요하기 때문입니다

getElementByxxx 의 성능 차이

Id 조회가 가장 빠르고, TagName 이 그 다음, ClassName 이 가장 느립니다. 물론, 일반적으로 이러한 차이는 무시할 수 있지만, 모바일 페이지에서는 충분히 고려해야 합니다. 모바일에는 PC 와 같은 좋은 조건이 없기 때문입니다. 또한, 자주 사용하는 요소의 참조를 저장해 두면 불필요한 DOM 조회를 줄여 성능을 향상시킬 수 있습니다.

##7.동적으로 img/script/link 요소 생성##

이 부분은 일반적인 DOM 조작과 다르며 이벤트와의 연관성이 많으므로, JS 학습노트 6_이벤트 에서 자세히 설명합니다

댓글

댓글 작성