前端技术——Node对象

最新推荐文章于 2023-12-18 13:47:19 发布

涛涛英语学不进去

最新推荐文章于 2023-12-18 13:47:19 发布

阅读量135

点赞数

分类专栏：前端文章标签： Node对象

本文链接：https://blog.csdn.net/niTaoTaoa/article/details/103249588

版权

前端专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node对象</title>
  <style>
    div{
      border: 1px solid red;
    }
    <!--#是id选择器-->
    #div1{
     width: 200px;
      height: 200px;
    }
    #div2{
      width: 100px;
      height: 100px;
    }
    #div3{
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
<div id="div1">
  <div id="div2">div2</div>
  div1
</div>
<!--
    超链接的功能：
                1.可以被点击，样式
                2.点击后跳转到href指定地点url

            需求：保留1功能，去掉2功能
            实现： href="javascript:void=(0)"


-->
<!--这里void是一个阻止返回值的运算符-->
<a href="javascript:void (0)" id="del">删除子节点</a>
<!--<input id="del" type="button" value="删除子节点">-->
<a href="javascript:void (0)" id="add">添加子节点</a>
<script>
  //1.获取超链接
  var element_a=document.getElementById("del");
  //2.绑定单击事件
  element_a.onclick=function () {
      var div1=document.getElementById("div1");
      var div2=document.getElementById("div2");
      div1.removeChild(div2);
  };
  //1.获取超链接
  var element_a2=document.getElementById("add");
  //2.绑定单击事件
  element_a2.onclick=function () {
      var div1=document.getElementById("div1");
      //给div1添加子节点
      //创建子节点
        var div3=document.createElement("div");
        //设置div3的属性
        div3.setAttribute("id","div3");
        div1.appendChild(div3);

  };
    var div2=document.getElementById("div2");
    var div1=div2.parentNode;
    alert(div1);

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