DOM 自体には、要素ノードを表す Element タイプやテキスト ノードを表す Text タイプなど、多くのタイプがあります。
1 つの DOM タイプ
タイプ名 説明
ノードは、IE ではサポートされていないすべてのタイプの値の統一インターフェイスを表します。
Document はドキュメントのタイプを表します。
要素は要素のノード タイプを表します。
テキストはテキスト ノード タイプを表します。
Comment ドキュメント内のコメントの種類を表します。
CDATASection は CDATA 領域のタイプを表します。
DocumentType はドキュメント宣言のタイプを表します。
DocumentFragment はドキュメントフラグメントのタイプを表します。
Attr は属性ノードのタイプを表します。
DOM レベル 1 は、DOM 内のすべてのノード タイプによって実装される Node インターフェイスを定義します。 この Node インターフェイスは、JavaScript の Node タイプとして実装されます。
IE を除き、このタイプは他のすべてのブラウザでアクセスできます。
2.文書タイプ
//ドキュメント タイプはドキュメント、またはドキュメントのルート ノードを表します。このノードは非表示であり、特定の要素タグがありません。
ドキュメント; // ドキュメント;
document.childNodes[0] // 最初の子ノード オブジェクト;
;
document.childNodes[1] // HTMLHtmlElement;
;
// タグの要素ノード オブジェクト HTMLHtmlElement を直接取得したい場合は、documentElement を直接使用できます。
document.documentElement; // HTMLHtmlElement;
document.body; // HTMLBodyElement;
// Document には、タスクを迅速に正確に処理するのに役立ついくつかのレガシー プロパティとオブジェクト コレクションがあります。
// 属性
の値を取得および設定します。
document.URL; // URL パスを取得します;
document.domain; // ドメイン名を取得します;
を設定できると非常に便利です。
// クロスドメインのセキュリティ制限により、異なるサブドメインのページは JavaScript を介して通信できません。
// 各ページの document.domain を同じ値に設定すると、これらのページは相互に JavaScript オブジェクトにアクセスできます。
document.referrer; // 現在のページにリンクされているページの URL を保存します。
// オブジェクトのコレクション
document.anchors; // ドキュメント内の name 属性を持つ要素のコレクションを取得します;
document.links; // ドキュメント内の href 属性を持つ 要素のコレクションを取得します。
document.forms; // ドキュメント内の
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>"; //