> 웹 프론트엔드 > JS 튜토리얼 > JavaScript DOM 고급 방법_기본 지식

JavaScript DOM 고급 방법_기본 지식

WBOY
풀어 주다: 2016-05-16 16:04:21
원래의
1159명이 탐색했습니다.

이전 장에서 소개한 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;

// 태그의 요소 노드 객체 HTMLHtmlElement를 직접 가져오려면 documentElement를 직접 사용할 수 있습니다. document.documentElement; // HTMLHtmlElement;


// 태그를 가져와야 하는 경우가 많았습니다. 이전에는 document.getElementsByTagName('body')[0];

document.body; // HTMLBodyElement;


// 앞에 문서 선언이 있습니다. 은 브라우저의 첫 번째 노드로 처리됩니다. document.doctype; //문서유형;

// Document에는 작업을 정확하게 처리하는 데 도움이 되는 몇 가지 레거시 속성과 개체 컬렉션이 있습니다.
// 속성

document.title; // 태그 값을 가져오고 설정합니다.<p> document.URL; // URL 경로 가져오기;<br> document.domain; // 도메인 이름을 가져옵니다.<br> // 페이지에 다른 하위 도메인의 프레임이나 인라인 프레임이 포함되어 있는 경우 document.domain을 설정하면 매우 편리합니다. <br> // 교차 도메인 보안 제한으로 인해 다른 하위 도메인의 페이지는 JavaScript를 통해 통신할 수 없습니다. <br> // 각 페이지의 document.domain을 동일한 값으로 설정하면 이러한 페이지는 서로의 JavaScript 개체에 액세스할 수 있습니다. <br> document.referrer; // 현재 페이지에 링크된 페이지의 URL을 저장합니다. <br> // 객체 수집<br> document.anchors; // 문서에서 name 속성을 가진 <a> 요소 컬렉션을 가져옵니다.<br> document.links; // 문서에서 href 속성이 있는 <a> 요소 컬렉션을 가져옵니다.<br> document.forms; // 문서의 <form> 요소 컬렉션을 가져옵니다.<br> document.images; // 문서의 <img> 요소 컬렉션을 가져옵니다.<br> <br><br>3.요소 유형</p> <p><strong> <br>//요소 유형은 HTML에서 요소 노드를 나타내는 데 사용됩니다. 이전 장에서는 요소 노드 찾기/생성 등의 작업을 소개했습니다.</strong> // 요소 node의 nodeType은 1입니다. nodeName은 요소의 태그 이름입니다. // 요소 노드 객체는 IE가 아닌 브라우저에서 특정 요소 노드의 객체 유형을 반환할 수 있습니다. </p> 요소명 유형<p> HTML HTMLHtmlElement;<br> DIV HTMLDivElement;<br> BODY HTMLBodyElement;<br> P               HTMLParamElement;<br> <br><br>4.텍스트 유형 <br> </p> <p> <strong> <br> </strong> </p> <p><strong>5.Comment类型</strong></p> <p> Comment类型表示文档中的注释,nodeType是8,nodeName是#comment,nodeValue是注释的内容;<br>      var box = document.getElementById('box');<br>      alert(box.firstChild);                        // Comment;</p> <p><strong>6.Attr类型<br> </strong> Attr类型表示文档元素中的属性;nodeType为11;nodeName为属性名,nodeValue为属性值;详细内容在上一章;</p> <p><strong>二 DOM扩展<br> </strong>1.呈现模式<br> </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"> // 从IE6开始区分标准模式和混杂模式(怪异模式),主要看文档的声明; // IE为document对象添加了一个名为compatMode属性,这个属性可以识别IE浏览器的文档处于什么模式; // 如果是标准模式,则返回CSS1Compat;如果是混杂模式则返回BackCompat; if(document.compatMode == 'CSS1Compat'){ alert(document.documentElement.clientWidth); }else{ alert(document.body.clientWidth); }</pre><div class="contentsignin">로그인 후 복사</div></div> </div> <p><strong>2.滚动</strong></p> <p> DOM提供了一些滚动页面的方法<br /> document.getElementById('box').scrollIntoView(); // 设置指定可见;</p> <p><strong>3.children属性</strong></p> <p> 由于子节点空白问题,IE和其他浏览器解释不一致;如果只想得到有效子节点,可以使用children属性;这个属性是非标准的;<br /> var box = docuemnt.getElementById('box');<br /> alert(box.children.length); // 得到有效子节点数目;</p> <p><strong>4.contains()方法</strong></p> <p> 判断一个节点是不是另一个节点的后代,可以使用contains()方法;<br /> var box = document.getElementById('box');<br /> alert(box.contains(box.firstChild)); // =>true;</p> <p><strong>三 DOM操作内容<br /> </strong>1.innerText属性<br /> </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"> 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')&#63;element.textContent:element.innerText; } function setInnerText(element,text){ if(typeof element.textContent == 'string'){ element.textContent = text; }else{ element.innerText = text; } }</pre><div class="contentsignin">로그인 후 복사</div></div> </div> <p><strong>2.innerHTML属性</strong></p> <p> innerHTML属性可以解析HTML;<br /> document.getElementById('box').innerHTML; // 获取文本(不过滤HTML);<br /> document.getElementById('box').innerHTML = '<b>123</b>'; // 加粗的123;<br /> 虽然innerHTML可以插入HTML,但本身还是有一定的限制,也就是所谓的作用域元素,离开这个作用域就无效了;<br /> box.innerHTML = "<script>alert('Lee');</script>"; // <script>元素不能被执行;<br /> box.innerHTML = "<style>background:red;</style>"; // <style>元素不能被执行;</p> <p><strong>3.outerText</strong></p> <p> outerText在取值的时候和innerText一样,同时Firefox不支持;<br /> 而且赋值方法相当危险,它不单替换文本内容,还将元素直接抹去;<br /> var box = document.getElementById('box');<br /> box.outerText = '<b>123</b>';<br /> alert(document.getElementById('box')); // =>null; 不建议使用;</p> <p><strong>4.outerHTML<br /> </strong></p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"> // outerHTML属性在取值和innerHTML一致,但和outerText一样,赋值之后将元素抹去; var box = document.getElementById('box'); box.outerHTML = '123'; alert(document.getElementById('box')); // null; // PS:关于最常用的innerHTML属性和节点操作方法的比较;在插入大量HTML标记时,使用innerHTML的效率明显要高很多; // 因为在设置innerHTML时,会创建一个HTML解析器,这个解析器是浏览器级别的;因此执行JavaScript会快得多; // 但是,创建和销毁HTML解析器也会带来性能损失,最好控制在最合理的范围内; for(var i=0; i<10; i++){ ul.innerHTML = '<i>item</i>'; // 避免频繁; } // 完善 for(var i=0; i<10; i++){ a = '<li>item</i>'; // 临时保存; } ul.innerHTML = a;</pre><div class="contentsignin">로그인 후 복사</div></div> </div> <p><strong>四 小结<br> </strong></p> <p>DOM是语言中立的API,用于访问和操作HTML和XML文档;<br> DOM1级将HTML和XML文档形象地看作一个层次化的节点树,可以使用JavaScript来操作这个节点树,进而改变底层文档的外观和结构;</p> <p>DOM由各种节点构成,简要总结如下:</p> <p>1.最基本的节点类型是Node,用于抽象地表示文档中一个独立的部分;所有其他类型都继承自Node;<br> 2.Document类型表示整个文档,是一组分层节点的根节点;在JavaScript中,document对象是Document的一个实例;<br> 使用document对象,有很多种方式可以查询和获取节点;<br> 3.Element节点表示文档中的所有HTML或XML元素,可以用来操作这些元素的内容和属性;<br> 4.另外还有一些节点类型,分别表示文本内容/注释/文档类型/CDATA区域和文档片段;</p>
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿