DOM – Tag/Class/Name

ByTagName
document.getElementsByTagName( );
参数：标签名也就是< >里的
功能：获取当前页面上所有符合该标签名标准的元素节点标
举个小例子：
<head> <meta charset="utf-8"> <title></title> <script> window.onload = function(){ varaLis = document.getElementsByTagName("li"); alert(aLis); alert(aLis.length); }</script></head><body> <ul> <li>111111</li> <li>222222</li> <li>333333</li> <li>444444</li> </ul> <ol> <li>555555</li> <li>666666</li> <li>777777</li> <li>888888</li> </ol></body>
运行结果如下：
可以看到返回了一个object HTML Collection
这是一个数组，既然是数组那么我们就可以了解他的返回值为
返回值：一个装有符合条件的元素节点的数组
如果我们只想找ul里面的li，该怎么操作呢？
<head> <meta charset="utf-8"> <title></title> <script> window.onload = function(){ var oUl = document.getElementById("a"); var aLis = oUl.getElementsByTagName("li"); //这里是重点，先找id，再找id下的标签 alert(aLis.length); }</script></head><body> <ul id="a"> <li>111111</li> <li>222222</li> <li>333333</li> <li>444444</li> </ul> <ol> <li>555555</li> <li>666666</li> <li>777777</li> <li>888888</li> </ol></body>
运行结果如下，返回结果为4个：
也就是说不只可以写成
document.getElementsByTagName();
还可以将找到id的变量替换为document
node.getElementsByTagName();
从node节点开始，找出所有符合条件的标签
我们可以通过for循环，来看一下是否是获取的ul中的4个li
<head> <meta charset="utf-8"> <title></title> <script> window.onload = function(){ var oUl = document.getElementById("a"); var aLis = oUl.getElementsByTagName("li"); //alert(aLis.length); for(i=0;i<aLis.length;i++){ alert(aLis[i].innerHTML); } }</script></head><body> <ul id="a"> <li>111111</li> <li>222222</li> <li>333333</li> <li>444444</li> </ul> <ol> <li>555555</li> <li>666666</li> <li>777777</li> <li>888888</li> </ol></body>
运行结果如下：
比如说我们要获取ul中的第二个li，我们可以用两种方式获取
第一种：
alert( aLis[ 1 ] .innerHTML); //返回第二个li
第二种：
alert( aLis.item( 1 ).innerHTML );  //与上面返回的结果相同
大家可以自己写到上面的代码中试一下
我们一般都是用第一种方法，中括号加下标的数组方法
ByName
document.getElementsByName( );
参数：name值
返回值：装有条件的元素节点的数组
举个小例子：
<head> <metacharset="utf-8"> <title></title> <script> window.onload = function(){ varnodes = document.getElementsByName("hello"); alert(nodes.length); }</script> </head> <body> <div name="hello"></div> <span name="hello"></span> <input name="hello" /> <divid="div1"> <span name="hello"></span> </div> </body>
运行结果如下：
基本上可以判定页面上的name为hello的都获取到了
如果我们不想获得div1下的span这个标签内容呢，如何操作？
答案是无法操作，ByName只支持查找全部
我们来试着像刚才改ByTagName那改一下ByName
<head> <metacharset="utf-8"> <title></title> <script> window.onload = function(){ //var nodes = document.getElementsByName("hello"); //alert(nodes.length); varoDiv = document.getElementById("div1"); varnodes = oDiv.getElementsByName("hello"); alert(nodes.length); }</script> </head> <body> <div name="hello"></div> <span name="hello"></span> <input name="hello" /> <divid="div1"> <span name="hello"></span> </div> </body>
运行结果就是什么都不返回，并且还报错！
注意：
name属性一般只有文本输入框input才有，虽然在实际运用中在其他标签写name值也能找到，但是不推荐这样写
ByClassName
我们来看最后一个获取元素节点的方法
document.getElementsByClassName( );
参数：class名
功能：获取node节点下，所有符合条件的元素节点
返回值：所有符合条件的元素节点组成的数组
举个小例子：

 <head> <meta charset="utf-8"> <title></title> <script> window.onload = function(){ var nodes = document.getElementsByClassName("box"); //alert(nodes); alert(nodes.length); }</script> </head> <body> <ul id="ul1"> <li>111111</li> <li class="box">222222</li> <li>333333</li> <li class="box">444444</li> </ul> <ol id="ol1"> <li class="box">555555</li> <li>666666</li> <li class="box">777777</li> <li>888888</li> </ol> </body>
运行结果如下：
我们来输出一下每个class对应的网页内容：
<head> <meta charset="utf-8"> <title></title> <script> window.onload = function(){ var nodes = document.getElementsByClassName("box"); //alert(nodes.length); for(i=0;i<nodes.length;i++){ alert(nodes[i].innerHTML); } }</script> </head> <body> <ul id="ul1"> <li>111111</li> <li class="box">222222</li> <li>333333</li> <li class="box">444444</li> </ul> <ol id="ol1"> <li class="box">555555</li> <li>666666</li> <li class="box">777777</li> <li>888888</li> </ol> </body>
运行结果如下：
我们如果想要获取ul下的calss为box的节点元素，应该怎么操作呢？
这个是可以操作的，和ByTagName的写法差不多
首先将ul获取到：
var  oUl  =  document.getElementById(“ul1”);
再通过oUl获取class为box的元素节点：
var  aLis  =  oUl.getElementsByClassName(“box”);
再通过for循环获取具体内容
具体写法如下：
<head> <meta charset="utf-8"> <title></title> <script> window.onload = function(){ //var nodes = document.getElementsByClassName("box"); //// alert(nodes.length); //for(i=0;i<nodes.length;i++){ // alert(nodes[i].innerHTML); //} var oUl = document.getElementById("ul1"); var aLis = oUl.getElementsByClassName("box"); for(i=0;i<aLis.length;i++){ alert(aLis[i].innerHTML); } }</script> </head> <body> <ul id="ul1"> <li>111111</li> <li class="box">222222</li> <li>333333</li> <li class="box">444444</li> </ul> <ol id="ol1"> <li class="box">555555</li> <li>666666</li> <li class="box">777777</li> <li>888888</li> </ol> </body>
运行结果如下：
这里可以看出，ByClassName是可以从nodes任意位置开始查找符合条件的class
注意：
在低版本的IE浏览器中ByClassName是不兼容的
★★★不兼容低版本的IE浏览器怎么办呢？
我们可以封装一个函数，兼容的方法，然后再进行下面操作：
1.找到parent下所有的元素节点
var  nodes  =  parent.getElementsByTagName( ‘*’ ); 
// * 为通配符
2.再声明一个函数，来记录符合条件的元素节点
var  result  =  [ ];
通过for循环来判断，如果符合条件，就添加到数组中
if  ( nodes[ i ].className  ==  classStr ){
       result.push( nodes[ i ] );
}
3.最后把装有所有符合条件的数组result返回
return  result;
完整的JavaScript如下所示：
<head> <meta charset="utf-8"> <title></title> <script> window.onload = function(){ var oUl = document.getElementById("ul1"); var nodes = elementByClassName(oUl,"box"); for(var i=0;i<nodes.length;i++){ alert(nodes[i].innerHTML); } } functionelementByClassName(parent,classStr){ var nodes = parent.getElementsByTagName("*"); var result = []; for(vari=0;i<nodes.length;i++){ if(nodes[i].className == classStr){ result.push(nodes[i]); } } return result; }</script> </head> <body> <ul id="ul1"> <li>111111</li> <li class="box">222222</li> <li>333333</li> <li class="box">444444</li> </ul> <ol id="ol1"> <li class="box">555555</li> <li>666666</li> <li class="box">777777</li> <li>888888</li> </ol> </body>
运行结果如下：
此处先做了解即可
- 写作不易，大家多多关注，谢谢啦-
---web分享，分享的不只是web
赞 (0)

相关推荐