DOM本身存在很多類型,在上一章中有介紹,比如Element類型:表示的是元素節點;再比如Text類型;表示的是文本節點;
一 DOM型
型別名稱 說明
Node 表示所有類型值的統一介面,IE不支援;
Document 表示文件類型;
Element 表示元素節點型別;
Text 表示文字節點類型;
Comment 表示文件中的註解類型;
CDATASection 表示CDATA區域型;
DocumentType 表示文件聲明類型;
DocumentFragment 表示文件片段類型;
Attr 表示屬性節點類型;
1.Node型
DOM1級定義了一個Node介面,該介面將由DOM中的所有節點類型實作;
這個Node介面在JavaScript中是作為Node類型實作的;
除IE之外,在其他所有瀏覽器中都可以存取到這個類型;
2.Document類型
// Document類型表示文檔,或文檔的根節點,而這個節點是隱藏的,沒有具體的元素標籤;
document; // document;
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; // DocumentType;
// 在Document中有一些遺留的屬性和物件集合,可以快速的幫助我們精確的處理任務;
// 屬性
document.title; // 取得並設定
標籤的值;<br>
document.URL; // 取得URL路徑;<br>
document.domain; // 取得網域名稱;<br>
// 當頁面中包含來自其他子域的框架或內嵌框架時,能夠設定document.domain就非常方便了;<br>
// 由於跨域安全限制,來自不同子域的頁面無法透過JavaScript通訊;<br>
// 而透過將每個頁面的document.domain設定為相同的值,這些頁面就可以相互存取對方的JavaScript物件了;<br>
document.referrer; // 儲存連結到目前頁面的該頁面的網址;<br>
// 物件集合<br>
document.anchors; // 取得文件中帶有name屬性的<a>元素集合;<br>
document.links; // 取得文件中帶有href屬性的</a><a>元素集合;<br>
document.forms; // 取得文件中<form>元素集合;<br>
document.images; // 取得文件中<img alt="JavaScript DOM進階方法_基礎知識" >元素集合;
<p><strong>3.Element類型<br>
</strong></p>
<p>// Element類型用於表現HTML中的元素節點.在上一章中,介紹了對元素節點進行查找/創建等操作;<br>
// 元素節點的nodeType為1;nodeName為元素的標籤名稱;<br>
// 元素節點物件在非IE瀏覽器可以傳回它特定元素節點的物件類型;<br>
元素名稱 類型<br>
HTML HTMLHtmlElement;<br>
DIV HTMLDivElement;<br>
BODY HTMLBodyElement;<br>
P HTMLParamElement;</p>
<p><strong>4.Text型 <br>
</strong></p>
<div class="jb51code">
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">
// Text类型用于表现文本节点类型,文本不包含HTML,或包含转以后的HTML;文本节点的nodeType为3;
// 在同时创建两个同一级别的文本节点的时候,会产生分离的两个节点;
var box = document.createElement('div');
var text1 = Document.createTextNode('Mr');
var text2 = Document.createTextNode('Lee!');
box.appendChild(text1);
box.appendChild(text2);
document.body.appendChild(box);
alert(box.childNodes.length); // =>2;两个文本节点;
// 把两个同邻的文本节点合并在一起,使用normalize()即可;
box.normalize(); // 合并成一个节点;
// 将一个节点实现分离;
box.firstChild.splitText(3); // 分离一个节点;
// Text还提供一些别的DOM操作的方法
var box = document.getElementById('box');
box.firstChild.deleteData(0,2); // 删除从0位置开始的2个字符;
box.firstChild.insertData(0,'Hello'); // 从0位置开始添加指定字符;
box.firstChild.replaceData(0,2,'Miss'); // 从0位置替换掉2个指定字符;
box.firstChild.substringData(0,2); // 从0位置获取2个字符,直接输出;
alert(box.firstChild.nodeValue); // 输出操作后的结果;</pre><div class="contentsignin">登入後複製</div></div>
</div>
<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')?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>
</form></a>
