DOM扩展

一,选择符API
1,querySelector()方法
  接收一个CSS选择符,返回与该模式匹配的第一个元素,没有匹配则返回null
  var body = document.querySelector("body") 查找到body元素
  var myDiv = document.querySelector("#myDiv") 查找ID为myDiv元素
  var selected = document.querySelector(".selected") 查找类为selected的元素
  var img = document.querySelector("img.button") 查找类为button的一个img元素
2,querySelectorAll()方法
  接收一个css选择符,返回所有匹配元素,返回的是一个NodeList的实例
  返回的值是带有所有属性和方法的NodeList,如果没有找到则NodeList是空的
  var ems = document.getElementById("div1").querySelector("em") 查找ID为div1中的所有em元素
  var selecteds = document.querySelector(".selected") 获取所有类为selected的元素
  var strongs = document.querySelector("p strong") 获取p元素中的所有strong元素
  要取得NodeList中的每一个元素,可以用item()方法,也可以使用方括号语法
  strong = strongs[i] 或者 strong = strongs.item(i)
3,matchesSelector()方法
  接收一个css选择符,调用元素与该选择符匹配返回true
  IE9通过msMatchesSeclector()支持
  Firefox3.6+通过mozMatchesSelector() 支持
  safari和chrome通过webkitMatchesSelector()支持
  function matchesSeclector(element,selector){
    if(element.matchesSelector){
      return element.matchesSelector;
    }else if(element.msMatchesSelector){
      return element.msMatchesSelector;
    }else if(element.mozMatchesSelector){
      return element.mozMatchesSelector;
    }else if(element.webkitMatchesSelector){
      return element.webkitMatchesSelector;
    }else{
      throw new Error("Not supported");
    }
  }
二,元素遍历
  childElementCount:返回子元素(不包括文本节点和注释)的个数
  firstElementChild:返回第一个子元素,
  lastElementChild:返回最后一个子元素
  previousElementSibling:指向前一个同辈元素
  nextElementSibling:指向下一个同辈元素
  利用这些属性不用担心空白文本节点
  IE9以上才支持
三,HTML5
1,与类相关的扩充
  1)getElementsByClass()方法
  接收一个包含一个或多个类名的字符串参数,返回带有指向类的所有元素的NodeList
  var class = document.getElementsByClassName("username current") 取得类为username 和current的元素,与类名的先后顺序无关
  var selected = document.getElementById("myDiv").getElementsByClassName("selector"); 获取Id为myDiv中的类为selector的元素
  IE9以上才支持
  2)classList属性
  一个类可以有多个类名,通过classList保存着多个类名,classList有length属性保存着类名的个数,用item()方法或者[]取得每个元素
  新类型有如下方法
  add() 将给定的字符串添加到classL列表中
  containes(value) 表示列表中是否存在给定的值,存在返回true
  remove(value) 从列表中删除给定的字符串
  toggle(value) 如果列表中已经存在给定的值,删除它,如果不存在给定的值,添加他
  仅firefox和和chrome支持
2,焦点管理
  document.activeElement属性,始终指向DOM中当前获得了焦点的元素
  默认情况下,文档刚刚加载完成document.activeElement保存的是document.body元素的引用,文档加载结束保存null的值
  document.hasFocus() 判断文档是否获得了焦点,可以判断用户是不是正在与页面交互
3,HTMLDocument的变化
  1)readyState属性
  有两个属性值 loading表示正在加载,complete表示已经加载完文档
  一般用于判断文档是否加载完成 if(document.readyState == 'complete'){}
  2)兼容模式
  document添加了一个名为compatMode的属性,这个属性就是为了告诉大家浏览器采用了哪种渲染模式(标准还是混杂)
  document.compatMode = CSS1Compat表示标准模式
  document.compatMode = BackCompat表示混杂模式
  3)head属性
  var head = document.head || document.getElementsByTagName("head")[0];
  4,字符串属性
  charset属性表示文档中实际使用的字符集,通过meta标签设置
  defaultCharset表示根据默认浏览器及操作系统的设置,当前文档应该默认的字符集
  如果当前文档没有使用默认字符集 则document.charset != document.defaultCharset
5,自定义数据属性
  自定义属性加前缀data-


  通过dataset属性来获取和设置自定义属性的值,此时不用加前缀data-
  var div = document.getElementById("myDiv");
  var appId = div.dataset.appId;
  var myname = div.dataset.myname;
  div.dataset.appId = 325;
  div.dateset.myname = "adgs";
6,插入标记
  1)innerHTML属性
  读模式下 返回与调用元素的所有子节点(包括元素,注释和文本节点)对应的HTML标记,读的时候返回HTML标记
  写模式下 根据指定的值创建新的DOM树,利用这个DOM树完全替换调用元素原先的所有子节点,写的时候会被浏览器解释显示解释后的内容
  限制:一些浏览器通过innerHTML插入script标签不会执行其中的代码,
  IE8以上可以执行其中的代码是要有条件的1,script元素中指定defer属性,2,script必须位于有作用域的元素之后,可以是文本节点,也可以是没有结束标签    的input元素
  如:div.innerHTML = "

你可能感兴趣的:(DOM扩展)