suchen

Heim >Web-Frontend >js-Tutorial >Beispiele für Knotenoperationen in JS

Beispiele für Knotenoperationen in JS

小云云
小云云Original
2018-03-26 16:16:411350Durchsuche

In diesem Artikel werden hauptsächlich Beispiele für Knotenoperationen in JS vorgestellt, hauptsächlich in Form von Code. Ich hoffe, er kann Ihnen helfen.

Knoten hinzufügen, löschen, ändern und überprüfen

<!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>

Zwei Möglichkeiten, Ereignisse mit JS zu binden

<!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>

Das Klassenattribut von 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>

Ereignisobjekt: kapselt Ereignisinformationen
kann verwendet werden, um die Ausbreitung von Ereignissen zu verhindern 

<!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>

Verwandte Empfehlungen:

Zusammenfassung nativer JavaScript-Operationen auf dom Knoten

Das obige ist der detaillierte Inhalt vonBeispiele für Knotenoperationen in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript 封装 class Event JS 对象 事件 dom
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JS-Code, um einen automatischen Tippeffekt zu erzielenNächster Artikel：JS-Code, um einen automatischen Tippeffekt zu erzielen

In Verbindung stehende Artikel

Mehr sehen