JavaScript基础入门05

1.操作结点

1.1新增节点

1.1.1. 创建元素节点

扫描二维码关注公众号，回复： 17180506 查看本文章

4.4.2点击复选框后将元素放到 "已完成"

4.4.3点击删除按钮删除该任务

1.操作结点

1.1新增节点

分成两个步骤
1. 创建元素节点
2. 把元素节点插入到 dom 树中.
第一步相当于生了个娃, 第二步相当于给娃上户口.

1.1.1. 创建元素节点

使用 createElement 方法来创建一个元素. options 参数暂不关注.

var element = document.createElement(tagName[, options]);

代码示例:

<div class="container">
</div>
<script>
  var div = document.createElement('div');
  div.id = 'mydiv';
  div.className = 'box';
div.innerHTML = 'hehe';
  console.log(div);
</script>

此时发现, 虽然创建出新的 div 了, 但是 div 并没有显示在页面上. 这是因为新创建的节点并没有加入到DOM 树中.

上面介绍的只是创建元素节点, 还可以使用:
        createTextNode 创建文本节点
        createComment 创建注释节点
        createAttribute 创建属性节点
我们以 createElement 为主即可.

1.1.2. 插入节点到 dom 树中

1) 使用 appendChild 将节点插入到指定节点的最后一个孩子之后

element.appendChild(aChild)

<div class="container">
</div>
<script>
  var div = document.createElement('div');
  div.id = 'mydiv';
  div.className = 'box';
  div.innerHTML = 'hehe';
  var container = document.querySelector('.container');
  container.appendChild(div);
</script>

2) 使用 insertBefore 将节点插入到指定节点之前.

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

insertedNode 被插入节点(newNode)
parentNode 新插入节点的父节点
newNode 用于插入的节点
referenceNode newNode 将要插在这个节点之前
如果 referenceNode 为 null 则 newNode 将被插入到子节点的末尾.
注意: referenceNode 引用节点不是可选参数

<div class="container">
  <div>11</div>
  <div>22</div>
  <div>33</div>
  <div>44</div>
</div>
<script>
  var newDiv = document.createElement('div');
  newDiv.innerHTML = '我是新的节点';
  var container = document.querySelector('.container');
  console.log(container.children);
  container.insertBefore(newDiv, container.children[0]);
</script>

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

<div class="container">
  <div>11</div>
  <div>22</div>
  <div>33</div>
  <div>44</div>
</div>
<script>
  var newDiv = document.createElement('div');
  newDiv.innerHTML = '我是新的节点';
  var container = document.querySelector('.container');
  console.log(container.children);
  // 此处的 children 里有 4 个元素
  container.insertBefore(newDiv, container.children[0]);
  // 此处的 children 里有 5 个元素(上面新插了一个), 0 号元素是 新节点,
  // 1 号元素是 11, 2号节点是 22, 所以是插入到 22 之前.
  container.insertBefore(newDiv, container.children[2]);
</script>

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

<div class="container">
  <div>11</div>
  <div>22</div>
  <div>33</div>
  <div>44</div>
</div>
<script>
  var newDiv = document.createElement('div');
  newDiv.innerHTML = '我是新的节点';
  var container = document.querySelector('.container');
  console.log(container.children);
  container.insertBefore(newDiv, container.children[0]);
  // 插入完毕后再次修改 newDiv 的内容
  newDiv.innerHTML = '我是新节点2';
</script>