导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

冷门技能

针对性攻坚(TODO)

获取元素 document（最顶层）

⭐️ getElementById（document）

• 定义：
  • 通过 id 名获取单个元素
• 参数：
  • 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>

**通配符 ***

var all = document.getElementsByTagName('*');
console.log(all);

⭐️ getElementsByClassName（Document、Element）

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

<div id="container">
  <p class="desc">1</p>
  <p class="desc">2</p>
</div>
<p class="desc outer">3</p>
<script>
  const oPList = document.getElementsByClassName('desc');
  const oContainer = document.getElementById('container');
  const oContainerPList = 
        oContainer.getElementsByClassName('DESC'); // 1. 元素也能调用 2. 大小写也不敏感
  const oSpanList = document.getElementsByClassName('description');
  console.log(
    oPList, // HTMLCollection(3) [p.desc, p.desc, p.desc.outer]
    oContainerPList, // HTMLCollection(2) [p.desc, p.desc]
    oSpanList // HTMLCollection []
  );
</script>

getElementsByName（Document）（用得少）

• 定义：
  • 通过 name 属性名获取一组元素（name 属性只能有一个）
• 参数：
  • 元素的 name 属性名称，大小写敏感
• 返回值：
  • NodeList 集合，没找到返回空集合
• 只能通过 document 对象来调用此方法

<div id="container">
  <p name="desc">1</p>
  <p name="desc">2</p>
</div>
<p name="desc outer">3</p> <!-- name不要写多个名称 -->
<script>
  const oPList = document.getElementsByName('desc');
  const oPList2 = document.getElementsByName('DESC'); // 大小写敏感
  const oSpanList = document.getElementsByName('description');
  console.log(
    oPList, // NodeList(2) [p, p] 最后一个p不会被匹配
    oPList2, // NodeList []
    oSpanList // NodeList []
  );
</script>

⭐️ querySelector、querySelectorAll

• HTML5 新引入Web API
• 兼容到 IE7
• 参数和 CSS 选择器表示方式类似
• 缺点
  • 性能不好
  • 不实时（有缓存，保存的片段。ul下新增li，不会被找到）

querySelector（Document、Element、DocumentFragment）

• 定义：
  • 返回文档中与指定选择器或选择器组匹配的第一个 Element 对象，找不到返回 null
• 参数：
  • 选择器（类似css选择器），大小写不敏感
• 返回值：
  • Element 对象，没找到返回 null
  • 返回的 Element 对象，不实时
• 可通过 document. 和 元素. 的方式调用

<div id="container">
  <p class="desc">1</p>
  <p class="desc">2</p>
</div>
<p class="desc outer">3</p>
<script>
  const oContainer = document.getElementById('container');
  const oP = document.querySelector('.desc');
  const oP2 = document.querySelector('.DESC'); // 大小写不敏感
  const oSpan = document.querySelector('.description');

  const oContainerP = oContainer.querySelector('.desc');
  console.log(
    oP, // p.desc（container中第一个p）
    oP2,  // p.desc（container中第一个p）
    oSpan, // null
    oContainerP, // p.desc（container中第一个p）
  );
</script>

querySelectorAll（Document、Element、DocumentFragment）

• 定义：
• 参数：
• 返回值：
• 可通过 document. 和 元素. 的方式调用

<div id="container">
  <p class="desc">1</p>
  <p class="desc">2</p>
</div>
<p class="desc outer">3</p>
<script>
  const oContainer = document.getElementById('container');
  const oPList = document.querySelectorAll('.desc');
  const oPList2 = document.querySelectorAll('.DESC'); // 大小写不敏感
  const oSpanList = document.querySelectorAll('.description');

  const oContainerPList = oContainer.querySelectorAll('.desc');
  console.log(
    oPList, // NodeList(3) [p.desc, p.desc, p.desc.outer]
    oPList2,  // NodeList(3) [p.desc, p.desc, p.desc.outer]
    oSpanList, // NodeList []
    oContainerPList, // NodeList(2) [p.desc, p.desc]
  );
</script>

body、head