1. Selectors API

1.1 querySelector()

querySelector()方法
参数：CSS 选择符参数
返回：匹配该模式的第一个后代元素
如果没有匹配到则返回null

  1. // 取得<body>元素
  2. let body = document.querySelector("body"); 
  3. // 取得 ID 为"myDiv"的元素
  4. let myDiv = document.querySelector("#myDiv");
  5. // 取得类名为"selected"的第一个元素
  6. let selected = document.querySelector(".selected"); 
  7. // 取得类名为"button"的图片
  8. let img = document.body.querySelector("img.button");

1.2 querySelectorAll()

querySelectorAll()方法
和querySelector（）差不多，但是返回的是一个NodeList静态实例
注意：它是静态的“快照”，而非“实时”的查询

  1. // 取得 ID 为"myDiv"的<div>元素中的所有<em>元素
  2. let ems = document.getElementById("myDiv").querySelectorAll("em"); 
  3. // 取得所有类名中包含"selected"的元素
  4. let selecteds = document.querySelectorAll(".selected"); 
  5. // 取得所有是<p>元素子元素的<strong>元素
  6. let strongs = document.querySelectorAll("p strong");
  1. let strongElements = document.querySelectorAll("p strong"); 
  2. // 以下 3 个循环的效果一样
  3. for (let strong of strongElements) { 
  4.  strong.className = "important"; 
  5. } 
  6. for (let i = 0; i < strongElements.length; ++i) { 
  7.  strongElements.item(i).className = "important"; 
  8. } 
  9. for (let i = 0; i < strongElements.length; ++i) { 
  10.  strongElements[i].className = "important"; 
  11. }

1.3 matches()

matches()方法
作用：查看某个元素是否在页面中
参数：一个 CSS 选择符
返回：如果元素匹配则该选择符返回 true，否则返回 false

  1. if (document.body.matches("body.page1")){ 
  2.  // true 
  3. }

2. 元素遍历

添加了5个属性，防止注释和文本的干扰

  • childElementCount，返回子元素数量（不包含文本节点和注释）；
  • firstElementChild，指向第一个 Element 类型的子元素（Element 版 firstChild）；
  • lastElementChild，指向最后一个 Element 类型的子元素（Element 版 lastChild）；
  • previousElementSibling ，指向前一个 Element 类型的同胞元素（ Element 版previousSibling）；
  • nextElementSibling，指向后一个 Element 类型的同胞元素（Element 版 nextSibling）。
    有了这些属性，就不需要再判断nodeType是否等于1了

3. HTML5

3.1 CSS 类扩展

getElementsByClassName()
参数：一个或多个类名
返回一个NodeList类型

  1. // 取得所有类名中包含"username"和"current"元素
  2. // 这两个类名的顺序无关紧要
  3. let allCurrentUsernames = document.getElementsByClassName("username current"); 
  4. // 取得 ID 为"myDiv"的元素子树中所有包含"selected"类的元素
  5. let selected = document.getElementById("myDiv").getElementsByClassName("selected");

3.2 classList 属性

对于拥有多个class的元素，为了避免一个个拆分clss，可以使用classList 属性，是一个新的集合类型 DOMTokenList 的实例。
DOMTokenList实例增加的方法

  • add(value)，向类名列表中添加指定的字符串值 value。如果这个值已经存在，则什么也不做。
  • contains(value)，返回布尔值，表示给定的 value 是否存在。
  • remove(value)，从类名列表中删除指定的字符串值 value。  toggle(value)，如果类名列表中已经存在指定的 value，则删除；如果不存在，则添加。

删除某个类名：

  1. div.classList.remove("user");
  1. // 删除"disabled"类
  2. div.classList.remove("disabled"); 
  3. // 添加"current"类
  4. div.classList.add("current");
  5. // 切换"user"类
  6. div.classList.toggle("user"); 
  7. // 检测类名 
  8. if (div.classList.contains("bd") && !div.classList.contains("disabled")){ 
  9.  // 执行操作
  10. ) 
  11. // 迭代类名
  12. for (let class of div.classList){ 
  13.  doStuff(class); 
  14. }

3.2 焦点管理

document.activeElement
返回：当前拥有焦点的元素

document.hasFocus()方法
作用：判断文档是否拥有焦点

focus()方法
作用：让某个元素自动获得焦点

  1. let button = document.getElementById("myButton"); 
  2. button.focus(); 
  3. console.log(document.activeElement === button); // true

3.3 HTMLDocument 扩展

3.3.1 readyState 属性

document.readyState 属性

  • loading，表示文档正在加载；
  • complete，表示文档加载完成。
  1. if (document.readyState == "complete"){ 
  2.  // 执行操作
  3. }

3.3.2 compatMode 属性

这个属性唯一的任务是指示浏览器当前处于什么渲染模式
标准模式下 document.compatMode 的值是”CSS1Compat”，
而在混杂模式下，document.compatMode 的值是”BackCompat”：

  1. if (document.compatMode == "CSS1Compat"){ 
  2.  console.log("Standards mode"); 
  3. } else { 
  4.  console.log("Quirks mode"); 
  5. }

3.3.3 head 属性

作为对 document.body（指向文档的元素）的补充，HTML5 增加了 document.head 属性，指向文档的元素

3.4 字符集属性

characterSet 属性表示文档实际使用的字符集，也可以用来指定新字符集。

  1. console.log(document.characterSet); // "UTF-16" 
  2. document.characterSet = "UTF-8";

3.5 自定义数据属性

使用前缀 data-以便告诉浏览器，这些属性既不包含与渲染有关的信息

  1. // 本例中使用的方法仅用于示范
  2. let div = document.getElementById("myDiv"); 
  3. // 取得自定义数据属性的值
  4. let appId = div.dataset.appId; 
  5. let myName = div.dataset.myname; 
  6. // 设置自定义数据属性的值
  7. div.dataset.appId = 23456; 
  8. div.dataset.myname = "Michael"; 
  9. // 有"myname"吗？
  10. if (div.dataset.myname){ 
  11.  console.log(`Hello, ${div.dataset.myname}`);

3.6 插入标记

3.6.1 innerHTML 属性

innerHTML 属性读取时，会返回元素所有后代的 HTML 字符串。

  1. <div id="content"> 
  2. <p>This is a <strong>paragraph</strong> with a list following it.</p> 
  3. <ul> 
  4. <li>Item 1</li> 
  5. <li>Item 2</li> 
  6. <li>Item 3</li> 
  7. </ul> 
  8. </div>

对于这里的

元素,其 innerHTML 属性会返回以下字符串：

  1. <p>This is a <strong>paragraph</strong> with a list following it.</p> 
  2. <ul> 
  3.  <li>Item 1</li> 
  4.  <li>Item 2</li> 
  5.  <li>Item 3</li> 
  6. </ul>