【原】DOM – Tag/Class/Name

AnXuelin295 2021-01-08

展开全文

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