需要准备的材料分别有：电脑、html编辑器、浏览器。
1、首先，打开html编辑器，新建html文件，例如：indexhtml，填充问题基础代码。
2、在indexhtml中的<script>标签中，输入js代码：var id = $('div')attr('id');documentbodyinnerText = id;。
3、浏览器运行indexhtml页面，此时取到了div的id并成功打印出了。
可以使用jQuery的children方法来获取某个元素下的所有子元素。
工具原料：编辑器、浏览器
1、使用children方法可以获得选择器下的所有子元素，代码实例如下：
<!DOCTYPE html><html>
<head>
<script type="text/javascript" src="/jquery/jqueryjs"></script>
<style>
body { font-size:16px; font-weight:bolder; }
p { margin:5px 0; }
</style>
</head>
<body>
<div>
<span>Hello</span>
<p class="selected">Hello Again</p>
<div class="selected">And Again</div>
<p>And One Last Time</p>
</div>
<script>$("div")children("selected")css("color", "blue");</script>
</body>
</html>
2、运行的结果是找到类名为 "selected" 的所有 div 的子元素，并将其设置为蓝色，结果如下：
原生JS有3种方式来获取元素:
getElementById('id') getElementsByName('name') getElementsByTagName('tag') getElementById是获取元素最快的方式,但我们不能给每个HTML元素都加以ID吧,所以我们需要一个很方便的通过className来获取元素 function getElementsByClassName(className,tagName){ var ele=[],all=documentgetElementsByTagName(tagName||""); for(var i=0;i<alllength;i++){ if(all[i]className==className){ ele[elelength]=all[i]; } } return ele; } consolelog(getElementsByClassName("entry")); consolelog(getElementsByClassName("entry","div"));
实现原理很简单,通过getElementsByTagName获取到一个元素集合,如果传入了tagname这个参数就根据传入的
tagname来获取,否则获取所有的元素,然后再一个一个元素来匹配classname是否相等
上面这个方法很粗糙,能实现我们的基本需求,如果我们要获取的元素有多个 classname怎么办
明显通过className==是不行了
所以我们只要把上面两篇文章的hasclass函数搬过来就OK了，我们再次来改造下我们的getElementsByClassName函数
function getElementsByClassName(className,tagName){ var ele=[],all=documentgetElementsByTagName(tagName||""); for(var i=0;i<alllength;i++){ if(all[i]classNameclassNamematch(new RegExp('(\\s|^)'+cls+'(\\s|$)'))){ ele[elelength]=all[i]; } } return ele; }
这样就能处理一个元素含有多个classname的情况了
1、新建一个html文件，命名为testhtml，用于讲解JS如何获取指定DIV下的子元素LI的值。
2、在testhtml文件内，在div标签内，使用ul、li标签创建两个项目列表，li元素的值分别为项目一、项目二。
3、在testhtml文件内，设置div标签的id为mydiv，主要用于下面通过该id获得mydiv对象。
4、在testhtml文件内，使用button标签创建一个按钮，按钮名称为“获取LI的值”。
5、在testhtml文件中，给button按钮绑定onclick点击事件，当按钮被点击时，执行getli
6、通过获得li对象，使用each()方法遍历每一个li对象，通过text()方法获得li的值，使用push()方法将获得li值存进数组中。最后，使用alert()方法将所有li值输出。
7、在浏览器打开testhtml文件，点击按钮，查看结果。
jQuery的元素选择器可以根据class选择元素。例如，获取class='aaa'的DIV元素的代码为：$("divaaa")
。下面提供一个具体的示例，HTML结构如下：
<div
id='a'><div
class='aaa'></div></div>
<div
id='b'><div
class='aaa'></div></div>
<div
id='c'><div
class='aaa'></div></div>
1、获取id为b的div下的aaa类元素
$("divaaa")获取的是所有的aaa类，如果限定为b元素下的aaa类，可以配合后代选择器使用，代码为：$("div#b
divaaa")
2、获取id为a或者c的div下的aaa类元素
如果需要获取多个不同类型的对象，可以使用逗号（,）分隔，所以相应代码为：
$("#a
aaa,
#c
aaa")
一、途径：
第一种情况就是宽高都写在样式表里，就比如#div1{width:120px;}。这中情况通过#div1stylewidth拿不到宽度，而通过#div1offsetWidth才可以获取到宽度。
第二种情况就是宽和高是写在行内中，比如style="width:120px;"，这中情况通过上述2个方法都能拿到宽度。
二、小结：
因为idoffsetWidth和idoffsetHeight无视样式写在样式表还是行内，所以我们获取元素宽和高的时候最好用这2个属性。注意如果不是写在行内style中的属性都不能通过idstyleatrr来获取。
三、代码：
var o = documentgetElementById("view");
var h = ooffsetHeight; //高度
var w = ooffsetWidth; //宽度
参考资料
js获取Html元素的实际宽度高度的方法脚本之家[引用时间2017-12-29]
以上就是关于js如何获取div中的数据全部的内容，包括:js如何获取div中的数据、jQuery怎么获取一个DIV下所有元素的值、getelementbytagname("div")方法可以获取所有的DIV元素，但是获取到集合后，如何进一步获取class属性为特等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）