Terdapat banyak jenis DOM itu sendiri, yang telah diperkenalkan dalam bab sebelumnya, seperti jenis Elemen: yang mewakili nod elemen dan jenis Teks, yang mewakili nod teks
Satu jenis DOM
Taip nama Penerangan
Nod mewakili antara muka bersatu untuk semua jenis nilai, yang tidak disokong oleh IE;
Dokumen mewakili jenis dokumen;
Elemen mewakili jenis nod elemen;
Teks mewakili jenis nod teks;
UlasanMewakili jenis ulasan dalam dokumen;
Bahagian CDATA mewakili jenis kawasan CDATA;
DocumentType mewakili jenis pengisytiharan dokumen;
DocumentFragment mewakili jenis serpihan dokumen;
Attr mewakili jenis nod atribut;
1.Jenis nod
Tahap DOM 1 mentakrifkan antara muka Nod, yang akan dilaksanakan oleh semua jenis nod dalam DOM
Antara muka Nod ini dilaksanakan sebagai jenis Nod dalam JavaScript;
Kecuali IE, jenis ini boleh diakses dalam semua pelayar lain;
2.Jenis dokumen
dokumen; // dokumen;
document.nodeType; // 9;Nilai jenis;
document.childNodes[0]; // DocumentType;
document.childNodes[1]; // HTMLHtmlElement;
// Jika anda ingin mendapatkan objek nod elemen HTMLHtmlElement bagi teg
document.documentElement; // HTMLHtmlElement;
// Banyak kali anda perlu mendapatkan teg
yang biasa digunakan sebelum ini ialah: document.getElementsByTagName('body')[0];// Terdapat pengisytiharan dokumen sebelum : akan diproses sebagai nod pertama penyemak imbas
document.doctype; // DocumentType;
// Terdapat beberapa sifat warisan dan koleksi objek dalam Dokumen, yang boleh membantu kami mengendalikan tugas dengan tepat
// Atribut
document.domain; // Dapatkan nama domain;
// Apabila halaman mengandungi bingkai atau bingkai sebaris daripada subdomain lain, adalah sangat mudah untuk dapat menetapkan document.domain
// Disebabkan sekatan keselamatan merentas domain, halaman daripada subdomain yang berbeza tidak boleh berkomunikasi melalui JavaScript
// Dengan menetapkan document.domain setiap halaman kepada nilai yang sama, halaman ini boleh mengakses objek JavaScript antara satu sama lain
document.referrer; // Menyimpan URL halaman yang dipautkan ke halaman semasa;
// Koleksi objek
document.anchors; // Dapatkan koleksi elemen
document.links; // Dapatkan koleksi elemen
document.forms; // Dapatkan koleksi
BODY HTMLBodyElement;
P HTMLParamElement;
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>"; //