Fieldset()函数的属性与方法介绍

Fieldset()函数是HTML中的一个元素构造函数，代表一组相关元素的集合。它用于将一组表单元素放置在一个边框中，以便将其逻辑和视觉上与其他表单元素分组。

Fieldset对象有一些常用的属性和方法，下面是它们的介绍和使用示例：

1. disabled属性：指定fieldset是否可用。设置为true表示禁用，设置为false表示启用。

<fieldset id="myFieldset">
  <legend>Personal Information</legend>
  <input type="text" name="name" disabled>
  <input type="email" name="email" disabled>
</fieldset>

<script>
  var fieldset = document.getElementById("myFieldset");
  fieldset.disabled = true;
</script>

2. form属性：返回包含该fieldset的form元素的引用。

<form id="myForm">
  <fieldset form="myForm">
    <legend>Personal Information</legend>
    <input type="text" name="name">
    <input type="email" name="email">
  </fieldset>
</form>

<script>
  var fieldset = document.querySelector("fieldset");
  console.log(fieldset.form); // 输出: <form id="myForm">...</form>
</script>

3. name属性：指定fieldset的名称。

<fieldset id="myFieldset" name="personalInfo">
  <legend>Personal Information</legend>
  <input type="text" name="name">
  <input type="email" name="email">
</fieldset>

<script>
  var fieldset = document.getElementById("myFieldset");
  console.log(fieldset.name); // 输出: personalInfo
</script>

4. type属性：指定fieldset的类型。对于fieldset对象，该属性始终返回"fieldset"。

<fieldset id="myFieldset">
  <legend>Personal Information</legend>
  <input type="text" name="name">
  <input type="email" name="email">
</fieldset>

<script>
  var fieldset = document.getElementById("myFieldset");
  console.log(fieldset.type); // 输出: fieldset
</script>

5. elements属性：返回包含在该fieldset中的所有表单元素的引用。

<fieldset id="myFieldset">
  <legend>Personal Information</legend>
  <input type="text" name="name">
  <input type="email" name="email">
</fieldset>

<script>
  var fieldset = document.getElementById("myFieldset");
  console.log(fieldset.elements); // 输出: HTMLCollection [input, input]
  console.log(fieldset.elements[0]); // 输出: <input type="text" name="name">
</script>

6. addEventListener()方法：向fieldset元素添加事件监听器。

<fieldset id="myFieldset">
  <legend>Personal Information</legend>
  <input type="text" name="name">
  <input type="email" name="email">
</fieldset>

<script>
  var fieldset = document.getElementById("myFieldset");
  fieldset.addEventListener("click", function() {
    console.log("Fieldset clicked!");
  });
</script>

这些是Fieldset()函数常用的一些属性和方法，可以根据需求选择使用。请注意，Fieldset()函数的兼容性较好，可以在大多数现代浏览器上使用。