你的位置:首页 > Java教程

[Java教程]DOM选择器API


getElementById()

  getElementById()方法接收一个参数:要取得元素的ID,若找到相应元素则返回该元素,若不存在则返回null

  【IE7-浏览器bug1】ID属性不区分大小写

<div id="box"></div><script>var oBox = document.getElementById('Box');console.log(oBox);//IE7-可以找到该元素,但其他浏览器都返回null</script>

   如果页面中多个元素的ID属性相同,则只返回文档中第一次出现的元素

<div id="box">1</div><div id="box">2</div><script>var oBox = document.getElementById('box');console.log(oBox.innerHTML);//1</script>

  【IE7-浏览器bug2】表单元素的name属性也会被当作ID属性识别出来。因此为了避免这种问题,最好不让表单元素的name属性和其他元素的ID属性相同

<button name="box">0</button><div id="box">1</div><div id="box">2</div><script>var oBox = document.getElementById('box');console.log(oBox.innerHTML);//0</script>

 

getElementsByTagName() 

  getElementsByTagName()该方法接收一个参数,即要取得元素的标签名,而返回的是包含0或多个元素的NodeList。在HTML文档中,这个方法会返回一个HTMLCollection对象,作为一个动态集合,该对象与NodeList非常类似。对于HTMLCollection对象而言,我们可以向方括号中传入数值或字符串形式的索引值。在后台,会对数值索引调用item()方法,对字符串索引调用namedItem()方法。HTMLCollection对象还有一个方法是namedItem(),可以通过元素的name特性或者直接用方括号来取得集合中的项。但safari和IE都不支持该方法。

<ul id="list">  <li >1</li>  <li >2</li>  <li name="in3">3</li>      </ul><script>var oList = document.getElementById('list');var aIn = oList.getElementsByTagName('li');console.log(aIn.length);//3console.log(aIn[0].innerHTML);//1console.log(aIn.item(0).innerHTML);//1console.log(aIn["in3"].innerHTML);//在safari和IE下报错,在其他浏览器下输出3console.log(aIn.namedItem("in3").innerHTML);//在safari和IE下报错,在其他浏览器下输出3

  要想取得所有的元素,可以向getElementsByTagName传入"*",表示全部

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title></head><body><script>var aAll = document.getElementsByTagName('*');//标准浏览器下结果为[html, head, meta, title, body, script]//IE8-浏览器下结果为7个,由于它把<!DOCTYPE html>识别为注释,且把注释识别为元素,所以多1个console.log(aAll);</script></body></html>  

  在HTML中getElementsByTagName()里的元素不需要区分大小写,但在

<div id="box">1</div><script>var aAll = document.getElementsByTagName('DIV')[0];console.log(aAll.innerHTML);//所有浏览器都返回1</script>

 

getElementsByName()

  getElementsByName()该方法会返回带有给定name特性的所有元素,所有浏览器都支持。

  最常用的是取得单选按钮。

<ul >  <li >    <input type="radio" value ="red" name ="color" id="colorRed">    <label for="colorRed">红色</label>  </li>  <li >    <input type="radio" value ="blue" name ="color" id="colorBlue">    <label for="colorBlue">蓝色</label>  </li>  <li >    <input type="radio" value ="green" name ="color" id="colorGreen">    <label for="colorGreen">绿色</label>  </li>    </ul><script>var radios = document.getElementsByName('color');console.log(radios.length)//3</script>

 

getElementsByClassName()

  getElementsByClassName()方法接收一个参数,即一个包含一个或多个类名的字符串,返回带有指定类的所有元素的NodeList。传入多个类名时,类名的先后顺序不重要。(IE8-浏览器不支持)

<ul >    <li >1</li>    <li >2</li>    <li >3</li></ul>  <script>var oTest = document.getElementsByClassName('in ab');console.log(oTest.length);//2</script>

 

classList

  在操作类名时,需要通过className属性添加、删除和替换类名。因为className是一个字符串,所以即使只修改字符串一部分,也必须每次都设置整个字符串的值。要从className字符串中删除一个类名,需要把类名拆开,删除不想要的那个,再重新拼成一个新字符串。(IE9-浏览器不支持)

<ul >    <li >1</li>    <li >2</li>    <li >3</li></ul>  <script>var oTest = document.getElementsByClassName('in ab')[1];function removeClass(obj,str){  var classNames = obj.className.split(/\s+/);  var pos = -1;  for(var i = 0, len = classNames.length; i < len; i++){    if(classNames[i] == str){      pos = i;      break;    }  };  classNames.splice(i,1);  obj.className = classNames.join(' ');}removeClass(oTest,'in');console.log(oTest.className)//ab c</script>

  HTML5为所有元素添加了classList属性,这个classList属性是新集合类型DOMTokenList的实例,它有一个表示自己包含多少元素的length属性,而要取得每个元素可以使用item()方法,也可以使用方括号法。此外,这个新类型还定义如下方法:
  add(value):将给定的字符串值添加到列表中,如果值已存在,则不添加
  contains(value):表示列表中是否存在给定的值,如果存在则返回true,否则返回false
  remove(value):从列表中删除给定的字符串
  toggle(value):如果列表中已经存在给定的值,删除它;如果列表中没有给定的值,添加它。

<ul >    <li >1</li>    <li >2</li>    <li >3</li></ul>  <script>var oTest = document.getElementsByTagName('li')[1];console.log(oTest.classList);//IE9-浏览器返回null,其他浏览器返回["in", "ab"]//删除"in"类oTest.classList.remove("in");console.log(oTest.className);//ab//添加"x"类oTest.classList.add("x");console.log(oTest.className);//ab x//切换"in"类oTest.classList.toggle("in");//ab x inconsole.log(oTest.className);//切换"in"类oTest.classList.toggle("in");//ab xconsole.log(oTest.className);//确定是否包含"in"类console.log(oTest.classList.contains("in"));//false</script>

 

querySelector()

  querySelector()方法接收一个CSS选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null(IE7-浏览器不支持)

<body ><div id="box" ><ul >    <li >1</li>    <li  title="test">2</li>    <li >3</li>  </ul>  </div><script>//返回nullvar oNull = document.querySelector('.null');console.log(oNull);//null//取得body元素var body = document.querySelector("body");console.log(body.style.height);//100%//取得ID为"box"的元素var oBox = document.querySelector('#box');console.log(oBox.style.height);//200px//取得第一个class为"list"的ul元素var oList = document.querySelector('ul.list');console.log(oList.style.height);//100px//取得第一个class为"in"的元素var oIn = document.querySelector('.in');console.log(oIn.innerHTML);//1//取得第一个title属性为test的元素var oTest = body.querySelector('[title="test"]');console.log(oTest.innerHTML);//2</script></body>  

 

querySelectorAll()

  querySelectorAll()接收一个CSS选择符,返回一个NodeList的实例。具体来说,返回的值实际上是带有所有属性和方法的NodeList,而其底层实现则类似于一组元素的快照,而非不断对文档进行搜索的动态查询。这样实现可以避免使用NodeList对象通常会引起的大多数性能问题。只要传给querySelectorAll()方法的CSS选择符有效,该方法都会返回一个NodeList对象,而不管找到多少匹配的元素。如果没有找到匹配的元素,NodeList就是空的。(IE7-浏览器不支持)

<body ><div id="box" ><ul >    <li >1</li>    <li  title="test">2</li>    <li >3</li>  </ul>  </div><script>//返回nullvar oNull = document.querySelectorAll('.null');console.log(oNull);//null//取得body元素var body = document.querySelectorAll("body")[0];console.log(body.style.height);//100%//取得所有class为"in"的元素var oIn = document.querySelectorAll('.in');for(var i = 0 ; i < oIn.length; i++){  console.log(oIn[i].innerHTML);//1,2,3  }//取得title属性为test的元素var oTest = body.querySelectorAll('[title="test"]');console.log(oTest);//[li.in]</script></body>

 

matchesSelector()

  matchesSelector()方法接收一个CSS选择符参数,如果调用元素与该选择符相匹配,返回true;否则返回false(暂无浏览器支持)

console.log(document.body.matchesSelector('body'));//true

  但IE9+浏览器支持msMatchesSelector()方法,firefox支持mozMatchesSelector()方法,safari和chrome支持webkitMatchesSelector()方法。所以兼容写法为:

function matchesSelector(element,selector){  if(element.matchesSelector){    return element.matchesSelector(selector);  }  if(element.msMatchesSelector){    return element.msMatchesSelector(selector);  }  if(element.mozMatchesSelector){    return element.mozMatchesSelector(selector);  }  if(element.webkitMatchesSelector){    return element.webkitMatchesSelector(selector);  }      }console.log(matchesSelector(document.documentElement,'html'));//true