2017-03-03

任务七：JavaScript和树（一）

Lesson

任务七：JavaScript和树（一）

Target

熟练JavaScript
学习树这种数据结构的基本知识

Reference

Demo

Example Page

Note

DOM中Node节点和Element节点

Node节点包括#text，回车和空格都会作为#text；而Element节点只有HTML内容，不包括#text
Element.children属性
返回一个HTMLCollection对象，包括当前元素节点的所有子元素。它是一个类似数组的动态对象（实时反映网页元素的变化）。如果当前元素没有子元素，则返回的对象包含零个成员。
与Node.childNodes属性的区别是，它只包括HTML元素类型的子节点，不包括其他类型的子节点。
Node.nextSibling属性
返回紧跟在当前节点后面的第一个同级节点。如果当前节点后面没有同级节点，则返回null。注意，该属性还包括文本节点和评论节点。因此如果当前节点后面有空格，该属性会返回一个文本节点，内容为空格。
Node.previousSibling
previousSibling属性返回当前节点前面的、距离最近的一个同级节点。如果当前节点前面没有同级节点，则返回null。
Node.parentNode
parentNode属性返回当前节点的父节点。对于一个节点来说，它的父节点只可能是三种类型：element节点、document节点和documentfragment节点。
Node.parentElement
parentElement属性返回当前节点的父Element节点。如果当前节点没有父节点，或者父节点类型不是Element节点，则返回null。
Node.firstChild，Node.lastChild
firstChild属性返回当前节点的第一个子节点，如果当前节点没有子节点，则返回null（注意，不是undefined）。

树的数据结构

（1）前序遍历（DLR），首先访问根结点，然后遍历左子树，最后遍历右子树。简记根-左-右。

（2）中序遍历（LDR），首先遍历左子树，然后访问根结点，最后遍历右子树。简记左-根-右。

（3）后序遍历（LRD），首先遍历左子树，然后遍历右子树，最后访问根结点。简记左-右-根。

Tips

setTimeout用第2种方法时声明时直接就调用了

<style>
        timer = setTimeout(function(){
          colorDiv(x);
        },1000);
        //一秒延时

        timer = setTimeout(colorDiv(x),1000)
        //无延时
</style>

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #container div{
      min-width: 50px;
      min-height: 20px;
      display: inline-block;
      padding: 5px;
      border: 1px solid #aaa;
      background: #FFF;
    }
  </style>
</head>
<body>
  <div id="container">
    <div>
      <div>
        <div>
          <div></div>
          <div></div>
        </div>
        <div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div>
        <div>
          <div></div>
          <div></div>
        </div>
        <div>
          <div></div>
          <div></div>
        </div>
      </div>
    </div>
  </div>
  <br>
  <div>
    <button id="DLR">前序遍历</button>
    <button id="LDR">中序遍历</button>
    <button id="LRD">后序遍历</button>
  </div>
  <script>
    
    var time1 = 500;
    var time2 = 1000;

    var container = document.getElementById('container');
    var btnDLR = document.getElementById('DLR');
    var btnLDR = document.getElementById('LDR');
    var btnLRD = document.getElementById('LRD');

    function colorDiv(x){
      x.style.background = "#aaa";
    }

    function uncolorDiv(x){
      x.style.background = "#FFF";
    }

    // DLR
    function preOrder(x){
      if(!(x==null)){
        time1 += 500;
        time2 += 500;
        // 上色
        timer = setTimeout(function(){
          colorDiv(x);
        },time1);
        // 去色
        timer = setTimeout(function(){
          uncolorDiv(x);
        },time2);

        preOrder(x.children[0]);
        preOrder(x.children[1]);
      }
    }

    // LDR
    function inOrder(x){
      if(!(x==null)){
        inOrder(x.children[0]);

        time1 += 500;
        time2 += 500;
        // 上色
        timer = setTimeout(function(){
          colorDiv(x);
        },time1);
        // 去色
        timer = setTimeout(function(){
          uncolorDiv(x);
        },time2);


        inOrder(x.children[1]);
      }
    }

    // LRD
    function postOrder(x){
      if(!(x==null)){

        postOrder(x.children[0]); 
        postOrder(x.children[1]);
        
        time1 += 500;
        time2 += 500;
        // 上色
        timer = setTimeout(function(){
          colorDiv(x);
        },time1);
        // 去色
        timer = setTimeout(function(){
          uncolorDiv(x);
        },time2);
      }
    }



    // 绑定事件
    btnDLR.addEventListener('click',function(){
      time1 = 500;
      time2 = 1000;
      preOrder(container.firstElementChild);
    });
    btnLDR.addEventListener('click',function(){
      time1 = 500;
      time2 = 1000;
      inOrder(container.firstElementChild);
    });
    btnLRD.addEventListener('click',function(){
      time1 = 500;
      time2 = 1000;
      postOrder(container.firstElementChild);
    });
  </script>
</body>
</html>