Exemples d'opérations de nœuds dans JS-js tutoriel-php.cn

Exemples d'opérations de nœuds dans JS

小云云

Libérer： 2018-03-26 16:16:41

original

1325 Les gens l'ont consulté

Cet article partage principalement avec vous des exemples d'opérations de nœuds en JS, principalement sous forme de code, j'espère qu'il pourra vous aider.

Ajouter, supprimer, modifier et vérifier des nœuds

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .p1,.p2,.p3,.p4{            width: 300px;            height: 100px;        }
        .p1{            background-color: green;        }
         .p2{            background-color: yellow;        }
         .p3{            background-color: rebeccapurple;        }
         .p4{            background-color: deeppink;        }
    </style></head><body><p class="p1">
    <button onclick="add()">add</button>
    hello p1</p><p class="p2">
    <button onclick="del()">del</button>
    hello p2</p><p class="p3">
    <button onclick="change()">change</button>
    <p>hello p3</p></p><p class="p4">hello p4</p><script>###############增加节点######################    function change() {
        var img=document.createElement("img");//<img src="">
        //img.setAttribute("src","meinv.jpg");
        img.src="meinv.jpg";        var ele=document.getElementsByTagName("p")[0];        var father=document.getElementsByClassName("p3")[0];

        father.replaceChild(img,ele)


    }
    ###############修改节点######################    function add() {
        var ele=document.createElement("p");//<p></p>
        ele.innerHTML="<h1>hello p</h1>";        //ele.innerText="<h1>hello p</h1>";
        ele.style.color="red";
        ele.style.fontSize="10px";        var father=document.getElementsByClassName("p1")[0];
        father.appendChild(ele)

    }
###############删除节点######################    function del() {
        var father=document.getElementsByClassName("p1")[0];        var son=father.getElementsByTagName("p")[0];
        father.removeChild(son)
    }</script></body></html>

Copier après la connexion

Deux façons de lier des événements à l'aide de JS

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title></head><body><p onclick="func(this)">hello</p><p>hello p</p><script>
    // 绑定事件方式一
    function func(self) {
        console.log(self)
        alert(1234)
    }    // 绑定事件方式二
    var ele=document.getElementsByTagName("p")[0]
    ele.onclick=function () {
        console.log(ele);
        console.log(this);//        alert(6666)


    }</script></body></html>

Copier après la connexion

L'attribut de classe JS

<script>
    var ele=document.getElementsByTagName("p")[0];
      # class的名称
    console.log(ele.className);
          # 以列表返回class中值
    console.log(ele.classList[0]);
          # 以列表返回class中值
    console.log(ele.classList[1]);
    #  向列表中增加元素
    ele.classList.add("hide")
    console.log(ele.className);</script>

Copier après la connexion

Objet événement : encapsule les informations sur l'événement
peut être utilisé pour empêcher la propagation des événements

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title></head><body><form action="" id="form1">
    <input type="text" name="username">
    <input type="submit" value="提交"></form><script>
    var ele=document.getElementById("form1");
    ele.onsubmit=function (e) {//        console.log("hello")
        alert(1234);        // 方式一  返回false
         return false
        // 方式二  preventDefault函数
        //e.preventDefault()
    }</script></body></html>

Copier après la connexion

Recommandations associées :

Résumé des opérations JavaScript natives sur les nœuds dom

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!