🌈 获取元素 document（最顶层）

getElementById（document）

• 通过 id 名获取单个元素
• 参数：大小写敏感
• 返回值：
  • 一个 DOM Element 对象，如果没有则返回 null
  • 如果文档中有多个相同id元素，则匹配第一个
• 兼容性：
  • IE8以下，不区分大小写
  • IE8 可以通过 name 属性来找 DOM
• 只能通过 document 对象来调用此方法

<div name='box'></div>
<script>
  var box = document.getElementById('box'); // ie8: div ie8+: null
</script>

<div class="container">
  <div id="id-box" class="class-box1"></div>
</div>
<div id="id-box" class="class-box2"></div>
<script>
  const box = document.getElementById('id-box'); // 小写字母
  const box2 = document.getElementById('Id-Box'); // 大写字母
  console.log(
    box, // 匹配第一个：div#id-box.class-box1
    box2 // null
  ); 
</script>

getElementsByTagName（Document、Element）

• 通过标签名获取一组元素
• 参数：标签名，大小写不敏感
• 返回值：
  • HTML集合 HTMLCollection，没找到返回空集合
  • 返回的 HTML集合 是实时动态更新的
• 可通过 document. 和 元素. 的方式调用

<div id="container">
  <p>1</p>
  <p>2</p>
</div>
<p>3</p>
<script>
  const oPList = document.getElementsByTagName('p'); 
  const oContainer = document.getElementById('container');
  const oContainerPList = 
        oContainer.getElementsByTagName('P'); // 1. 元素也能调用 2. 大小写也不敏感
  const oSpanList = document.getElementsByTagName('span');
  console.log(
    oPList, // HTMLConllection(3) [p, p, p]
    oContainerPList, // HTMLConllection(2) [p, p]
    oSpanList, // HTMLConllection []
  );
</script>

getElementsByClassName（Document、Element）

• 通过类名获取一组元素
• 参数：类名，大小写不敏感
• 返回值：
  • HTML集合 HTMLCollection，没找到返回空集合
  • 返回的 HTML集合 是实时动态更新的
• 可通过 document. 和 元素. 的方式调用