Propriétés et méthodes publiques dans le DOM principal
Propriétés et méthodes publiques dans le DOM principal
Remarque : La recherche de nœuds (marqueurs) dans le DOM principal commence à partir du nœud racine de (html nœud).
Accès aux nœuds
-
nodeName : nom du nœud.
nodeValue : La valeur du nœud. Seuls les nœuds de texte ont des valeurs, les nœuds d'éléments n'ont aucune valeur. La valeur de nodeValue ne peut être que du « texte brut » et ne peut contenir aucune balise HTML ou attribut CSS.
firstChild : le 1er nœud enfant.
lastChild : le dernier nœud enfant.
childNodes : liste de nœuds enfants, qui est un tableau.
parentNode : nœud parent.
Comment trouver des balises
document.firstChild
document.firstChild.lastChild
document.body
Opérations d'attribut sur les nœuds
setAttribute(name, value) : Ajouter un attribut à un nœud.
getAttribute(name) : récupère la valeur d'un attribut de nœud.
removeAttribute(name) : Supprime l'attribut d'un nœud.
<!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>Création de noeuds
document.createElement(tagName) : Crée une balise HTML spécifiée, un nœud
tagName : fait référence sans chevrons Le nom de la balise HTML.
Exemple : var imgObj = document.createElement("img")
parentNode.appendChild(childNode) : Ajoutez le nœud créé à un nœud parent.
parentNode représente le nœud parent, et le nœud parent doit exister.
childNode représente le nœud enfant.
Exemple : document.body.appendChild(imgObj)
parentNode.removeChild(childNode) : supprimer un certain Nœuds enfants sous le nœud parent.
parentNode représente le nœud parent.
childNode représente le nœud enfant à supprimer.
Exemple : 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> 
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
