cari

Rumah >hujung hadapan web >tutorial js >Tutorial asas tentang mengendalikan nod DOM HTML dengan pengetahuan JavaScript_Basic

Tutorial asas tentang mengendalikan nod DOM HTML dengan pengetahuan JavaScript_Basic

WBOY
WBOYasal
2016-05-16 15:11:031645semak imbas

Oleh kerana kewujudan DOM, ini membolehkan kami memperoleh, mencipta, mengubah suai atau memadamkan nod melalui JavaScript.
NOTA: Elemen dalam contoh yang disediakan di bawah adalah semua nod elemen.
Dapatkan nod

Hubungan bapa-anak

element.parentNode
element.firstChild/element.lastChild
element.childNodes/element.children

Hubungan persaudaraan

element.previousSibling/element.nextSibling
element.previousElementSibling/element.nextElementSibling

Memperoleh nod melalui hubungan langsung antara nod akan mengurangkan kebolehselenggaraan kod (perubahan dalam hubungan antara nod secara langsung akan menjejaskan pemerolehan nod), tetapi masalah ini boleh diselesaikan dengan berkesan melalui antara muka.

Memperoleh nod melalui hubungan langsung antara nod akan mengurangkan kebolehselenggaraan kod (perubahan dalam hubungan antara nod secara langsung akan menjejaskan pemerolehan nod), tetapi masalah ini boleh diselesaikan dengan berkesan melalui antara muka. 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>ELEMENT_NODE & TEXT_NODE</title>
</head>
<body>
 <ul id="ul">
 <li>First</li>
 <li>Second</li>
 <li>Third</li>
 <li>Fourth</li>
 </ul>
 <p>Hello</p>
 <script type="text/javascript">
 var ulNode = document.getElementsByTagName("ul")[0];
 console.log(ulNode.parentNode);    //<body></body>
 console.log(ulNode.previousElementSibling); //null
 console.log(ulNode.nextElementSibling);  //<p>Hello</p>
 console.log(ulNode.firstElementChild);  //<li>First</li>
 console.log(ulNode.lastElementChild);  //<li>Fourth</li>
 </script>
</body>
</html>

NTOE: Orang yang berhati-hati akan mendapati bahawa dalam contoh traversal nod, tidak ada ruang antara nod badan, ul, li, dan p, kerana jika terdapat ruang, maka ruang akan dianggap sebagai nod TEKS, jadi gunakan ulNode.previousSibling mendapat nod teks kosong dan bukannya nod 25edfb22a4f469ecb59f1190150159c6Firstbed06894275b65c1ab86501b08a632eb Iaitu, beberapa atribut traversal nod akan mendapat semua jenis nod, manakala traversal elemen hanya akan mendapat nod elemen yang sepadan. Dalam keadaan biasa, atribut traversal nod elemen lebih biasa digunakan.
Laksanakan versi element.children yang serasi dengan penyemak imbas
Sesetengah pelayar lama tidak menyokong kaedah element.children, tetapi kita boleh menggunakan kaedah berikut untuk mencapai keserasian. 

<html lang>
<head>
 <meta charest="utf-8">
 <title>Compatible Children Method</title>
</head>
<body id="body">
 <div id="item">
 <div>123</div>
 <p>ppp</p>
 <h1>h1</h1>
 </div>
 <script type="text/javascript">
 function getElementChildren(e){
  if(e.children){
  return e.children;
  }else{
  /* compatible other browse */
  var i, len, children = [];
  var child = element.firstChild;
  if(child != element.lastChild){
   while(child != null){
   if(child.nodeType == 1){
    children.push(child);
   }
   child = child.nextSibling;
   }
  }else{
   children.push(child);
  }
  return children;
  }
 }
 /* Test method getElementChildren(e) */
 var item = document.getElementById("item");
 var children = getElementChildren(item);
 for(var i =0; i < children.length; i++){
  alert(children[i]);
 }
 </script>
</body>
</html>

NOTA: Kaedah keserasian ini adalah draf awal dan belum diuji untuk keserasiannya.
Antara muka untuk mendapatkan nod elemen

getElementById
getElementsByTagName
getElementsByClassName
querySelector
querySelectorAll

2016311163518624.png (793×256)

getElementById

Dapatkan objek nod dengan id yang ditentukan dalam dokumen. 

var element = document.getElementById('id');
getElementsByTagName

Dapatkan koleksi nod elemen dengan teg tertentu secara dinamik (nilai pulangannya akan dipengaruhi oleh perubahan DOM dan nilainya akan berubah). Antara muka ini boleh diperolehi terus melalui elemen dan tidak perlu bertindak secara langsung pada dokumen. 

// 示例
var collection = element.getElementsByTagName('tagName');

// 获取指定元素的所有节点
var allNodes = document.getElementsByTagName('*');

// 获取所有 p 元素的节点
var elements = document.getElementsByTagName('p');
// 取出第一个 p 元素
var p = elements[0];


getElementsByClassName
Dapatkan semua nod dengan kelas yang ditentukan dalam elemen yang ditentukan. Pilihan kelas berbilang boleh dipisahkan dengan ruang, tanpa mengira susunan.
var elements = element.getElementsByClassName('className');
NOTA: IE9 dan ke bawah tidak menyokong getElementsByClassName
Kaedah yang serasi 

function getElementsByClassName(root, className) {
 // 特性侦测
 if (root.getElementsByClassName) {
 // 优先使用 W3C 规范接口
 return root.getElementsByClassName(className);
 } else {
 // 获取所有后代节点
 var elements = root.getElementsByTagName('*');
 var result = [];
 var element = null;
 var classNameStr = null;
 var flag = null;

 className = className.split(' ');

 // 选择包含 class 的元素
 for (var i = 0, element; element = elements[i]; i++) {
  classNameStr = ' ' + element.getAttribute('class') + ' ';
  flag = true;
  for (var j = 0, name; name = className[j]; j++) {
  if (classNameStr.indexOf(' ' + name + ' ') === -1) {
   flag = false;
   break;
  }
  }
  if (flag) {
  result.push(element);
  }
 }
 return result;
 }
}

querySelector / querySelectorAll

Dapatkan elemen pertama atau semua elemen senarai (hasil pemulangan tidak akan terjejas oleh pengubahsuaian DOM berikutnya dan tidak akan berubah selepas pemerolehan) yang sepadan dengan pemilih CSS masuk. 

var listElementNode = element.querySelector('selector');
var listElementsNodes = element.querySelectorAll('selector');

var sampleSingleNode = element.querySelector('#className');
var sampleAllNodes = element.querySelectorAll('#className');

NOTA: IE9 tidak menyokong querySelector dan querySelectorAll
Buat nod

Buat nod -> Tetapkan sifat -> 

var element = document.createElement('tagName');

Ubah suai nod

Kandungan teks
Mendapat atau menetapkan kandungan teks nod dan nod turunannya (untuk semua kandungan teks dalam nod). 

element.textContent; // 获取
element.textContent = 'New Content';
NOTA: IE 9 dan ke bawah tidak disokong.


InnerTeks (tidak mematuhi W3C)
Mendapat atau menetapkan kandungan teks nod dan keturunannya. Ia berfungsi hampir sama dengan textContent. 

element.innerText;
NOTA: Tidak mematuhi spesifikasi W3C dan tidak menyokong pelayar FireFox.

Penyelesaian Keserasian FireFox

if (!('innerText' in document.body)) {
 HTMLElement.prototype.__defineGetter__('innerText', function(){
 return this.textContent;
 });
 HTMLElement.prototype.__defineSetter__('innerText', function(s) {
 return this.textContent = s;
 });
}

Sisipkan nod

tambahkan Anak

Tambahkan nod elemen dalam elemen yang ditentukan. 


var aChild = element.appendChild(aChild);

masukkan Sebelum

Masukkan elemen yang ditentukan sebelum nod yang ditentukan bagi elemen yang ditentukan. 


var aChild = element.insertBefore(aChild, referenceChild);

Padamkan nod

Padamkan nod elemen anak nod yang ditentukan. 


var child = element.removeChild(child);

innerHTML

Dapatkan atau tetapkan semua kandungan HTML dalam nod yang ditentukan. Menggantikan semua kandungan dalaman sebelumnya dan mencipta kumpulan nod yang baharu sepenuhnya (mengalih keluar acara dan gaya yang ditambahkan sebelum ini). innerHTML tidak menyemak kandungan, berjalan terus dan menggantikan kandungan asal.

NOTA: Ini hanya disyorkan apabila mencipta nod baharu. Tidak boleh digunakan di bawah kawalan pengguna. 

var elementsHTML = element.innerHTML;

存在的问题+

  • 低版本 IE 存在内存泄露
  • 安全问题（用户可以在名称中运行脚本代码）

PS: appendChild() , insertBefore()插入节点需注意的问题
使用appendChild()和insertBefore()插入节点都会返回给插入的节点，

//由于这两种方法操作的都是某个节点的子节点，所以必须现取得父节点，代码中 someNode 表示父节点 
//使用appendChild()方法插入节点 
var returnedNode = someNode.appendChild(newNode); 
alert(returnedNode == newNode) //true 
 
//使用insertBefore()方法插入节点 
var returnedNode = someNode.appendChild(newNode); 
alert(returnedNode == newNode) //true

 值得注意的是，如果这两种方法插入的节点原本已经存在与文档树中，那么该节点将会被移动到新的位置，而不是被复制。

<div id="test"> 
 <div>adscasdjk</div> 
  <div id="a">adscasdjk</div> 
</div> 
<script type="text/javascript"> 
 var t = document.getElementById("test"); 
 var a = document.getElementById('a'); 
 //var tt = a.cloneNode(true); 
 t.appendChild(a); 
</script>

在这段代码中，页面输出的结果和没有Javascript时是一样的，元素并没有被复制，由于元素本来就在最后一个位置，所以就和没有操作一样。如果把id为test的元素的两个子元素点换位置，就可以在firbug中看到这两个div已经被调换了位置。
如果我们希望把id为a的元素复制一个，然后添加到文档中，那么必须使被复制的元素现脱离文档流。这样被添加复制的节点被添加到文档中之后就不会影响到文档流中原本的节点。即我们可以把复制的元素放到文档的任何地方，而不影响被复制的元素。下面使用了cloneNode()方法，实现节点的深度复制，使用这种方法复制的节点会脱离文档流。当然，我不建议使用这种方法复制具有id属性的元素。因为在文档中id值是唯一的。

<div id="test"> 
 <div>adscasdjk</div> 
  <div id="a">adscasdjk</div> 
</div> 
<script type="text/javascript"> 
 var t = document.getElementById("test"); 
 var a = document.getElementById('a'); 
 var tt = a.cloneNode(true); 
 t.appendChild(tt); 
</script>

相似的操作方法还有 removeNode(node)删除一个节点，并返回该节；replaceNode(newNode，node)替换node节点，并返回该节点。这两种方法相对来说更容易使用一些。

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Operasi asas kawalan Html jQuery (pengumpulan dan organisasi harian)_jqueryArtikel seterusnya：Operasi asas kawalan Html jQuery (pengumpulan dan organisasi harian)_jquery

Artikel berkaitan

Lihat lagi