JS의 노드 작업 예

小云云원래의: 2018-03-26 16:16:411379검색

이 기사는 주로 JS의 노드 작업 예제를 주로 코드 형식으로 공유합니다.

노드 추가, 삭제, 수정 및 확인

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

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>

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

이벤트 객체의 클래스 속성: 이벤트 정보를 캡슐화합니다
이벤트 전파를 방지하는 데 사용할 수 있습니다

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

JS의 노드 작업 예

관련 기사