Asas DOM JavaScript_Pengetahuan Asas-tutorial js-php.cn

DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口);

DOM描绘了一个层次化的节点树,运行开发人员可以添加/移除和修改页面的某一部分;

一 DOM介绍

D(文档):可以理解为整个Web加载的网页文档;
O(对象):可以理解为类似window对象之类的东西,可以调用属性和方法,这里说的是document对象;
M(模型):可以理解为网页文档的树形结构;

1.节点

加载HTML页面时,Web浏览器生成一个树形结构,用来表示页面内部结构;
DOM将这种节点结构理解为由节点组成;
html元素为根节点;head元素是html的子节点;meta元素和title元素之间是兄弟关系;

2.节点种类:元素节点/文本节点/属性节点

测试Div

Nod elemen => div;
Nod atribut => title="Atribut Elemen"
Nod teks => Uji Div 2 Cari elemen
W3C menyediakan kaedah dan atribut yang agak mudah dan mudah untuk mengesan nod supaya kami boleh mengendalikan nod dengan cepat; DOM (Document Object Model) ialah model objek dokumen, API (antara muka program aplikasi) untuk dokumen HTML dan XML;

DOM menggambarkan pepohon nod hierarki dan pembangun boleh menambah/mengalih keluar serta mengubah suai bahagian tertentu halaman

Kaedah carian nod elemen
Kaedah getElementById() Dapatkan nod elemen ID tertentu; getElementsByTagName() Dapatkan senarai nod elemen yang sama;
getElementsByName() Dapatkan senarai nod dengan nama yang sama;
getAttribute() Dapatkan nilai atribut nod bagi elemen tertentu;
setAttribute() Tetapkan nilai atribut nod bagi elemen tertentu;
removeAttribute() mengalih keluar atribut nod bagi elemen tertentu;

1.getElementById()

//Kaedah menerima parameter: dapatkan ID elemen;

// Jika elemen yang sepadan ditemui, kembalikan objek HTMLDivElement elemen jika ia tidak wujud, kembalikan

Document.getElementById('box'); // [objek HTMLDivElement];
// Apabila kita memperoleh nod elemen tertentu melalui getElementById(), objek nod ini diperolehi oleh kami; // Melalui objek nod ini, kita boleh mengakses satu siri sifatnya; (1). Akses atribut nod elemen
Perihalan Atribut
tagName Dapatkan nama tag nod elemen;
innerHTML Dapatkan kandungan dalam nod elemen, spesifikasi DOM bukan W3C; Document.getElementById('box').tagName; // =>DIV;
Document.getElementById('box').innerHTML; // =>Test Div;

(2).Akses atribut biasa HTML
Perihalan Atribut
nama id nod elemen;
tajuk Nilai atribut tajuk nod elemen;

gaya gaya CSS nilai atribut gaya sebaris;

className Kelas elemen CSS;

document.getElementById('box').id; // =>id;
Document.getElementById('box').title; // Dapatkan tajuk;

document.getElementById('box').style; // Dapatkan objek CSSStyleDeclaration;

Document.getElementById('box').style.color; // Dapatkan nilai warna dalam objek gaya; Document.getElementById('box').style.color='red'; // Tetapkan nilai warna dalam objek gaya;

document.getElementById('box').className; // Dapatkan kelas;

Document.getElementById('box').className='pox'; // Tetapkan kelas;

document.getElementById('box').bbb; // Dapatkan nilai atribut tersuai, tidak disokong oleh bukan IE;

2.getElementsByTagName()
//Kaedah mengembalikan tatasusunan HTMLCollection (NodeList) tatasusunan objek, yang menyimpan senarai nod dengan nama elemen yang sama
Document.getElementsByTagName('*'); // Gunakan kad bebas untuk mendapatkan semua elemen;
// PS: Apabila IE menggunakan kad bebas, ia akan menganggap pernyataan spesifikasi HTML pada permulaan dokumen sebagai nod elemen pertama;

document.getElementsByTagName('li'); // =>[object HTMLCollection];Dapatkan semua elemen li;

Document.getElementsByTagName('li').[0]; // Dapatkan elemen li pertama;

3.getElementsByName()

Dapatkan elemen dengan tetapan nama (nama) yang sama dan kembalikan tatasusunan objek HTMLCollection (NodeList

). Document.getElementsByName('add'); // Dapatkan koleksi elemen input dengan name='add';
// PS: Untuk atribut yang tidak sah dalam HTML, akan terdapat perbezaan dalam keserasian yang diperoleh oleh JS
// IE menyokong atribut nama sah, tetapi akan terdapat isu ketidakserasian dengan atribut tersuai;

4.getAttribute()

Kaedah akan mendapat nilai atribut dalam elemen
Tetapi ia agak berbeza daripada kaedah menggunakan ".attr" secara langsung untuk mendapatkan nilai atribut; Document.getElementById('box').getAttribute('mydiv'); // Dapatkan nilai atribut tersuai;
Document.getElementById('box').mydiv; // Dapatkan nilai atribut tersuai, hanya disokong oleh IE;

5.setAttribute()

Kaedah akan menetapkan atribut dan nilai dalam elemen; ia menerima dua parameter: nama atribut dan nilai Jika atribut itu sendiri sudah wujud, ia akan ditimpa
Document.getElementById('box').setAttribute('align','center'); // Tetapkan atribut dan nilai; // PS: Dalam IE7 dan ke bawah, menggunakan kaedah setAttribute() untuk menetapkan atribut kelas dan gaya tidak mempunyai kesan;

6.removeAttribute()
Kaedah

boleh mengalih keluar atribut HTML

Document.getElementById('box').removeAttribute('style'); // Alih keluar atribut gaya;
Tiga nod DOM

1.sifat nod nod //Nod boleh dibahagikan kepada: nod elemen/nod atribut dan nod teks;

// Nod ini mempunyai tiga atribut: nodeName/nodeType dan nodeValue;

Atribut nod maklumat

Jenis nod nodName nodeType nodeValue
Nama Unsur unsur 1 null

Atribut Atribut nama Atribut nilai 2 Atribut nilai

Kandungan Teks
Document.getElementById('box').nodeType; // => Element nod;

2. Atribut nod hierarki
// Nod hierarki boleh dibahagikan kepada: nod induk dan nod anak/nod adik beradik;
// Apabila kita mendapat salah satu nod elemen, kita boleh menggunakan atribut nod hierarki untuk mendapatkan nod tahap yang berkaitan;

Rajah perhubungan nod

Atribut nod hierarki
Perihalan Atribut
childNodes Baca semua nod anak nod elemen semasa;
firstChild Baca nod anak pertama nod elemen semasa;
lastChild Dapatkan nod anak terakhir nod elemen semasa;
ownerDocument Mendapat nod akar dokumen nod, yang bersamaan dengan dokumen;
parentNode Dapatkan nod induk nod semasa;
previousSibling Dapatkan nod adik beradik sebelumnya bagi nod semasa;
nextSibling Dapatkan nod adik beradik seterusnya bagi nod semasa;
atribut Dapatkan set semua nod atribut nod elemen semasa;

(1).sifat childNodes

Atribut mendapat semua nod anak bagi nod elemen tertentu ini termasuk nod elemen dan nod teks
PS: Apabila menggunakan childNodes[n] untuk mengembalikan objek nod anak, adalah mungkin untuk mengembalikan nod anak elemen, seperti: HTMLElement;
Ia juga mungkin mengembalikan sub-nod teks, seperti: Teks
Subnod elemen boleh menggunakan nodeName atau tagName untuk mendapatkan nama tag; subnod teks boleh diperoleh menggunakan nodeValue; var box = document.getElementById('box');
for(var i=0; i Tentukan ia adalah nod elemen dan keluarkan nama label elemen; If(box.childNodes[i].nodeType === 1){
console.log('Nod elemen:' box.childNodes[i].nodeName);
Tentukan ia adalah nod teks dan keluarkan kandungan teks; }lain jika(box.childNodes[i].nodeType ===3){
console.log('Nod teks:' box.childNodes[i].nodeValue);
}
}
PS1: Apabila mendapatkan nod teks (titik utama ialah ia bukan lagi nod elemen), anda tidak boleh menggunakan atribut innerHTML untuk mengeluarkan kandungan teks; Atribut bukan piawai ini mesti digunakan untuk mendapatkan nod elemen sebelum teks yang terkandung di dalamnya boleh dikeluarkan
alert(box.innerHTML); Perbezaan pertama antara innerHTML dan nodeValue;

PS2: Apabila innerHTML dan nodeValue diberikan nilai, nodeValue akan melepaskan HTML yang terkandung dalam teks ke dalam aksara khas, dengan itu mencapai kesan membentuk teks biasa; Dan innerHTML akan menghuraikan aksara khas dalam teks
box.childNodes[0].nodeValue = 'abc'; box.innerHTML = 'abc';
(2).Atribut anak pertama dan anak terakhir

firstChild = childNodes[0]; Dapatkan nod anak pertama bagi elemen semasa;

lastChild = childNodes[box.childNodes.length-1]; Dapatkan nod anak terakhir bagi elemen semasa;

(3).ownerDocument property
Mengembalikan nod akar objek dokumen bagi nod Objek yang dikembalikan adalah bersamaan dengan dokumen;

makluman(box.ownerDocument === dokumen); // =>true;Nod akar;

(4).parentNode/previousSibling/nextSibling properties

parentNode: Mengembalikan nod induk nod ini;
previousSibling: Mengembalikan nod adik beradik sebelumnya bagi nod ini; nextSibling: Mengembalikan nod adik beradik seterusnya bagi nod ini; alert(box.parentNode.nodeName); // Dapatkan nama label nod induk;
alert(box.firstChild.nextSibling); // Dapatkan nod kedua;
alert(box.lastChild.previousSibling); // Dapatkan nod kedua;

(5).atribut atribut

Atribut mengembalikan koleksi nod atribut nod;

alert(document.getElementById('box').attributes); // =>NamedNodeMap;

(6). Abaikan nod teks kosong

  var body = document.getElementsByTagName('body')[0];// 获取body元素节点;  
  alert(body.childNodes.length);           // 非IE=7;  IE=3;

  // PS:在非IE中,标准的DOM具有识别空白文本节点的功能,而IE自动忽略了;
  function filterSpaceNode1(nodes){
    // 新数组;
    var ret = [];
    for(var i=0; i<nodes.length; i++){
      // 如果识别到空白文本节点,就不添加到数组;
      if(nodes[i].nodeType ===3 && /^\s+$/.test(nodes[i].nodeValue)) continue;
      // 把每次的元素节点,添加到数组里;
      ret.push(nodes[i]);
    }
    return ret;
  }

  // PS:上面的方法,采用忽略空白文件节点的方法,把得到的元素节点累加到数组里返回;
  function filterSpaceNode2(nodes){
    for(var i=0; i<nodes.length; i++){
      if(nodes[i].nodeType ===3 && /^\s+$/.test(nodes[i].nodeValue)){
        // 得到空白节点之后,一道父节点上,删除子节点;
        nodes[i].parentNode.removeChild(nodes[i]);
      }
    }
    return nodes;
  }

  // PS:firstChild等方法在获取节点时遇到空白节点,处理方法;
  function removeWhileNode(nodes){
    for(var i=0; i<nodes.childNodes.length; i++){
      if(nodes.childNodes[i].nodeType ===3 && /^\s+$/.test(nodes.childNodes[i].nodeValue)){
        nodes.childNodes[i].parentNode.removeChild(nodes.childNodes[i]);
      }
    }
    return nodes;
  }

Salin selepas log masuk

Empat operasi nod

// DOM bukan sahaja boleh mencari nod, tetapi juga mencipta nod/menyalin nod/memasukkan nod/memadam nod dan menggantikan nod
Kaedah operasi nod

Penerangan Kaedah

write() Kaedah ini boleh memasukkan sebarang rentetan ke dalam dokumen;
createElement() Cipta nod elemen;
appendChild() Menambahkan nod baharu pada penghujung senarai nod anak;
createTextNode() Cipta nod fail;
insertBefore() Masukkan nod baharu di hadapan;
replaceChild() Gantikan nod lama dengan nod baharu;
cloneNode() Salin nod;
removeChild() Alih keluar nod;

(1).kaedah tulis()

//Kaedah write() boleh memasukkan sebarang rentetan ke dalam dokumen;
document.write('

Ini adalah perenggan!

'); // Teks yang dihuraikan;
(2).createElement() kaedah

Kaedah createElement() boleh mencipta nod elemen; document.createElement('p'); // [objek HTMLParagraphElement];

(3).appendChild() kaedah

Kaedah appendChild() menambah nod baharu pada penghujung senarai nod anak nod; var box = document.getElementById('box'); var p = document.createElement('p'); // Cipta nod elemen baharu

;
box.appendChild(p); //Tambahkan nod elemen baharu

(4).createTextNode() kaedah

Kaedah ini mencipta nod teks;

var text = document.createTextNode('perenggan'); p.appendChild(text); //Tambahkan nod teks pada penghujung nod anak;

(5).kaedah insertBefore()

(6).replaceChild() kaedah

// 该方法可以把节点添加到指定节点的前面;
  box.parentNode.insertBefore(p,box);      // 在<div>之前添加一个<p>;
  box.insertBefore(newNode,null);        // 将newNode添加到box自列表的最后节点;

  //PS:insertBefore()方法可以给当前元素的前面创建一个节点,但没有提供给当前元素的后面创建一个节点;
  function insertAfter(newElement,targetElement){
    // 得到父节点;
    var parent = targetElement.parentNode;
    // 如果最后一个子节点是当前元素,那么直接添加即可;
    if(parent.lastChild === targetElement){
      parent.appendChild(newElement);
    }else{
    // 否则,在当前节点的下一个节点之前添加;达成在当前节点后面添加节点的需求;
      parentNode.insertBefore(newElement,targetElement.nextSibling);
    }
  }

Salin selepas log masuk

Kaedah ini boleh menggantikan nod dengan nod yang ditentukan;

box.parentNode.replaceChild(p,box); // Gantikan

dengan

;

(7).cloneNode() kaedah

// Kaedah ini boleh menyalin nod anak; salinan nod yang dikembalikan selepas penyalinan adalah milik dokumen, tetapi tiada nod induk ditetapkan untuknya; // Parameter adalah benar: lakukan salinan dalam, iaitu untuk menyalin nod dan keseluruhan pepohon nod anaknya; // Parameter adalah palsu: lakukan salinan cetek, hanya salin nod itu sendiri; var box = document.getElementById('box');

var clone = box.firstChild.cloneNode(true); // Dapatkan nod anak pertama, true bermaksud salin kandungan

box.appendChild(clone); // Tambahkan pada penghujung senarai nod anak;

(8).kaedah removeChild()

Kaedah ini memadamkan nod yang ditentukan;
box.parentNode.removeChild(box);

Ringkasan: Dalam bab seterusnya~