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节点
var node_body = document.all.div1;
//查找img节点
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 >
//网页加载完成后
window.onload = function(){
//创建一个<img>标记
var imgObj = document.createElement("img");
//增加属性
imgObj.setAttribute("src","/upload/course/000/000/009/580ae23c4a88a881.jpg");
imgObj.setAttribute("width","400");
//将创建的图片节点，挂载到某个父节点下
document.body.appendChild(imgObj);
}
</script>
</head>
<body>
</body>
</html> 
![Projek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Kursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutorial bahagian hadapan WEB [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Aplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
