导航

获取元素 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);

Untitled

⭐️ 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，不会被找到）

Untitled

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）

定义：
- 通过选择器获取一组元素
参数：
- 选择器（类似CSS选择器），大小写不敏感
返回值：
- 一个静态 NodeList ，没找到返回空NodeList
- 返回的 NodeList 是静态的
可通过 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

可以通过 document 直接访问
document.title 获取的是 title 元素中的文本而不是 title 整个元素

var body = document.body;
var head = document.head;

Untitled

documentElement

获取整个 html 文档

document.documentElement

Untitled

⭐️ 父、子、兄弟节点的获取

节点不是元素节点，节点包含元素节点 -->> 元素节点 == DOM元素
元素节点树

<ul>
  <li>
  	<h2>我是h2</h2>
		<a>超链接</a>
		<p>p标签</p>
	</li>
</ul>

Untitled

✨ Node.parentNode

定义：
- 获取父节点
注意点：
- document.parentNode 为 null
- parentNode 是指定节点的父节点.一个元素节点的父节点可能是：
  - 一个元素(Element )节点
  - 也可能是一个文档(Document )节点
  - 或者是个文档碎片(DocumentFragment)节点

<div class="container">
  <p>
    <a href="javascript:;" class="link"></a>
  </p>
</div>
<script>
  const oA = document.getElementsByClassName('link')[0];
  console.log("oA:", oA);
  console.log("oA.parentNode:", oA.parentNode);
  console.log("oA.parentNode.parentNode:", oA.parentNode.parentNode);
  console.log("oA.parentNode.parentNode.parentNode:", oA.parentNode.parentNode.parentNode);
  console.log("oA.parentNode.parentNode.parentNode.parentNode:", oA.parentNode.parentNode.parentNode.parentNode);
  console.log("oA.parentNode.parentNode.parentNode.parentNode.parentNode:", oA.parentNode.parentNode.parentNode.parentNode.parentNode);
  console.log("oA.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode:", oA.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode);
</script>

Untitled

✨ Node.parentElement 获取父元素节点

定义：
返回值：

和上面 parentNode 一样的代码：

<div class="container">
  <p>
    <a href="javascript:;" class="link"></a>
  </p>
</div>
<script>
  const oA = document.getElementsByClassName('link')[0];
  console.log("oA:", oA);
  console.log("oA.parentElement:", oA.parentElement);
  console.log("oA.parentElement.parentElement:", oA.parentElement.parentElement);
  console.log("oA.parentElement.parentElement.parentElement:", oA.parentElement.parentElement.parentElement);
  console.log("oA.parentElement.parentElement.parentElement.parentElement:", oA.parentElement.parentElement.parentElement.parentElement);
  console.log("oA.parentElement.parentElement.parentElement.parentElement.parentElement:", oA.parentElement.parentElement.parentElement.parentElement.parentElement);
  console.log("oA.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement:", oA.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement);
</script>

报错的原因是，#document 不是个元素节点，而是节点。所以倒数第二个 log 返回 null；进而导致最后一个 log 报错（null 上边没有 parentElement 方法）

Untitled

获取元素 document（最顶层）

⭐️ getElementById（document）

getElementsByTagName（Document、Element）

**通配符 ***

⭐️ getElementsByClassName（Document、Element）

getElementsByName（Document）（用得少）

⭐️ querySelector、querySelectorAll

querySelector（Document、Element、DocumentFragment）

querySelectorAll（Document、Element、DocumentFragment）

body、head

documentElement

⭐️ 父、子、兄弟节点的获取

✨ Node.parentNode

✨ Node.parentElement 获取父元素节点

通配符 *