获取和操作 DOM 节点

<div id="html-element">
  我是一个元素
</div>

<script>
  var element = document.getElementById('html-element');

  element.innerHTML = '<a href="//imooc.com">我变成了超链接</a>';
</script>

<form>
  <div>
    <label>
      <input type="checkbox" name="skill" checked="checked" value="JavaScript"> JavaScript
    </label>

    <label>
      <input type="checkbox" name="skill" value="c++"> C++
    </label>

    <label>
      <input type="checkbox" name="skill" checked="checked" value="Java"> Java
    </label>
  </div>
</form>
<div id="result"></div>

<script>
  var checkboxes = document.getElementsByName('skill');

  var skills = [];

  checkboxes.forEach(function(checkbox) {
    if (checkbox.getAttribute('checked')) {
      skills.push(checkbox.value);
    }
  });

document.getElementById('result').innerHTML = '选中的技能：' + skills.join('、');
</script>

<div>
  <p>我是第一个段落。</p>
  <p>我是第二个段落。</p>
  <p>我是第三个段落。</p>
  <p>我是第四个段落。</p>
  <p>我是第五个段落。</p>
</div>
<div id="result" style="color: #4caf50;"></div>
<script>
  var pList = document.getElementsByTagName('p');

  var res = [];
  var i, len;
  for (i = 0, len = pList.length; i < len; i++) {
	res.push(pList[i].innerText);
  }
  
  document.getElementById('result').innerHTML = '所有 p 标签的内容：<br>' + res.join('<br>');
</script>

<div>
  <div class="odd">1</div>
  <div class="even">2</div>
  <div class="odd">3</div>
  <div class="even">4</div>
  <div class="odd">5</div>
  <div class="even">6</div>
</div>
<div id="result"></div>
<script>
  var odd = document.getElementsByClassName('odd');

  var res = [];
 
  var i, len;
  for (i = 0, len = odd.length; i < len; i++) {
    res.push(odd[i].innerText);
  }

  var resultElement = document.getElementById('result');

  resultElement.innerHTML = '所有奇数：<br>' + res.join('<br>');
</script>

<div>
  <div id="tip">今日大甩卖！！一双袜子 <strong>三</strong> 块！三双袜子只要 <strong>十</strong> 块！！</div>
</div>

<script>
  var tip = document.querySelector('#tip');

  tip.style.color = 'red';
</script>

<ul>
  <li>我是列表1</li>
  <li>我是列表2</li>
  <li>我是列表3</li>
  <li>我是列表4</li>
</ul>

<button class="change">变！</button>

<script>
  var lis = document.querySelectorAll('li');
  var btn = document.querySelector('.change');

  btn.addEventListener('click', function() {
    lis.forEach(function(li, index) {
      li.innerText = index;
    });
  });
</script>

<style>
  .show {
    display: block;
  }

  .hidden {
    display: none;
  }
</style>

<p class="tip show">我要早睡早起，不能再熬夜了。</p>
<button class="toggle">切换</button>

<script>
  var toggleBtn = document.querySelector('.toggle');
  var tipEle = document.querySelector('.tip');

  toggleBtn.addEventListener('click', function() {
    var className = tipEle.className;

    if (className.indexOf('show') > -1) {
      tipEle.className = 'tip hidden';
      return;
    }

    tipEle.className = 'tip show';
  });
</script>

<label>
  <input type="checkbox" class="checkbox">
  爱我别走
</label>

<div style="margin-top: 16px;">
  <button class="toggle">切换!</button>
</div>

<script>
  var checkbox = document.querySelector('.checkbox');
  var toggleBtn = document.querySelector('.toggle');

  toggleBtn.onclick = function() {
    var checked = checkbox.getAttribute('checked');

    if (checked) {
      checkbox.removeAttribute('checked', '');
    } else {
      checkbox.setAttribute('checked', 'checked');
    }
  };
</script>

<div>
  <ul>
    <li>i</li>
    <li>love</li>
    <li>imooc</li>
  </ul>
</div>

<script>
  var lisColl = document.querySelectorAll('li');
  
  var lisArray1 = [].slice.call(lisColl);
  var lisArray2 = Array.prototype.slice.call(lisColl);
  
	var map = function(li) {
    return li.innerText;
  };
  
  console.log(lisArray1.map(map).join(' ')); // 输出：i love imooc
  console.log(lisArray2.map(map).join(' ')); // 输出：i love imooc
</script>

<div>
  <ul>
    <li>i</li>
    <li>love</li>
    <li>imooc</li>
  </ul>
</div>

<script>
  NodeList.prototype.join = Array.prototype.join; // 提供 join 方法

  var lisColl = document.querySelectorAll('li');

  lisColl.__proto__.map = Array.prototype.map; // 提供 map 方法

  var map = function(li) {
    return li.innerText;
  };

  console.log(lisColl.map(map).join(' ')); // 输出：i love imooc
</script>

<div>
  <ul>
    <li>i</li>
    <li>love</li>
    <li>imooc</li>
  </ul>
</div>

<script>
  var lisColl = document.querySelectorAll('li');
  var lis = [];
  
  var i, len;
  for (i = 0, len = lisColl.length; i < len; i++) {
    lis.push(lisColl[i]);
  }
  
  var str = lis
    .map(function(li) {
      return li.innerText
    })
    .join(' ');

  console.log(str); // 输出：i love imooc
</script>

<div>
  <ul>
    <li>i</li>
    <li>love</li>
    <li>imooc</li>
  </ul>
</div>

<script>
  var lisColl = document.querySelectorAll('li');
  var arr = [...lisColl];
  
  console.log(Array.isArray(lisColl)); // 输出：false
  console.log(Array.isArray(arr)); // 输出：true
</script>