Sifat dan kaedah awam dalam DOM teras
Sifat awam dan kaedah dalam DOM teras
Nota: Mencari nod (penanda) dalam DOM teras bermula dari nod akar (html nod).
Akses nod
-
Nama nod: nama nod.
nodeValue: Nilai nod. Hanya nod teks mempunyai nilai, nod elemen tidak mempunyai nilai. Nilai nodeValue hanya boleh menjadi "teks biasa" dan tidak boleh mengandungi sebarang teg HTML atau atribut CSS.
anak pertama: nod anak pertama.
anak terakhir: nod anak terakhir.
childNodes: senarai nod anak, yang merupakan tatasusunan.
parentNode: nod induk.
Cara mencari tag
document.firstChild
<> ??>- document.firstChild.lastChild
- document.body
Operasi atribut pada nod
- setAttribute(nama, nilai): Tambahkan atribut pada nod.
- getAttribute(name): Dapatkan nilai atribut nod.
- moveAttribute(name): Padamkan atribut nod.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<script type="text/javascript">
window.onload = function(){
//查找body節(jié)點
var node_body = document.all.div1;
//查找img節(jié)點
var imgObj = node_body.firstChild;
//增加屬性
imgObj.setAttribute("src","https://img.php.cn/upload/course/000/000/009/580ae23c4a88a881.jpg");
imgObj.setAttribute("width","400");
imgObj.setAttribute("border","2");
imgObj.setAttribute("style","cursor:pointer;");
//刪除border屬性
imgObj.removeAttribute("border");
}
</script>
</head>
<body ><div id="div1"><img /></div></body>
</html>Penciptaan nod
- document.createElement(tagName): Mencipta teg HTML yang ditentukan, nod
- tagName: merujuk kepada tanpa kurungan sudut Nama daripada teg HTML.
- Contoh: var imgObj = document.createElement("img")
- parentNode.appendChild(childNode): Tambahkan nod yang dibuat pada nod induk.
- parentNode mewakili nod induk dan nod induk mesti wujud.
- childNode mewakili nod anak.
- Contoh: document.body.appendChild(imgObj)
- parentNode.removeChild(childNode): padam yang tertentu Nod anak di bawah nod induk.
- parentNode mewakili nod induk.
- childNode mewakili nod anak yang akan dipadamkan.
- Contoh: document.body.removeChild(imgObj)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>php.cn</title>
<script >
//網(wǎng)頁加載完成后
window.onload = function(){
//創(chuàng)建一個<img>標記
var imgObj = document.createElement("img");
//增加屬性
imgObj.setAttribute("src","/upload/course/000/000/009/580ae23c4a88a881.jpg");
imgObj.setAttribute("width","400");
//將創(chuàng)建的圖片節(jié)點，掛載到某個父節(jié)點下
document.body.appendChild(imgObj);
}
</script>
</head>
<body>
</body>
</html> 
