菜谱 - [: '玩转Javascript DOM接口' |cut:tmp.cut_limit :]

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

/*选择所有的.box*/
var box_list = document.querySelectorAll('.box');

/*遍历结果集*/
box_list.forEach(function (box) {
  /*为每一个.box加样式*/
  box.style.display = 'inline-block';
  box.style.height = '150px';
  box.style.width = '150px';
  box.style.backgroundColor = 'tomato';
});

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

.yo {
  display : inline-block;
  height : 150px;
  width : 150px;
  background-color : tomato;
}

/*选择所有的.box*/
var box_list = document.querySelectorAll('.box');

/*遍历结果集*/
box_list.forEach(function (box) {
  /*为每一个.box加类*/
  box.classList.add('yo');
});

<button id="toggle-box">显示/隐藏</button>
<p id="box">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>

[hidden] {
  display: none;
}

/* 选中.box */
var box = document.querySelector('#box');
/* 选中开关 */
var toggle_box = document.querySelector('#toggle-box');

/* 当开关被点击时 */
toggle_box.addEventListener('click', function () {
  /*倒置元素的隐藏状态，此处也可手动添加样式实现*/
  box.hidden = !box.hidden;
});

<button id="log">打印各项input的值</button>
<div>
  <input type="text" name="username" placeholder="用户名" value="muhaha"><br>
  <input type="password" name="password" placeholder="密码" value="yoyoyo"><br>
  <input type="radio" name="gender" checked> 男
  <input type="radio" name="gender"> 女<br>
  <input type="checkbox" name="love_me" checked> 爱不爱我要一个字的回答<br>
</div>
<pre></pre>

var logger = document.querySelector('#log');
var pre = document.querySelector('pre');
logger.addEventListener('click', function () {
  /*通过.value属性获取input的值*/
  var username = document.querySelector('[name=username]').value;
  var password = document.querySelector('[name=password]').value;
  /*checkbox和radio可以通过.checked取值*/
  var gender = document.querySelector('[name=gender]').checked;
  var love_me = document.querySelector('[name=love_me]').checked;

  console.log('username:', username);
  console.log('password:', password);
  console.log('gender:', gender);
  console.log('love_me:', love_me);

  pre.innerHTML = `username: ${username}\npassword: ${password}\ngender: ${gender}\nlove_me: ${love_me}`;
});

<pre>
{
  username: "LeeShuan0",
  intro: "不，给你一个字的回答"
}
</pre>
<p>
  <button id="setter">将上方对象存入input</button>
</p>
<form>
  <input type="text" name="username" placeholder="用户名"><br>
  <textarea name="intro" placeholder="介绍"></textarea>
</form>

var setter = document.querySelector('#setter');
  var form = document.querySelector('form');
  var user = {
    username: "LeeShuan0",
    intro: "不，给你一个字的回答"
  };

  setter.addEventListener('click', set_data)

  function set_data() {
    /*遍历user对象*/
    for (var key in user) {
      /*以form为范围，找到name等于当前key的元素（一般为input或textarea）*/
      var input = form.querySelector(`[name=${key}]`);
      /*如果不存在，直接进行下一次迭代*/
      if (!input)
        continue;
      /*如果存在就为找到的input设置值*/
      input.value = user[key];
    }
  }

<pre>
{
  username: "LeeShuan0",
  playing: ['lol', 'cs'],
  gender: "female"
}
</pre>
<p>
  <button id="setter">将上方对象存入input</button>
</p>
<form>
  <input type="text" name="username" placeholder="用户名"><br>

  <input type="checkbox" name="playing" value="lol">LOL
  <input type="checkbox" name="playing" value="ow">OW
  <input type="checkbox" name="playing" value="cs">CS<br>

  <input type="radio" name="gender" value="male">男
  <input type="radio" name="gender" value="female">女
</form>

var setter = document.querySelector('#setter');
var form = document.querySelector('form');
var user = {
  username: "LeeShuan0",
  playing: ['lol', 'cs'],
  gender: 'female'
};

setter.addEventListener('click', set_data);

function set_data() {
  /*遍历user对象，此处的key会变成"username"、"playing"...*/
  for (var key in user) {
    /*获取key在user中相对应的值，如："LeeShuan0"、['lol', 'cs']...*/
    var value = user[key];
    /*在form中找到所有name等于当前key的元素，注意此处用的是querySelectorAll()*/
    var input_list = form.querySelectorAll(`[name=${key}]`);

    /*
    * 迭代找到的元素
    * 一般常规的input只会有一个元素：
    * [
    *   <input name="username" type="text" ...>
    * ]
    *
    * 而checkbox通常会有多个：
    * [
    *   <input name="playing" type="checkbox" value="lol">,
    *   <input name="playing" type="checkbox" value="ow">,
    *   <input name="playing" type="checkbox" value="cs">,
    * ]
    * */
    input_list.forEach(function (input) {
      /*如果是input类型是checkbox或radio*/
      if (input.type == 'checkbox' || input.type == 'radio') {
        /*检查input中预设的值是否在playing中*/
        if (value.indexOf(input.value) === -1) {
          /*如果不在就取消打钩*/
          input.checked = false;
        } else {
          /*如果在就打钩*/
          input.checked = true;
        }
      } else {
        /*如果是常规input，直接设置值*/
        input.value = value;
      }
    })
  }
}

<button id="clear-btn">清空下方表单</button>
<form id="user-form">
  用户名 <input type="text" name="username" value="whh"><br>
  年龄 <input type="text" name="age" value="20"><br>
  介绍 <textarea name="intro">Yo.</textarea><br>
  <input type="radio" name="gender" checked>男
  <input type="radio" name="gender">女 <br>
  <input type="checkbox" name="playing" checked>LOL
  <input type="checkbox" name="playing" checked>CS
  <input type="checkbox" name="playing">OW <br>
</form>

var clear_btn = document.querySelector('#clear-btn');

/*选中form中所有的输入组件*/
var input_list = document
  .querySelector('#user-form')
  .querySelectorAll('[name]');

/*当清空按钮被点击时，迭代并清空所有的输入组件*/
clear_btn.addEventListener('click', function () {
  input_list.forEach(function (input) {
    if (input.type == 'checkbox' || input.type == 'radio')
      input.checked = false;
    else
      input.value = null;
  });
});

<table border="1">
  <thead>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>介绍</th>
  </tr>
  </thead>
  <tbody id="entry"><!-- 母元素（动态元素的入口） -->
  </tbody>
</table>

var data = [
  {
    name: '王花花',
    age: 20,
    intro: 'Yo.',
  },
  {
    name: '李拴蛋',
    age: 22,
    intro: 'Yoo.',
  },
  {
    name: '刘备备',
    age: 18,
    intro: 'Yooo.',
  },
];

/*获取母元素*/
var entry = document.querySelector('#entry');

render();

/*
* 通过数据生成视图
* */
function render() {
  /*清空母元素，防止重复添加*/
  entry.innerHTML = '';
  /*迭代每一条数据*/
  data.forEach(function (user) {
    /*创建本条数据所对应的元素*/
    var new_row = document.createElement('tr');
    /*用数据动态的填充元素内容*/
    new_row.innerHTML = `
    <td>${user.name}</td>
    <td>${user.age}</td>
    <td>${user.intro}</td>
    `;
    /*在母元素里边追加新元素*/
    entry.appendChild(new_row);
  })
}

<button>yo</button>
<div id="popup"></div>

#popup {
    display: none;
    padding: 10px 20px;
    background: #0084ff;
    -webkit-box-shadow: 0 0 3px #009bff;
    -moz-box-shadow: 0 0 3px #009bff;
    box-shadow: 0 0 3px #009bff;
    color: #fff;
    position: fixed;
    right: 10px;
    top: 10px;
    font-family: sans-serif;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

var btn = document.querySelector('button');
/*选中提醒元素*/
var el_popup = document.querySelector('#popup');

/*当元素点击时显示提醒*/
btn.addEventListener('click', function () {
  popup('Yo.');
})

/*
* 提醒
* @param String msg 提醒内容
* */
function popup(msg) {
  el_popup.innerHTML = msg;
  el_popup.style.display = 'block';

  /*启动计时器，3秒后隐藏*/
  var timer = setTimeout(function () {
    el_popup.style.display = 'none';
    /*清除计时器*/
    clearTimeout(timer);
  }, 3000);
}

运行结果在Console里

/*测试数据*/
var data = [
  {
    id: 1,
    n: 'a',
  },
  {
    id: 2,
    n: 'b',
  },
  {
    id: 3,
    n: 'c',
  },
  {
    id: 4,
    n: 'a1',
    parent_id: 1
  },
  {
    id: 5,
    n: 'a2',
    parent_id: 1
  },
  {
    id: 6,
    n: 'a3',
    parent_id: 1
  },
  {
    id: 7,
    n: 'b1',
    parent_id: 2
  },
  {
    id: 8,
    n: 'b2',
    parent_id: 2
  },
  {
    id: 9,
    n: 'b3',
    parent_id: 2
  },
  {
    id: 10,
    n: 'c1',
    parent_id: 3
  },
  {
    id: 11,
    n: 'c2',
    parent_id: 3
  },
  {
    id: 12,
    n: 'a1.1',
    parent_id: 4
  },
];

/*r是储存最初结果的地方*/
var result = {
  children: [] // 防止.push方法报错
};
/*记录了所有已经分类并储存的对象*/
var log = [];

/*
* 分类储存顶级对象
* */
function root() {
  data.forEach(function (item, i) {
    if (!item.parent_id) {
      result.children.push(item);
      log.push(i);
    }
  });
}

/*
* 分离每一层
* @param level Array 需要迭代的层级内数组
* */
function starter(level) {
  if (!level)
    return;
  /*迭代当前层级中的每一项*/
  level.forEach(function (parent) {
    /*初始化下一级的children*/
    parent.children = parent.children || [];

    /*迭代所有数据*/
    data.forEach(function (item, i) {
      /*如果已经分类储存直接跳过，进行下一次迭代*/
      if (log.indexOf(i) !== -1)
        return;
      /*如果当前对象的父级id等于父级（外部迭代）的id*/
      if (item.parent_id === parent.id) {
        /*将当前对象推入父级*/
        parent.children.push(item);
        /*记录当前对象的索引，说明这个对象已经分类过了*/
        log.push(i);
        starter(parent.children);
      }
    });
  })
}
/*先找到并分类顶级对象*/
root();
starter(result.children);
console.log('result: ', result);

<p id="wrapper"></p>

var data = [
  {
    id: 1,
    name: '花花市',
    parent_id: 0
  },
  {
    id: 2,
    name: '背背市',
    parent_id: 0
  },
  {
    id: 3,
    name: '花花县',
    parent_id: 1,
  },
  {
    id: 4,
    name: '花一县',
    parent_id: 1,
  },
  {
    id: 5,
    name: '花二县',
    parent_id: 1,
  },
  {
    id: 6,
    name: '背背县',
    parent_id: 2,
  },
  {
    id: 7,
    name: '背一县',
    parent_id: 2,
  },
  {
    id: 8,
    name: '背二县',
    parent_id: 2,
  },
  {
    id: 9,
    name: '花村',
    parent_id: 3,
  },
  {
    id: 10,
    name: '发村',
    parent_id: 3,
  },
  {
    id: 11,
    name: '哈村',
    parent_id: 3,
  },
  {
    id: 12,
    name: '背背村',
    parent_id: 6,
  },
  {
    id: 13,
    name: '佩佩村',
    parent_id: 6,
  },
  {
    id: 14,
    name: '嘿嘿村',
    parent_id: 6,
  },
];

var wrapper = document.querySelector('#wrapper');

render();

/*
* 渲染一级
* @param Number parent_id 父级id
* @param HTMLElement children_el 子级元素
* */
function render(parent_id, children_el) {

  /*如果有子级元素，先清空子级内容*/
  if (children_el)
    children_el.innerHTML = '';

  /*如果是默认选项直接返回*/
  if (parent_id === '')
    return;

  /*父级id默认为0*/
  parent_id = parseInt(parent_id) || 0;

  /*通过传入的父级id过滤得到新的数据*/
  var list = data.filter(function (location) {
    return parent_id === location.parent_id;
  });

  /*如果新数据不存在（也就是没有子级）*/
  if (!list.length)
    return;

  /*创建当前层级以下的总容器（可参考Demo中的HTML结构）*/
  var el = document.createElement('span');
  el.innerHTML = `
  <select></select>
  <span class="children"></span>
  `;

  var select = el.querySelector('select');
  var children = el.querySelector('.children');

  /*设置默认项*/
  var default_option = document.createElement('option');
  default_option.innerText = '- 请选择 -';
  default_option.value = '';
  select.appendChild(default_option);

  /*迭代之前过滤后的新数据*/
  list.forEach(function (location) {
    var option = document.createElement('option');
    option.innerHTML = location.name;
    option.value = location.id;
    select.appendChild(option);
  });

  /*如果是最顶级（没有父级id）*/
  if (!parent_id) {
    /*将生成的元素添加到#wrapper中*/
    document.querySelector('#wrapper').appendChild(el);
  } else {
    /*否则将生成的元素添加到子级的.children元素下*/
    if (children_el)
      children_el.appendChild(el);
  }

  /*当选项发生变化时，渲染子级选项*/
  select.addEventListener('change', function () {
    render(this.value, children);
  });
}

var post_list = [
  {title: 'yo1', cover_url: 'https://dummyimage.com/500x500'},
  {title: 'yo2', cover_url: 'https://dummyimage.com/500x500'},
  {title: 'yo3', cover_url: 'https://dummyimage.com/500x500'},
  {title: 'yo4', cover_url: 'https://dummyimage.com/500x500'},
  {title: 'yo5', cover_url: 'https://dummyimage.com/500x500'},
  {title: 'yo6', cover_url: 'https://dummyimage.com/500x500'},
  {title: 'yo7', cover_url: 'https://dummyimage.com/500x500'},
  {title: 'yo8', cover_url: 'https://dummyimage.com/500x500'},
];

var doc = document.documentElement;
var current_page = 0;
var loading = false;
var loaded_all = false;

init();

function init() {
  /*默认渲染第一页*/
  render_once(current_page);

  /*当页面滚动时*/
  window.addEventListener('scroll', function () {
    /*如果正在加载或所有内容都已加载就直接返回*/
    if (loading || loaded_all) return;

    /*如果：文档的高度 减去 (滚出页面的高度 加 浏览器窗口的高度) 小于 100px*/
    if (doc.scrollHeight - (doc.scrollTop + window.innerHeight) < 100) {
      /*将当前的状态设为加载中*/
      loading = true;

      /*用定时器模拟异步请求，500毫秒后返回数据*/
      setTimeout(function () {
        /*让当前页面自增*/
        current_page++;

        /*渲染自增后的新页面*/
        render_once(current_page);

        /*将当前的状态设为加载完毕*/
        loading = false;
      }, 500)
    }

  });
}


/*渲染一次
* @param page String 需要渲染哪一页，默认为第0页
* @param page String 要几条帖子，默认为2条
* */
function render_once(page, limit) {
  /*由于一页可能包含多张帖子，所以我们需要通过页码，和条数来动态计算*/
  page = page || 0;
  limit = limit || 2;
  var post_start = page * limit;
  var post_end = post_start + limit;

  /*从总数据中抽取那帖子*/
  var list = post_list.slice(post_start, post_end);

  /*如果没有找到，说明所有页面已经全部加载完毕*/
  if (!list.length) {
    loaded_all = true;
    alert('没有更多数据辣~');
    return;
  }

  /*渲染找到的帖子*/
  list.forEach(function (post) {
    var el_post = document.createElement('div');
    el_post.innerHTML = `
    <h2 style="font-size: 50px;">${post.title}</h2>
    <p style="font-size: 30px; line-height: 3;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, culpa cupiditate ipsa obcaecati porro provident quod rerum veniam? Architecto dicta, nisi. Consequuntur ipsum numquam officiis quia veniam voluptas voluptatibus voluptatum.</p>
    `;
    document.body.appendChild(el_post);
  })
}