Bincangkan secara terperinci sifat asas DOM dalam kemahiran javascript

Bincangkan secara terperinci sifat asas DOM dalam kemahiran javascript_javascript

WBOY

Lepaskan： 2016-05-16 16:13:05

asal

1181 orang telah melayarinya

Atribut struktur dan kandungan

nodeType

Semua nod mempunyai jenis, dan terdapat sejumlah 12 jenis nod.

Salin kod Kod adalah seperti berikut:

Nod antara muka {

// NodeType

const unsigned short ELEMENT_NODE = 1;

const unsigned short ATTRIBUTE_NODE = 2;

const unsigned short TEXT_NODE = 3;

const unsigned pendek CDATA_SECTION_NODE = 4;

const unsigned pendek ENTITY_REFERENCE_NODE = 5;

const unsigned short ENTITY_NODE = 6;

const unsigned pendek PROCESSING_INSTRUCTION_NODE = 7;

const unsigned short COMMENT_NODE = 8;

const unsigned short DOCUMENT_NODE = 9;

const tidak ditandatangani pendek DOCUMENT_TYPE_NODE = 10;

const unsigned short DOCUMENT_FRAGMENT_NODE = 11;

const unsigned short NOTATION_NODE = 12;

...

}

Dua nod yang paling penting ialah nod elemen (1) dan nod teks (3). Selebihnya jarang digunakan.
Sebagai contoh, apabila menyenaraikan semua nod elemen kanak-kanak, kami boleh mengulanginya dan menggunakan childNodes[i].nodeType != 1 untuk mengesan.
Berikut ialah kod pelaksanaan:

Salin kod Kod adalah seperti berikut:

Pembaca yang dibenarkan:

John

Bob

var childNodes = document.body.childNodes

for(var i=0; i
jika (childNodes[i].nodeType != 1) teruskan

alert(childNodes[i])

}

*Berfikir
Apakah yang akan digesa oleh kod berikut:

Salin kod Kod adalah seperti berikut:

makluman(document.body.lastChild.nodeType)

nodeName, tagName

Kedua-dua nodeName dan tagName mengandungi nama nod.
Untuk document.body

alert( document.body.nodeName ) // BADAN
Semua nodeNames dalam HTML akan menggunakan huruf besar.

Apabila nodeName tidak menggunakan huruf besar
Keadaan ini agak jarang berlaku, jika anda ingin tahu anda boleh membaca di bawah.
Seperti yang anda mungkin sedia maklum, penyemak imbas mempunyai dua cara menghuraikan: mod HTML dan mod __XML. Biasanya skema HTML digunakan, tetapi apabila teknologi XMLHttpRequest__ digunakan untuk mendapatkan dokumen XML, skema XML digunakan.
Mod XML juga digunakan dalam Firefox apabila Jenis Kandungan dokumen XHTML ditetapkan kepada xmlish.
Nama nod akan disimpan dalam skema __XML, jadi badan atau bOdY mungkin muncul.
Oleh itu, jika XML dimuatkan daripada pelayan ke dalam dokumen HTML melalui teknologi XMLHttpRequest__, nama nod akan dikekalkan.

NodeName dan __tagName__ adalah sama untuk elemen.
Tetapi atribut nodeName juga wujud dalam nod bukan elemen dan ia mempunyai nilai istimewa dalam nod ini:

alert(document.nodeName) // #document
Kebanyakan jenis nod tidak mempunyai atribut tagName, dan tagName nod anotasi dalam IE ialah !.
Oleh itu, nodeName secara amnya lebih bermakna daripada tagName. Tetapi tagName adalah seperti versi yang dipermudahkan, jadi anda boleh menggunakannya apabila anda hanya berurusan dengan nod elemen.

innerHTML

innerHTML ialah sebahagian daripada standard HTML5, sila lihat pautan untuk butiran
Ia membenarkan akses teks kepada kandungan nod. Contoh berikut akan mengeluarkan semua kandungan document.body dan menggantikannya dengan kandungan baharu.

Salin kod Kod adalah seperti berikut:

Perenggan

Dan div

alert( document.body.innerHTML ) // baca kandungan semasa
Document.body.innerHTML = 'Yaaahooo!' // gantikan kandungan

innerHTML akan mengandungi HTML yang sah. Tetapi pelayar juga boleh menghuraikan HTML yang cacat.
innerHTML boleh digunakan dalam mana-mana nod elemen. Ia sangat-sangat berguna.

innerHTML pitFalls

innerHTML tidak semudah yang dilihat. Ia mempunyai beberapa perangkap yang menanti pemula, dan kadangkala pengaturcara yang berpengalaman pun tidak dapat mengelakkannya.

InnerHTML nod __table__ dalam IE ialah baca sahaja
Dalam IE, innerHTML dalam COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR dan elemen lain ialah baca sahaja.
Kecuali untuk TD, semua teg innerHTML dalam teg jadual dalam IE adalah baca sahaja.

innerHTML tidak boleh ditambah
Berdasarkan komposisi pernyataan, innerHTML boleh melakukan operasi tambah, seperti:

chatDiv.innerHTML = "

Hai

"
chatDiv.innerHTML = "Apa khabar?"
Tetapi apa yang sebenarnya berlaku:

1. Kandungan lama dikosongkan

2. Kandungan baharu dihuraikan dan disisipkan. Kandungan tidak dilampirkan, ia dijana semula.

Oleh itu, semua gambar dan sumber lain akan dimuat semula selepas operasi =, termasuk smile.gif.

Nasib baik, terdapat cara lain untuk mengemas kini kandungan yang tidak menggunakan innerHTML dan oleh itu tidak mempunyai masalah yang dinyatakan di atas.

nodeValue

innerHTML hanya sah untuk nod elemen.
Untuk jenis nod lain, mereka menggunakan atribut nodeValue untuk mendapatkan kandungan. Contoh berikut menunjukkan cara ia berfungsi pada nod teks dan nod komen.

Salin kod Kod adalah seperti berikut:

Teks

for(var i=0; i
alert(document.body.childNodes[i].nodeValue)

}

위 예에서는 빈 노드로 인해 일부 경고가 비어 있습니다. SCRIPT 노드의 경우 nodeValue === null입니다. SCRIPT가 요소 노드이기 때문입니다. 요소 노드의 경우 innerHTML을 사용합니다.

요약

노드 유형
노드 유형. 가장 중요한 것은 요소 노드가 1이고 텍스트 노드가 3이며 읽기 전용이라는 것입니다.
노드이름/태그이름
라벨 이름은 대문자입니다. 요소가 아닌 노드의 경우 nodeName에는 읽기 전용인 특수 값도 있습니다.
내부HTML
요소 노드의 내용, 쓰기 가능.
노드값
쓰기 가능한 텍스트 노드의 콘텐츠입니다.
DOM 노드에는 유형에 따라 다른 속성이 있습니다. 예를 들어 INPUT 태그에는 value 및 __checked__ 속성이 있습니다. 속성에는 href 등이 있습니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.