이전 장에서 소개한 DOM 자체에는 요소 노드를 나타내는 요소 유형과 텍스트 노드를 나타내는 텍스트 유형 등 다양한 유형이 있습니다.
단일 DOM 유형
유형명 설명
노드는 IE에서 지원하지 않는 모든 유형의 값에 대한 통합 인터페이스를 나타냅니다.
문서는 문서 유형을 나타냅니다.
요소는 요소 노드 유형을 나타냅니다.
텍스트는 텍스트 노드 유형을 나타냅니다.
댓글문서의 댓글 유형을 나타냅니다.
CDATASection은 CDATA 영역 유형을 나타냅니다.
DocumentType은 문서 선언 유형을 나타냅니다.
DocumentFragment는 문서 조각 유형을 나타냅니다.
Attr은 속성 노드 유형을 나타냅니다.
1.노드 종류
DOM 레벨 1은 DOM의 모든 노드 유형에 의해 구현되는 노드 인터페이스를 정의합니다.
이 Node 인터페이스는 JavaScript에서 Node 유형으로 구현됩니다.
IE를 제외하고 이 유형은 다른 모든 브라우저에서 액세스할 수 있습니다.
2.문서형식
문서; //문서;
document.nodeType; // 9;값 입력;
document.childNodes[0]; // DocumentType; 첫 번째 하위 노드 객체;
document.childNodes[1]; // HTMLHtmlElement;
//
// 앞에 문서 선언이 있습니다. 은 브라우저의 첫 번째 노드로 처리됩니다.
document.doctype; //문서유형;
// Document에는 작업을 정확하게 처리하는 데 도움이 되는 몇 가지 레거시 속성과 개체 컬렉션이 있습니다.
// 속성
document.URL; // URL 경로 가져오기;
document.domain; // 도메인 이름을 가져옵니다.
// 페이지에 다른 하위 도메인의 프레임이나 인라인 프레임이 포함되어 있는 경우 document.domain을 설정하면 매우 편리합니다.
// 교차 도메인 보안 제한으로 인해 다른 하위 도메인의 페이지는 JavaScript를 통해 통신할 수 없습니다.
// 각 페이지의 document.domain을 동일한 값으로 설정하면 이러한 페이지는 서로의 JavaScript 개체에 액세스할 수 있습니다.
document.referrer; // 현재 페이지에 링크된 페이지의 URL을 저장합니다.
// 객체 수집
document.anchors; // 문서에서 name 속성을 가진 요소 컬렉션을 가져옵니다.
document.links; // 문서에서 href 속성이 있는 요소 컬렉션을 가져옵니다.
document.forms; // 문서의
//요소 유형은 HTML에서 요소 노드를 나타내는 데 사용됩니다. 이전 장에서는 요소 노드 찾기/생성 등의 작업을 소개했습니다.
// 요소 node의 nodeType은 1입니다. nodeName은 요소의 태그 이름입니다.
// 요소 노드 객체는 IE가 아닌 브라우저에서 특정 요소 노드의 객체 유형을 반환할 수 있습니다.
HTML HTMLHtmlElement;
DIV HTMLDivElement;
BODY HTMLBodyElement;
P HTMLParamElement;
4.텍스트 유형
5.Comment类型
Comment类型表示文档中的注释,nodeType是8,nodeName是#comment,nodeValue是注释的内容;
var box = document.getElementById('box');
alert(box.firstChild); // Comment;
6.Attr类型
Attr类型表示文档元素中的属性;nodeType为11;nodeName为属性名,nodeValue为属性值;详细内容在上一章;
二 DOM扩展
1.呈现模式
// 从IE6开始区分标准模式和混杂模式(怪异模式),主要看文档的声明; // IE为document对象添加了一个名为compatMode属性,这个属性可以识别IE浏览器的文档处于什么模式; // 如果是标准模式,则返回CSS1Compat;如果是混杂模式则返回BackCompat; if(document.compatMode == 'CSS1Compat'){ alert(document.documentElement.clientWidth); }else{ alert(document.body.clientWidth); }
2.滚动
DOM提供了一些滚动页面的方法
document.getElementById('box').scrollIntoView(); // 设置指定可见;
3.children属性
由于子节点空白问题,IE和其他浏览器解释不一致;如果只想得到有效子节点,可以使用children属性;这个属性是非标准的;
var box = docuemnt.getElementById('box');
alert(box.children.length); // 得到有效子节点数目;
4.contains()方法
判断一个节点是不是另一个节点的后代,可以使用contains()方法;
var box = document.getElementById('box');
alert(box.contains(box.firstChild)); // =>true;
三 DOM操作内容
1.innerText属性
document.getElementById('box').innerText; // 获取文本内容(如有html直接过滤掉); document.getElementById('box').innerText = 'Mr.Lee'; // 设置文本(如有html转义); // PS:除了Firefox之外,其他浏览器均支持这个方法;Firefox的DOM3级提供了另外一个类似的属性:textContent; // 兼容方法 function getInnerText(element){ return (typeof element.textContent == 'string')?element.textContent:element.innerText; } function setInnerText(element,text){ if(typeof element.textContent == 'string'){ element.textContent = text; }else{ element.innerText = text; } }
2.innerHTML属性
innerHTML属性可以解析HTML;
document.getElementById('box').innerHTML; // 获取文本(不过滤HTML);
document.getElementById('box').innerHTML = '123'; // 加粗的123;
虽然innerHTML可以插入HTML,但本身还是有一定的限制,也就是所谓的作用域元素,离开这个作用域就无效了;
box.innerHTML = "<script>alert('Lee');</script>"; //