Node operation examples in JS-JS Tutorial-php.cn

Node operation examples in JS

小云云

Release： 2018-03-26 16:16:41

Original

1326 people have browsed it

This article mainly shares with you examples of node operations in JS, mainly in the form of code, hoping to help everyone.

Node addition, deletion and modification query

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

Copy after login

Two ways to use JS to bind events

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

Copy after login

JS class attribute

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

Copy after login

Event object: encapsulated Event information
can be used to prevent event propagation

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

Copy after login

Related recommendations:

Summary of native JavaScript operations on dom nodes

The above is the detailed content of Node operation examples in JS. For more information, please follow other related articles on the PHP Chinese website!