JavaScript和JQuery获取DIV值的方法示例

就以“JavaScript和jQuery获取DIV值的方法示例”为主题，为大家分享一些JavaScript和jQuery获取<div>元素内容的具体示例。

什么是

元素？

在介绍获取<div>元素内容的方法之前，需要首先了解<div>元素的作用。<div>元素是HTML中的一个块级元素，被用于在网页中划分一个区域，用于灵活的布局，可以用CSS对其进行样式的设置。<div>元素常常用于容纳其他的HTML元素，因此在网页中出现的频率非常高。

如何查找DIV元素

在获取<div>元素内容之前，需要了解如何在网页中找到这个元素。HTML文档解析成DOM树结构，想获取<div>元素的内容，需要首先获取到该元素的DOM节点。而获取DOM节点有很多种方法，如下所示：

通过元素的ID查找节点

如果要获取具有指定ID的元素，则可以使用getElementById()方法：

let element = document.getElementById("divId");

上述代码将返回一个DOM对象，代表ID为"divId"的<div>元素。

通过元素的class查找节点

如果要获取具有指定class名称的元素，则可以使用getElementsByClassName()方法：

let elements = document.getElementsByClassName("divClass");

上述代码返回一个列表，代表class名称为"divClass"的所有<div>元素。

通过元素的标签名称查找节点

如果要获取指定标签名称的元素，在脚本中可使用getElementsByTagName()方法：

let elements = document.getElementsByTagName("div");

这行代码返回一个列表，代表所有的<div>元素。

JavaScript实现获取

元素的值

示例1：直接获取

中的文本内容

如果想获取<div>元素中的文本内容，可以通过innerHTML属性实现。例如，在HTML中，定义了一个拥有ID为"textContent"的<div>元素：

<div id="textContent">This is a test</div>

则可以在脚本中使用以下语句获取该元素的值：

let divText = document.getElementById("textContent").innerHTML;

执行上述代码，divText变量中将包含该<div>元素中的文本内容："This is a test"。

示例2：获取

中的表单元素的值

在<div>元素中可能包含在表单中的文本输入框、单选按钮、复选框等表单元素，如果要获取这些表单元素的值，则需要使用相应的属性或方法。以下是获取一个包含文本输入框、单选按钮、复选框等表单元素的<div>元素的值的示例：

<div id="formDiv">
  <form>
    <input type="text" id="inputText" value="JavaScript">
    <input type="radio" name="radioBtn" value="0"> 男
    <input type="radio" name="radioBtn" value="1"> 女
    <input type="checkbox" name="cbox1" value="1"> 阅读
    <input type="checkbox" name="cbox2" value="2"> 游戏
  </form>
</div>

要获取该<div>元素中的输入框、单选按钮、复选框等表单元素的值，可以通过以下方法：

let inputVal = document.getElementById("inputText").value;
let radioVal = document.querySelector("input[name='radioBtn']:checked").value;
let cboxVals = "";
let cboxElems = document.getElementsByName("cbox1");
for(let i=0; i<cboxElems.length; i++){
  if (cboxElems[i].checked){
    cboxVals += cboxElems[i].value + ",";
  }
}
cboxElems = document.getElementsByName("cbox2");
for(let i=0; i<cboxElems.length; i++){
  if (cboxElems[i].checked){
    cboxVals += cboxElems[i].value + ",";
  }
}

上述代码中，inputVal变量的值为输入框的值；radioVal变量的值为当前选中的单选按钮的值；cboxVals变量的值为当前选中的复选框的值列表(以逗号分隔）。

jQuery实现获取

元素的值

示例1：直接获取

中的文本内容

对于jQuery用户，获取<div>元素中的文本内容更为简单，只需使用text()方法即可，以下是示例代码：

let divText = $("#textContent").text();

上述代码将获取包含ID为"textContent"的<div>元素的文本内容，并将其存储在divText变量中。

示例2：获取

中的表单元素的值

使用jQuery获取<div>元素中的表单元素的值时，其方法与JavaScript略有不同。以下示例代码演示如何获取包含在<div>中的表单元素的值：

let inputVal = $("#inputText").val();
let radioVal = $("input[name='radioBtn']:checked").val();
let cboxVals = "";
$("input[name='cbox1']").each(function(){
  if ($(this).is(":checked")) {
    cboxVals += $(this).val() + ",";
  }
});
$("input[name='cbox2']").each(function(){
  if ($(this).is(":checked")) {
    cboxVals += $(this).val() + ",";
  }
});

上述代码中，inputVal变量的值为输入框的值；radioVal变量的值为当前选中的单选按钮的值；cboxVals变量的值为当前选中的复选框的值列表(以逗号分隔）。

总结

以上两个示例为大家介绍了如何通过JavaScript和jQuery获取<div>元素中的值。具体而言，可以通过脚本来获取<div>元素中的文本内容，也可以获取<div>元素中的表单元素的值。在实际开发中，不同的场景需要采用不同的方法。