JS基础——DOM扩展

对DOM的主要扩展——选择符API、HTML5。

不那么引人注目的扩展——Element Traversal（元素遍历）规范。

专有扩展。

1、选择符API

（1）与类相关的扩展

（可通过Document、Element调用）

querySelector（“css选择符”）===> 匹配第一个元素；

querySelectorAll（“css选择符”） ===> 返回 NodeList

matchesSelector（“css选择器”） ===> 验证调用元素是否与css选择器匹配，实验性API。

2、元素遍历

• childElementCount：返回子元素个数（不包括文本节点和注释）
• firstElementChild：firstChild的元素版
• lastElementChild
• previousElementSibling
• nextElementSibling

3、HTML5

（1）与类相关的扩充

getElementByClassName（）===>返回 NodeList，包含指定类的所有元素。传入的类名参数先后
                                                         顺序不重要。

classList:添加、替换、删除类名。

（2）焦点管理

document.activeElement属性：这个属性始终会引用DOM中当前获得了焦点的元素。

var button = document.getElementById('myButton');
button.focus();
alert(document.activeElement === button);    //true

 document.hasFocus()：确定文档是否获得了焦点。可以知道用户是否正在与页面交互。

（3）HTMLDocument的变化

HTML5扩展了HTMLDocument，增加了一些新功能。

 （4）字符集属性

• document.charset
• document.defaultCharset

（5）自定义数据属性：data-

HTML5规定的为元素添加非标准属性，但是需要添加上 data-  前缀。

添加了自定义属性以后，可以通过dataset属性来访问自定义属性的值。

 

 （6）插入标记

• innerHTML：读模式，返回调用元素的所有子节点（包括元素、注释、文本节点）；写模式，
                          替换调用元素的所有子节点。
• outerHTML：类似于上面，但是这里的调用元素自身以及所有子节点的HTML标签。
• insertAdjacentHTML(）：插入标记。
  • beforebegin，当前元素之前插入一个紧邻的同辈元素。
  • afterbegin：当前元素之下，第一个子元素之前插入一个新的子元素。
  • beforeend：。。。
  • afterend：。。。
• 内存与性能问题：本节介绍的方法替换子节点可能导致浏览器的内存占用问题。

  for(var i=0;len=value.length;i<len;i++){
      ul.innerHTML += "<li>" + value[i] + "</li>";    //要避免这种频繁的操作！
  }
  
  //最好的做法是单独构建字符串，然后再一次性地将结果字符串赋值给innerHTML
  var itemHTML = "";
  for(var i=0;len = value.length;i<len;i++){
      itemHTML += "<li>" + value[i] + "</li>";
  }
  ul.innerHTML = itemHTML;

（7）scrollIntoView（）

scrollIntoView()可以在所有HTML元素上调用。通过滚动浏览器窗口或者某个容器元素，调用元素就可以出现在视口中。
如果给这个方法传入一个true，或者不传入参数，那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐。
如果传入一个false作为参数，调用元素 会尽可能全部出现在视口中，（可能的话，调用元素的底部会与视口底部平齐）不过顶部不一定平齐。