Es gibt viele DOM-Typen, die im vorherigen Kapitel vorgestellt wurden, z. B. den Elementtyp, der Elementknoten darstellt; und den Texttyp, der Textknoten darstellt;
Ein DOM-Typ
Typname Beschreibung
Node stellt eine einheitliche Schnittstelle für alle Arten von Werten dar, die vom IE
nicht unterstützt wird
Dokument stellt den Dokumenttyp dar;
Element stellt den Elementknotentyp dar;
Text stellt den Textknotentyp dar;
KommentarStellt den Kommentartyp im Dokument dar;
CDATASection repräsentiert den CDATA-Bereichstyp;
DocumentType stellt den Dokumentdeklarationstyp dar;
DocumentFragment stellt den Dokumentfragmenttyp dar;
Attr repräsentiert den Attributknotentyp;
1.Knotentyp
DOM-Level 1 definiert eine Knotenschnittstelle, die von allen Knotentypen im DOM implementiert wird; Diese Node-Schnittstelle ist als Node-Typ in JavaScript implementiert;
Mit Ausnahme des IE kann auf diesen Typ in allen anderen Browsern zugegriffen werden;
//Der Dokumenttyp stellt das Dokument oder den Stammknoten des Dokuments dar. Dieser Knoten ist ausgeblendet und hat kein spezifisches Element-Tag;
document.nodeType; // 9;Typwert;
document.childNodes[0]; // DocumentType; erstes untergeordnetes Knotenobjekt;
document.childNodes[1]; // HTMLHtmlElement; object;
// Wenn Sie das Elementknotenobjekt HTMLHtmlElement des -Tags direkt abrufen möchten, können Sie documentElement direkt verwenden
document.documentElement; // HTMLHtmlElement;
// Oftmals müssen Sie das
-Tag abrufen. Das zuvor häufig verwendete war: document.getElementsByTagName('body')[0];// Es gibt eine Dokumentdeklaration vor : wird als erster Knoten des Browsers verarbeitet;
document.doctype; // DocumentType;
// Attribute
document.title; // Den Wert des
// Wenn die Seite Frames oder Inline-Frames von anderen Subdomains enthält, ist es sehr praktisch, document.domain; festlegen zu können
// Aufgrund von domänenübergreifenden Sicherheitsbeschränkungen können Seiten aus verschiedenen Subdomänen nicht über JavaScript kommunizieren
// Indem die document.domain jeder Seite auf den gleichen Wert gesetzt wird, können diese Seiten auf die JavaScript-Objekte der jeweils anderen Seite zugreifen
document.referer; // Speichert die URL der Seite, die mit der aktuellen Seite verlinkt ist;
// Objektsammlung
document.anchors; // Holen Sie sich die Sammlung von -Elementen mit dem Namensattribut im Dokument;
document.links; // Holen Sie sich die Sammlung von -Elementen im Dokument;
document.forms; // Holen Sie sich die Sammlung von
HTML HTMLHtmlElement;
DIV HTMLDivElement;
BODY HTMLBodyElement;
P HTMLParamElement;
4.Texttyp
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>"; //