获取相同标签中的内容

最新推荐文章于 2022-06-02 19:12:41 发布

原创最新推荐文章于 2022-06-02 19:12:41 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web前端 #javascript #jquery #each #遍历

javascript与jquery 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍如何使用JavaScript原生方法及jQuery库获取网页中特定div元素的内容，包括获取单个div及多个相同class名div的方法，对比了两种方式的优劣。

获取相同标签中的内容

获取div中的内容

获取div中的内容

html部分

    <div class="box">
         <div class="box-center">
              <div class="box-left">
                    <img src="../image/app.jpg" alt="">
                    <div class="box-two">
                        <div class="app-title">
                            借钱乐
                        </div>
                        <div class="app-txt">
                            机审秒下款，99%通过率
                        </div>
                     </div>
                </div>
                <div class="box-three">
                      <span>最高<span class="num">3400.00</span>元</span>
                      <img src="../image/next.png" alt="">
                    </div>
                </div>
            </div>

jquery方法获取div中内容

1.只获取一个div中的内容

var txt=$('.app-txt').html();
console.log(txt);

有多个相同class名的div，要获取其中的内容，则用each遍历

var txt=$('.app-txt').html();

var i=0;
 $('.app-txt').each(function(index,dom){
    
    var txt=$(this).html();
    //去除文字中的空格
    var txt=txt.replace(/\s*/g,"");
        i++;   
    }   
consloe.log(i);
 })

js原生方法获取内容

var aDiv=document.getElementsByClassName("app-txt");
var arr=new Array();
for(var j=0;j<aDiv.length;j++){
	arr[j]=aDiv[j].innerHTML;
	console.log(arr[j])
	console.log(j)
}
console.log(arr)

在这里插入图片描述

总结

1.使用js原生方法获取div中的内容，使用getElementsByClassName获取，则获取到的是一个伪类，为一个object对象，此时获取它的length，则可以得到共有多少相同classname的div，接着使用for循环更为便捷。
2.相对的jquery的each方法更为便利，则js方法更易懂。