JS基础知识(2)

最新推荐文章于 2024-05-31 10:04:55 发布

薛定谔的__猫

最新推荐文章于 2024-05-31 10:04:55 发布

阅读量22

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/m0_64188165/article/details/131309885

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

上一篇文章我们讲到了操作元素, 这几我们接着从操作节点开始讲.

操作节点

讲操作节点前,我们先来了解一下为什么涉及节点的操作:

DOM 树一个页面的结构是一个树形结构, 称为 DOM 树.DOM描绘了一个层次化的节点树，通过节点的操作，来实现对文档内容进行增删改查。

1.页面结构形如:

2.DOM树

重要概念:

文档: 一个页面就是一个文档, 使用 document 表示.
元素: 页面中所有的标签都称为元素. 使用 element 表示.
节点: 网页中所有的内容都可以称为节点(标签节点, 注释节点, 文本节点, 属性节点等). 使用 node 表示.

新增节点分成两个步骤:

1. 创建元素节点

2. 把元素节点插入到 dom 树中.

//创建一个节点 
var element=document.createElement('div');

<div class="container">
    <div>11</div>
    <div>22</div>
    <div>33</div>
</div>
<script>
  //创建节点:创建一个元素节点
  var node=document.createElement('div');
  node.id='mydiv';
  node.innerText='heihei';
  console.log(node);
  //1.追加节点，追加到最后一个元素的后边
  document.querySelector(".container").appendChild(node);
//也可以追加到指定节点的前边
  var node1=document.createElement('div');
  node1.innerText="新加入的";
//追加节点的第二种写法
  var container=document.querySelector('.container');
  //把node1 节点加入到上边的第2个孩子位置，从0开始
  container.insertBefore(node1,container.children[2]);

  //删除指定节点
  container.removeChild(node1);

</script>

一旦一个节点插入完毕, 再针对刚刚的节点对象进行修改, 能够同步影响到 DOM 树中的内容.

如果针对一个节点插入两次, 则只有最后一次生效(相当于把元素移动了)

表白墙的实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表白墙</title>
  <style>

    .container{
      width:350px;
      height:300px;
      margin: 0 auto;
      text-align: center;
    }
    .grey{
      color:grey;
    }
    .container .row{
      width:350px;
      height:40px;

      display:flex;
      justify-content: space-between;
      align-items: center;
    }
    .container .row input{
      width:260px;
      height:30px;
    }
    #submit{
      width:350px;
      height:40px;
      background-color: deepskyblue;
      color:white;
      border: none;
      margin:10px;
      border-radius: 5px;
      font-size:20px;

    }
  </style>
</head>
<body>
<div class="container">
  <h1>表白墙</h1>
  <p class="grey">输入后点击提交，会将信息显示在表格中</p>
  <div class="row">
    <span>谁：</span><input type="text" name="" id="from">
  </div>
  <div class="row">
    <span>对谁：</span><input type="text" name="" id="to">
  </div>
  <div class="row">
    <span>说什么：</span><input type="text" name="" id="say">
  </div>
  <input type="button" value="提交" id="submit">
</div>

<script>
  var submitBtn=document.querySelector('#submit');
  submitBtn.onclick=function(){
    //获取留言内容
    var fromE=document.querySelector('#from');
    var toE=document.querySelector('#to');
    var sayE=document.querySelector('#say');
    if(fromE.value==''||toE.value==''||sayE.value==''){
      return;
    }
    //构造节点
    var divE=document.createElement('div');
    divE.innerText=fromE.value+"对"+toE.value+"说："+sayE.value;
    //把节点添加到页面上
    document.querySelector(".container").appendChild(divE);
    //置为空
    fromE.value="";
    toE.value="";
    sayE.value="";

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