JavaScript DOM操作与事件处理基础指南

作者：交互手记时间：2026-10-22 03:27:14浏览：74

本文系统梳理了JavaScript中DOM元素查找、内容获取、属性与样式操作、节点增删及字符串处理等核心方法，并详细解析了鼠标、键盘等常见事件的使用场景。通过复选框状态控制、下拉框内容互传及日期级联选择等实际案例，帮助开发者掌握前端交互开发的实用技巧。

DOM基础与元素查找

DOM全称为Document Object Model（文档对象模型）。

一、查找元素

document.getElementById()：通过ID选择器定位元素，该方法仅返回单个匹配的元素。
document.getElementsByName()：根据name属性查找元素，返回一个NodeList数组。
document.getElementsByClassName()：根据CSS类名查找元素，同样返回一个NodeList数组。
document.getElementsByTagName()：根据HTML标签名称查找元素，返回一个NodeList数组。

元素内容获取方法

二、获取元素内容

对于非表单元素，使用alert(a.innerHTML)可获取包含HTML标签的代码及文本内容，但显示时仅渲染文本；
使用alert(a.innerText)则仅提取纯文本内容，忽略HTML标签。
对于表单元素，使用alert(a.value)可直接获取input等输入框中的value值。

元素属性与样式操作

三、操作元素属性

a.setAttribute("属性名","属性值")：用于添加新属性或修改现有属性的值。
a.getAttribute("属性名")：用于读取并返回指定属性的值。
a.removeAttribute("属性名")：用于从元素中移除指定的属性。

四、设置样式


var a = document.getElementsByClassName("a");

a[o].style.background-color="red";  //(只能取钳在body里边的)

节点关系与遍历

五、操作相关节点元素

var b = a.nextSibling：获取a元素的下一个兄弟节点，需注意该节点可能包含空白文本节点。
var b = a.previousSibling：获取a元素的上一个兄弟节点，同样可能包含空白文本节点。
var b = a.parentNode：获取a元素的直接父级节点。
var b = a.firstChild：获取a元素的第一个子节点；lastChild获取最后一个子节点；childNodes[n]用于获取第n个子节点。

元素创建与DOM增删

五、元素的创建、添加与删除

var obj = document.createElement('标签名')：用于创建一个新的HTML元素节点。

a.appendChild()：将指定子元素添加到a元素的末尾。

a.removeChild()：从a元素中移除指定的子元素。

a.selectedIndex：获取当前选中的option索引值；a.options[a.selectedIndex]用于获取被选中的option对象。

字符串常用处理方法

六、字符串操作方法

var s = "hello world"：定义一个字符串变量。

alert(s.toLowerCase())：将字符串转换为小写；toUpperCase()：将字符串转换为大写。

alert(s.substring(3,8))：从索引3的位置开始截取，直到索引8之前（不包含索引8）。

alert(s.substr(3,8))：从索引3的位置开始截取，连续截取8个字符；若省略第二个参数，则截取至字符串末尾。

s.split('')：根据指定的分隔符将字符串拆分为数组。

JavaScript事件处理详解

七、事件处理机制

onclick：鼠标单击元素时触发。
ondblclick：鼠标双击元素时触发。
onmouseover：鼠标指针移动到元素上方时触发。
onmouseout：鼠标指针离开元素时触发。
onmousemove：鼠标指针在元素内部移动时持续触发。
onchange：元素内容或值发生改变时触发（常用于select和input）。
onblur：元素失去焦点时触发。
onfocus：元素获得焦点时触发。
onkeydown：键盘按键被按下时触发。
onkeyup：键盘按键被松开时触发。
onkeypress：用户按下并松开字母或数字键时触发，系统功能键（如箭头键、F1-F12）通常无法识别。

综合应用案例解析

例题解析：1. 复选框按钮状态控制，实现下一步按钮的启用与禁用。


<html>
  <head>
  <title>无标题文档</title>
  
  </head>
  
　　 <body>
     <input id="tong" type="checkbox" name="ch" ckecked="checked" value="1" onclick="ck_yes()")/>
     <label for="tong">同意</label><br />
     <input type="button" value="下一步" id="btn" disabled="disabled"/>
    
  </body>
</html>
<script>
  function ck_yes(){
    var btn = document.getElementById('btn');
    if(btn.disabled){
    document.getElementById('btn').removeAttribute('disabled');
    }else
      document.getElementById('btn').setAttribute('disabled','disabled'); 
  }
</script>

2. 两个下拉框之间的内容互传操作。


<html>
  <head>
  <title>无标题文档</title>
  </head>
  
  <body>
    <select multiple="multiple" size="7" id="slt" style="width: 200px; height: 200px;">
      <option>abc</option>
      <option>123</option>
      <option>asd</option>
      <option>bcd</option>
      <option>def</option>
    </select>
    <input type="button" value="左移" onclick="left()"/>
    <input type="button" value="右移" onclick="right()"/>
    <select multiple="multiple" size="7" id="slt_r" style="width: 200px; height: 200px;">
      <option value="时间">时间</option>
      <option value="日期">日期</option>
      <option value="年月">年月</option>
      <option value="东西">东西</option>
      <option value="南北">南北</option>
    </select>
  </body>
</html>
<script>
  function left(){
    var slt = document.getElementById('slt');
    var slt_r = document.getElementById('slt_r');
    var opt1 = slt_r.options[slt_r.selectedIndex];
    slt.appendChild(opt1);  
  }
  function right(){
    var slt=document.getElementById('slt');
    var slt_r=document.getElementById('slt_r');
    var opt = slt.options[slt.selectedIndex];    
    slt_r.appendChild(opt);  
  }
</script>

3. 三个下拉框实现的日期级联选择功能。


<html>

  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>

  <body>
<select id='year' onchange="addDay()"></select>
    <select id="month" onchange="addDay()"></select>
    <select id="date"></select>
  </body>

</html>
<script>
  var year_slt = document.getElementById('year');
  var month_slt = document.getElementById('month');
  var day_slt = document.getElementById('date');
  var now = new Date();
  now_year = now.getFullYear();

  for(var i = now_year; i >= now_year - 70; i--) {
    var opt_year = document.createElement('option');
    opt_year.value = i;
    opt_year.innerText = i;
    year_slt.appendChild(opt_year);
  }

  for(var i = 1; i <= 12; i++) {
    var opt_month = document.createElement('option');
    opt_month.value = i;
    opt_month.innerText = i;
    month_slt.appendChild(opt_month);
  }

  function isRun(year) {
    if((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
      return 29;
    } else {
      return 28
    }
  }

  function addDay() {
    day_slt.innerHTML = '';
    if(month_slt.value == 1 || month_slt.value == 3 || month_slt.value == 5 || month_slt.value == 7 || month_slt.value == 8 || month_slt.value == 10 || month_slt.value == 12) {
      for(var i = 1; i <= 31; i++) {
        var day = document.createElement('option');
        day.value = i;
        day.innerText = i;
        day_slt.appendChild(day);
      }
    } else if(month_slt.value == 4 || month_slt.value == 6 || month_slt.value == 9 || month_slt.value == 11) {
      for(var i = 1; i <= 30; i++) {
        var day = document.createElement('option');
        day.value = i;
        day.innerText = i;
        day_slt.appendChild(day);
      }
    } else {
      for(var i = 1; i <= isRun(year_slt.value); i++) {
        var day = document.createElement('option');
        day.value = i;
        day.innerText = i;
        day_slt.appendChild(day);
      }
    }

  }
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

作者最新文章

JS怎么实现页面强制刷新

2026-11-05 14:53:38

点击JS链接直接运行不下载？前端实现.js文件强制下载的三种方法

2026-11-05 12:12:23

怎么封装一个通用的JS创建元素辅助函数

2026-11-05 11:41:41

Swiper.js 怎么监听滑动结束并获取当前索引

2026-11-05 10:57:15

HTML、CSS和JS的关系：Web前端三件套怎么协作

2026-11-04 15:41:40