HTML | DOM 输入文本所需的属性

在使用 HTML 和 DOM 操作来输入文本时，有许多属性可供程序员使用。这些属性可以使我们能够获取用户输入的文本，设置文本的样式，以及执行其他与文本相关的操作。

以下是一些常用的属性和相关的示例代码片段：

1. value属性

• 描述：获取或设置输入字段的值。可以用于输入框、文本域等元素。
• 示例代码：

<input type="text" id="myInput" value="默认文本">
<script>
    var input = document.getElementById("myInput");
    console.log(input.value);
    input.value = "新的文本";
</script>

2. innerHTML属性

• 描述：获取或设置元素的 HTML 内容。可以用于 div、p 等元素。
• 示例代码：

<div id="myDiv">这是一个段落</div>
<script>
    var div = document.getElementById("myDiv");
    console.log(div.innerHTML);
    div.innerHTML = "这是新的内容";
</script>

3. textContent属性

• 描述：获取或设置元素的文本内容，不包括 HTML 标签。可以用于 div、p 等元素。
• 示例代码：

<div id="myDiv">这是一段 <b>加粗</b> 的内容</div>
<script>
    var div = document.getElementById("myDiv");
    console.log(div.textContent);
    div.textContent = "这是新的文本";
</script>

4. innerText属性

• 描述：获取或设置元素的可见文本内容，会受 CSS 样式的影响。可以用于 div、p 等元素。
• 示例代码：

<div id="myDiv">这是一段 <b style="display: none;">被隐藏</b> 的内容</div>
<script>
    var div = document.getElementById("myDiv");
    console.log(div.innerText);
    div.innerText = "这是新的可见文本";
</script>

5. checked属性

• 描述：获取或设置复选框或单选按钮的选中状态。
• 示例代码：

<input type="checkbox" id="myCheckbox" checked>
<script>
    var checkbox = document.getElementById("myCheckbox");
    console.log(checkbox.checked);
    checkbox.checked = false;
</script>

6. selected属性

• 描述：获取或设置下拉框选项的选中状态。
• 示例代码：

<select id="mySelect">
    <option value="option1">选项1</option>
    <option value="option2" selected>选项2</option>
    <option value="option3">选项3</option>
</select>
<script>
    var select = document.getElementById("mySelect");
    console.log(select.options[1].selected);
    select.options[0].selected = true;
</script>

这些属性提供了程序员在 HTML 和 DOM 中输入文本所需的常见功能。根据不同的需求，您可以选择适合您项目的属性来处理用户输入的文本，以及对文本进行实时操作。