Kaedah Lanjutan DOM JavaScript_Pengetahuan Asas

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;
Ulasan​​​​​​Mewakili 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

//Jenis Dokumen mewakili dokumen, atau nod akar dokumen, dan nod ini tersembunyi dan tidak mempunyai teg unsur khusus;

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 100db36a723c770d327fc0aef2ce13b1 document.documentElement; // HTMLHtmlElement;

// Banyak kali anda perlu mendapatkan teg 6c04bd5ca3fcae76e30b72ad730ca86d yang biasa digunakan sebelum ini ialah: document.getElementsByTagName('body')[0];
document.body; // HTMLBodyElement;

// Terdapat pengisytiharan dokumen sebelum 100db36a723c770d327fc0aef2ce13b1: 1a309583e26acea4f04ca31122d8c535 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.title; // Dapatkan dan tetapkan nilai tegb2386ffb911b14667cb8f0f91ea547a7 document.URL; // Dapatkan laluan URL;

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 3499910bf9dac5ae3c52d5ede7383485 document.links; // Dapatkan koleksi elemen 3499910bf9dac5ae3c52d5ede7383485 document.forms; // Dapatkan koleksi ff9c23ada1bcecdd1a0fb5d5a0f18437 document.images; // Dapatkan koleksi a1f02c36ba31691bcfe87b2722de723b

3.Jenis elemen



//Jenis elemen digunakan untuk mewakili nod elemen dalam HTML Dalam bab sebelumnya, operasi seperti mencari/membuat nod elemen telah diperkenalkan;
// Jenis nod nod elemen ialah 1; nodeName ialah nama tag bagi elemen; // Objek nod elemen boleh mengembalikan jenis objek nod elemen khusus dalam penyemak imbas bukan IE; Nama elemen Jenis
HTML HTMLHtmlElement;

DIV HTMLDivElement;

BODY HTMLBodyElement; P               HTMLParamElement;

4.Jenis teks

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 = 'a4b561c25d9afb9ac8dc4d70affff4191230d36329ec37a2cc24d42c7229b69747a';    // 加粗的123;
 虽然innerHTML可以插入HTML,但本身还是有一定的限制,也就是所谓的作用域元素,离开这个作用域就无效了;
    box.innerHTML = "3f1c4e4b6b16bbbd69b2ee476dc4f83aalert('Lee');2cacc6d41bbb37262a98f745aa00fbf0";           // 3f1c4e4b6b16bbbd69b2ee476dc4f83a元素不能被执行;
    box.innerHTML = "c9ccee2e6ea535a969eb3f532ad9fe89background:red;531ac245ce3e4fe3d50054a55f265927";           // c9ccee2e6ea535a969eb3f532ad9fe89元素不能被执行;

3.outerText

 outerText在取值的时候和innerText一样,同时Firefox不支持;
 而且赋值方法相当危险,它不单替换文本内容,还将元素直接抹去;
     var box = document.getElementById('box');
     box.outerText = 'a4b561c25d9afb9ac8dc4d70affff4191230d36329ec37a2cc24d42c7229b69747a';
     alert(document.getElementById('box'));                       // =>null; 不建议使用;

4.outerHTML

// 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;

四 小结

DOM是语言中立的API,用于访问和操作HTML和XML文档;
DOM1级将HTML和XML文档形象地看作一个层次化的节点树,可以使用JavaScript来操作这个节点树,进而改变底层文档的外观和结构;

DOM由各种节点构成,简要总结如下:

1.最基本的节点类型是Node,用于抽象地表示文档中一个独立的部分;所有其他类型都继承自Node;
2.Document类型表示整个文档,是一组分层节点的根节点;在JavaScript中,document对象是Document的一个实例;
使用document对象,有很多种方式可以查询和获取节点;
3.Element节点表示文档中的所有HTML或XML元素,可以用来操作这些元素的内容和属性;
4.另外还有一些节点类型,分别表示文本内容/注释/文档类型/CDATA区域和文档片段;