如何用原生js实现点击子级a标签给父级div添加class再点击就移除class

JavaScript014

如何用原生js实现点击子级a标签给父级div添加class再点击就移除class,第1张

<!DOCTYPE html>

<html>

 <head>

  <title>测试页面2</title>

  <meta charset="UTF-8"/>

  <style>

   .tdiv{

    border:2px solid

   }

  </style>

  <script>

   function test(ele){

    var pDiv=ele.parentNode

    if(pDiv.className==" "){

     pDiv.className="tdiv"

    }else{

     pDiv.className=" "

    }

   }

   //还可以用classList，这种方法更流畅

   function test2(ele){

        var pDiv=ele.parentNode

        if(pDiv.classList.contains("tdiv")){

             pDiv.classList.remove("tdiv")

        }else{

             pDiv.classList.add("tdiv")

        }

       }

  </script>

 </head>

 <body>

  <div>

   <a onclick="test(this)">测试</a>

  </div>

 </body>

</html>

添加节点append；移除节点removeChild；移动节点：var sdds=document.getElementById；创建节点createTextNode()；查找节点：document.getElementsByTagName。

其他方法：

创建新节点

createDocumentFragment() //创建一个DOM片段

createElement() //创建一个具体的元素

createTextNode() //创建一个文本节点

添加、移除、替换、插入

appendChild() //添加

removeChild() //移除

replaceChild() //替换

insertBefore() //插入

查找

getElementsByTagName() //通过标签名

称

getElementsByName() //通过元素的Name属性的值

getElementById() //通过元素Id，唯一性

实现一个函数clone，可以对JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进行值复制。

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。

2、在index.html中的<script>标签，输入js代码：$('div').css('margin-left', 0)。

3、浏览器运行index.html页面，此时div中的style属性的margin-left被成功去除。