javascript

• Selectors API
  
  • querySelector() : 接收一个css选择符， 返回与该模式匹配的第一个元素 ， 如果没有找到匹配的元素返回null， notes： 通过document类型调用querySelector方法会在文档元素的范围内查找，通过element类型只会在该元素后代范围内查找

//取得body元素var body = document.querySelector("body");

     - querySelectorAll():  接收一个css选择符，返回所有匹配元素，返回的是NodeList的实例

var selected = document.querySelectorAll('.selected');

     - matchesSelector():  接收一个css选择符， 如果调用元素与该选择付匹配就返回true

//  matchesSelector aross bower   function matchesSelector(element, selector) {        if (element.matchesSelector) {            return element.matchesSelector(selector);        } else if(element.msMatchesSelector) {            return element.msMatchesSelector(selector);        } else if (element.mozMatchesSelector) {            return element.mozMatchesSelector(selector);        } else if (element.webkitMatchesSelector) {            return element.webkitMatchesSelector();        } else {            throw new Error("no supported")        }    }if (matchesSelector(document.body, 'body.page1')) {    return true;}

• HTML 5
• 与类相关的扩充：
  
  • getElementByClassName(): 接收一个或多个class， 在document上调用会返回所有匹配类名的元素， 在element上调用只会返回元素之后匹配类名的元素

//获取document中所有的page1, page2匹配的类名元素var classList = document.getElementByClassName("page1 page2")

     - classList:          - add(value):   将给定的字符串值添加到列表中         - contains(value)： 列表中是否存在给定的值         - remove(value): 从列表中删除给定的字段         - toggle(value): 切换给定的字段

• 焦点管理：
  
  • document.activeElement(): 获取当前文档的焦点元素
  • document.hasFocus(): 判断当前文档是否处于焦点状态
• HTMLDocument：
  
  • readyState: loading： 文档正在加载， complete： 文档加载完成
  • 兼容模式compatMode: css1Compat: 标准模式， BackCompat: 混杂模式
  • head属性： var header = document.header || document.getElementsByTagName("head")[0];
  • 字符集属性： chartset, 当前文档默认的字符集
  • 自定义数据属性： data-attributeName（属性名字）， 通过dataset来访问自定义属性的值 var attrslist = element.dataset.attributeName

• 插入标记：

  • innerHtml: 读模式下返回调用元素的所有子节点， 在写模式下替换调用元素所有的子节点
  • outerHtml： 读模式下返回调用他的元素及其子节点， 在写模式下替换调用元素及其节点
  • insertAdjacentHTML(position, text): 接收插入位置和插入的html
    
    • 插入位置
    • beforebegin: 在当前元素之前插入一个紧邻的同辈元素
    • afterbegin: 在当前元素之下插入一个新的子元素或者在第一个子元素之前在插入一个新的字元素
    • beforeend： 在当前元素之下插入一个紧邻饿子元素或者在最后一个子元素之后在插入一个新的子元素
    • afterend： 在当前元素之后插入一个紧邻的同辈元素

• scrollerIntoView（ boolean）： true： 调用元素顶部与视口顶部对齐， false： 调用元素尽可能出现在视口中

• 专有扩展：
  
  • 文档模式：

//第一种方式var mode = document.documentMode//第二种方式<meta http-equiv="X-UA-Compatible" content="IE=IEVersion">

• IEVersion
  
  • Edge: 最新的文档模式，
  • EmulateIE9: ie9标准模式
  • EmulateIE8: 文档类型声明，IE8标准模式
  • EmulateIE7：文档类型声明，IE7准模式
  • 9： 忽略文档类型声明， IE9
  • 8： 忽略文档类型声明， IE8
  • 7：忽略文档类型声明， IE7
  • 5：忽略文档类型声明， IE5
• children属性： 调用元素的子节点
• contains（）调用节点是否包含子节点, 接收一个element元素
• 插入文本：
  - innerText(): 在读模式下会返回调用元素的所有子节点的文本，在写模式下会删除调用元素的所有子节点
• 滚动：
  
  • scrollIntoViewIfNeeded( alignCenter) : 当前元素在视口中不可见时， true： 视口垂直方向
  • scrollByLines( lineCount) 将元素内容滚动到指定行高
  • scrollByPages( pageCount) :将元素内容滚动到指定页面高度