Ringkasan kemahiran JavaScript nod dan senarai contoh_javascript

Contoh dalam artikel ini meringkaskan kaedah nod JavaScript dan operasi senarai. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

(1) Cipta nod baharu

createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点

(2) Tambah, alih keluar, ganti, masukkan

appendChild()
removeChild()
replaceChild()
insertBefore()

(3) Cari

getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性

Contoh HTML untuk digunakan dalam bahagian ini

<ul id="myList">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>

1. Cipta nod elemen

Kaedah

document.createElement() digunakan untuk mencipta elemen, menerima satu parameter, iaitu nama tag bagi elemen yang akan dibuat dan mengembalikan nod elemen yang dicipta

var div = document.createElement("div"); //创建一个div元素
div.id = "myDiv"; //设置div的id
div.className = "box"; //设置div的class

Selepas mencipta elemen, anda juga perlu menambah elemen pada pepohon dokumen

2. Tambah nod elemen

kaedah appendChild() digunakan untuk menambah nod pada penghujung senarai childNodes dan mengembalikan nod elemen untuk ditambahkan

var ul = document.getElementById("myList"); //获得ul
var li = document.createElement("li"); //创建li
li.innerHTML = "项目四"; //向li内添加文本
ul.appendChild(li); //把li 添加到ul子节点的末尾

Selepas menambah:

<ul id="myList">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
<li>项目四</li>
</ul>

Kaedah appendChild() juga boleh menambah elemen sedia ada dan memindahkan elemen dari kedudukan asalnya ke kedudukan baharu

var ul = document.getElementById("myList"); //获得ul
ul.appendChild(ul.firstChild); //把ul的第一个元素节点移到ul子节点的末尾

Selepas berlari (IE):

<ul id="myList">
<li>项目二</li>
<li>项目三</li>
<li>项目一</li>
</ul>

Kaedah

insertBefore(), jika anda tidak memasukkan nod pada penghujungnya, tetapi ingin meletakkannya pada kedudukan tertentu, gunakan kaedah ini Kaedah ini menerima 2 parameter, yang pertama ialah nod yang akan disisipkan kedua ialah Nod rujukan, mengembalikan nod elemen untuk ditambahkan

var ul = document.getElementById("myList"); //获得ul
var li = document.createElement("li"); //创建li
li.innerHTML= "项目四"; //向li内添加文本
ul.insertBefore(li,ul.firstChild); //把li添加到ul的第一个子节点前

Selepas menambah:

<ul id="myList">
<li>项目四</li>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>

var ul = document.getElementById("myList"); //获得ul
var li = document.createElement("li"); //创建li
li.innerHTML= "项目四"; //向li内添加文本
ul.insertBefore(li,ul.lastChild); //把li添加到ul的子节点末尾

Selepas menambah:

<ul id="myList">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
<li>项目四</li>
</ul>

var ul = document.getElementById("myList"); //获得ul
var li = document.createElement("li"); //创建li
li.innerHTML= "项目四"; //向li内添加文本
var lis = ul.getElementsByTagName("li") //获取ul中所有li的集合
ul.insertBefore(li,lis[1]); //把li添加到ul中的第二个li节点前

Selepas menambah:

<ul id="myList">
<li>项目一</li>
<li>项目四</li>
<li>项目二</li>
<li>项目三</li>
</ul>

3. Keluarkan nod elemen

kaedah removeChild(), digunakan untuk mengalih keluar nod, menerima satu parameter, iaitu nod yang akan dialih keluar, dan mengembalikan nod yang dialih keluar Harap maklum bahawa nod yang dialih keluar masih dalam dokumen, tetapi kedudukannya tidak lagi dalam dokumen.

var ul = document.getElementById("myList"); //获得ul
var fromFirstChild = ul.removeChild(ul.firstChild); //移除ul第一个子节点
var ul = document.getElementById("myList"); //获得ul
var lis = ul.getElementsByTagName("li") //获取ul中所有li的集合
ul.removeChild(lis[0]); //移除第一个li，与上面不同，要考虑浏览器之间的差异

4. Gantikan nod elemen

Kaedah

replaceChild(), digunakan untuk menggantikan nod, menerima dua parameter, parameter pertama ialah nod yang akan dimasukkan, parameter kedua ialah nod yang akan diganti dan mengembalikan nod yang diganti

var ul = document.getElementById("myList"); //获得ul
var fromFirstChild = ul.replaceChild(ul.firstChild); //替换ul第一个子节点
var ul = document.getElementById("myList"); //获得ul;
var li = document.createElement("li"); //创建li
li.innerHTML= "项目四"; //向li内添加文本
var lis = ul.getElementsByTagName("li") //获取ul中所有li的集合
var returnNode = ul.replaceChild(li,lis[1]); //用创建的li替换原来的第二个li

5. Salin nod

kaedah cloneNode(), digunakan untuk menyalin nod, menerima parameter Boolean, true bermaksud salinan dalam (menyalin nod dan semua nod anaknya), false bermaksud salinan cetek (menyalin nod itu sendiri, bukan menyalin nod kanak-kanak)

var ul = document.getElementById("myList"); //获得ul
var deepList = ul.cloneNode(true); //深复制
var shallowList = ul.cloneNode(false); //浅复制

Berikut ialah contoh lengkap mencipta projek senarai menggunakan JavaScript dan menyalin nod anak:

Kod JavaScript ini memaparkan dan mencipta item senarai, menyalin nod anak dan menyalin pepohon nod Ia merupakan contoh yang sangat berguna, terutamanya berguna apabila membuat menu pepohon.

Kesan operasi adalah seperti yang ditunjukkan di bawah:

Kod khusus adalah seperti berikut:

<html>
<head>
<title>建立列表项目</title>
<script language="JavaScript">
function printChilds(objNode) {
  var strMsg = "节点名称 =" + objNode.nodeName + "\n";
  if (objNode.hasChildNodes()){
   var nodeCount = objNode.childNodes.length;
   strMsg += "子节点数 = " + objNode.childNodes.length + "\n";
   for(var i = 0; i < nodeCount; i++)
     strMsg += "标记名称 = " + objNode.childNodes[i].nodeName + "\n";
   alert(strMsg);
  }
}
function copyNode(objNode, objDupNode, deep){
  var tempNode = objDupNode.cloneNode(deep);
  objNode.appendChild(tempNode);
}
</script>
</haed>
<body id="myBody">
<h2>建立列表项目</h2>
<hr>
<ul id="myUL">
  <li>项目1
  <li>项目2
   <ol id="myOL">
     <li>次项目1
     <li>次项目2
   </ol>
  <li>项目3
</ul>
<form>
<input type="button" value="显示列表的子节点" onclick="printChilds(myUL)">
<input type="button" value="复制节点" onclick="copyNode(myUL, myUL.childNodes[1], false)">
<input type="button" value="复制节点树" onclick="copyNode(myUL.lastChild, myOL, true)">
</form>
</body>
</html>

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.