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
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
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
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';
InnerTeks (tidak mematuhi W3C)
Mendapat atau menetapkan kandungan teks nod dan keturunannya. Ia berfungsi hampir sama dengan textContent.
element.innerText;
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节点，并返回该节点。这两种方法相对来说更容易使用一些。
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1382
52
Sempadan Jadual dalam HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.
HTML jidar-kiri
Sep 04, 2024 pm 04:48 PM
Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.
Jadual Bersarang dalam HTML
Sep 04, 2024 pm 04:49 PM
Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.
Susun Atur Jadual HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.
Pemegang Tempat Input HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.
Senarai Tertib HTML
Sep 04, 2024 pm 04:43 PM
Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing
Memindahkan Teks dalam HTML
Sep 04, 2024 pm 04:45 PM
Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.
Butang onclick HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.
