JavaScript基础知识-DOM编程-DOM操作、JS数组、JSON 处理

JavaScript前端核心：DOM、数组与JSON处理
原创 于 2025-08-08 21:33:06 发布 · 1.1k 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #html

完整示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
    /*
        DOM和BOM的区别和联系？
            BOM的顶级对象是：window（浏览器）
            DOM的顶级对象是：document(页面)
            实际上BOM是包括DOM的！
    */
    window.onload = function(){
        //知识点1：获取文本框value
        document.getElementById("btn").onclick = function(){
            var usernameElt = document.getElementById("username");
            var username = usernameElt.value;
            alert(username);
            // 可以修改value 
            //document.getElementById("username").value = "zhangsan";
        }

        //知识点2：innerHTML（标签中间内容当做HTML解析）和innerText（标签中间内容当做文本解析）
        document.getElementById("btn2").onclick = function(){
            var divElt = document.getElementById("div1");
            //divElt.innerText = "<font color='red'>用户名不能为空！</font>";
            divElt.innerHTML = "<font color='red'>用户名不能为空！</font>";
        }

        //知识点3：复选框的全选和取消全选
        var hobbies = document.getElementsByName("hobbies");
        var allCheck = document.getElementById("allCheck");
        //全选框实现
        allCheck.onclick = function(){
            for(var i = 0; i < hobbies.length; i++){
                hobbies[i].checked = allCheck.checked;
            }
        }
        // 对每一个爱好复选框绑定相同的点击事件：用户点击后，判断爱好复选框是否已经全选
        for(var i = 0; i < hobbies.length; i++){
            hobbies[i].onclick = function(){
                var checkedCount = 0;
                // 总数量和选中的数量相等的时候,第一个复选框选中.
                for(var i = 0; i < hobbies.length; i++){
                    if(hobbies[i].checked){
                        checkedCount++;
                    }
                }
                allCheck.checked = ( hobbies.length == checkedCount);
            }
        }
        //知识点4：获取select的value
        var provinceListElt = document.getElementById("provinceList");
        provinceListElt.onchange = function(){
            alert(provinceListElt.value);
            //或：alert(this.value);
	    }
}
</script>
<script type="text/javascript">
    //知识点5：Array数组

    // 创建长度为0的数组
    var arr = [];
    console.log(arr.length);

    // 数据类型随意
    var arr2 = [1,2,3,false,"abc",3.14];
    console.log(arr2.length);

    // 下标会越界吗
    arr2[7] = "test"; // 自动扩容。且arr2[6] == undefined;

    // 遍历
    for(var i = 0; i < arr2.length; i++){
       console.log(arr2[i]);
    }

    // 另一种创建数组的对象的方式
    var a = new Array();
    console.log(a.length); // 0

    var a2 = new Array(3); // 3表示长度.
    console.log(a2.length);

    var a3 = new Array(3,2);
    console.log(a3.length); //存储了3，2两个元素

    var a = [1,2,3,9];
    var str = a.join("-");
    console.log(str); // "1-2-3-9"

    // 在数组的末尾添加一个元素(数组长度+1)
    a.push(10);
    console.log(a.join("-"));

    // 将数组末尾的元素弹出(数组长度-1)
    var endElt = a.pop();
    console.log(endElt);
    console.log(a.join("-"));

    // 反转数组.
    a.reverse();
    console.log(a.join("-"));
</script>
<script type="text/javascript">
    //知识点6：JSON(无类型对象)
    /*
    JSON是一种标准的轻量级的数据交换格式。特点是体积小，易解析。
    JSON的语法格式：
        var jsonObj = {
            "属性名" : 属性值,
            "属性名" : 属性值,
            ....
        };
    */
    //key可以带引号或者不带，若不带引号，前端不能使用JSON.parse()函数
    var userJson = {
        "id" : "1",
        "username" : "张三"
    };

    // 访问JSON对象的属性 studentObj相当于一个对象
    console.log(userJson.id + "," + userJson.username);



    // JSON数组 通过jdbc从数据库中拿到数据之后，接着利用java的字符串拼接，然后作为json对象传到浏览器
    var usersJson = [
        {"id":"1","username":"张三"},
        {"id":"2","username":"李四"},
        {"id":"3","username":"王五"}
    ];

    // 遍历
    for(var i = 0; i < usersJson.length; i++){
        var user = usersJson[i];
        console.log(user.id + "," + user.username );
    }
    //复杂Json示例
    var userJson = {
        "id" : 1,
        "username" : "张三",
        "address" : {
            "province" : "浙江省",
            "urban" : "杭州市",
        },
        "hobbies" : ["study","sing","dance"]
    };	
	// 访问人名以及居住的城市
	console.log(userJson.username + "居住在" + userJson.address.urban);

    // 可以使用eval函数,将后端传来的json格式的字符串转换成json对象.
    var fromJava = "{\"id\":\"1\",\"username\":\"张三\"}"; 
    // 将以上的json格式的字符串转换成json对象 
    window.eval("var jsonObj = " + fromJava);
    // 前端访问json对象获取数据
    console.log(jsonObj.id + "," + jsonObj.username); 
    //JSON.parse(fromJava)也可以解析成json对象，但是要保证key带引号，eval对于key可以不带引号
    //JSON.stringify(json) JSON -> string
</script>
</head>
<body>

    <input type="text" id="username" />
    <input type="button" value="获取文本框的value" id="btn"/>
    <!--blur事件：失去焦点事件-->
    <!--this代表的是当前input节点对象-->
    <input type="text" onblur="alert(this.value)" />

    <hr>

    <input type="button" value="设置div中的内容" id="btn2"/>
		
	<div id="div1"></div>

    <hr>

    <input type="checkbox" id="allCheck"/><Br>
    <input type="checkbox" name="hobbies" value="study" />学习<Br>
    <input type="checkbox" name="hobbies" value="sing" />唱歌<Br>
    <input type="checkbox" name="hobbies" value="dance" />跳舞<Br>

    <hr>

    <select id="provinceList" name="provinceList">
        <option value="">--请选择省份--</option>
        <option value="001">河北省</option>
        <option value="002">河南省</option>
        <option value="003">山东省</option>
        <option value="004">山西省</option>
	</select>
</body>
</html>

一、BOM 与 DOM 的关系

 BOM（浏览器对象模型）与 DOM（文档对象模型）的区别与联系：

/*
  DOM和BOM的区别和联系？
    BOM的顶级对象是：window（浏览器窗口）
    DOM的顶级对象是：document（页面文档）
    实际上BOM是包括DOM的！
*/
  • BOM（Browser Object Model）：控制浏览器窗口的对象模型，顶级对象是window，包含浏览器相关的 API（如alert()、location、history等）。
  • DOM（Document Object Model）：控制页面内容的对象模型，顶级对象是document（window的子对象），用于操作页面元素。
  • 关系：document是window的属性（可通过window.document访问），BOM 包含 DOM，二者共同构成了前端 JavaScript 与浏览器交互的基础。

二、DOM 核心操作知识点

知识点 1：获取与修改文本框 value

// 等待页面加载完成后执行（确保DOM元素已存在）
window.onload = function(){
  // 给按钮绑定点击事件
  document.getElementById("btn").onclick = function(){
    // 通过id获取文本框元素
    var usernameElt = document.getElementById("username");
    // 获取文本框的value值
    var username = usernameElt.value;
    alert(username);
    // 也可以直接修改value值
    // document.getElementById("username").value = "zhangsan";
  }
}
  • 核心 API：document.getElementById("id") 通过 id 获取唯一元素。
  • 关键属性：.value 用于获取或修改表单元素（如文本框、下拉框等）的值。
  • 事件绑定：onclick 为元素绑定点击事件，事件处理函数在点击时执行。
  • 页面加载：window.onload 确保代码在页面元素加载完成后执行，避免获取到null。

知识点 2：innerHTML 与 innerText 的区别

document.getElementById("btn2").onclick = function(){
  var divElt = document.getElementById("div1");
  // innerText：将内容作为纯文本解析
  // divElt.innerText = "<font color='red'>用户名不能为空！</font>";
  // innerHTML：将内容作为HTML解析
  divElt.innerHTML = "<font color='red'>用户名不能为空！</font>";
}
  • innerText：设置元素内容时，会忽略 HTML 标签，仅显示纯文本。
  • innerHTML：设置元素内容时，会解析 HTML 标签并渲染为对应样式。
  • 应用场景：
    • 展示普通文本用innerText（更安全，避免 XSS 风险）。
    • 需要动态生成带样式的内容时用innerHTML（如渲染富文本）。

知识点 3：复选框的全选与取消全选

复选框联动是表单处理中的经典场景，代码实现了 "全选框" 与 "子复选框" 的双向联动：

// 获取所有子复选框（name相同的元素集合）
var hobbies = document.getElementsByName("hobbies");
// 获取全选框
var allCheck = document.getElementById("allCheck");

// 全选框点击事件：同步所有子复选框状态
allCheck.onclick = function(){
  for(var i = 0; i < hobbies.length; i++){
    hobbies[i].checked = allCheck.checked;
  }
}

// 子复选框点击事件：判断是否需要勾选全选框
for(var i = 0; i < hobbies.length; i++){
  hobbies[i].onclick = function(){
    var checkedCount = 0;
    // 统计选中的子复选框数量
    for(var i = 0; i < hobbies.length; i++){
      if(hobbies[i].checked){
        checkedCount++;
      }
    }
    // 当所有子复选框都选中时，全选框才勾选
    allCheck.checked = (hobbies.length == checkedCount);
  }
}
  • 核心 API：document.getElementsByName("name") 通过 name 属性获取元素集合（返回类数组）。
  • 关键属性：.checked 控制复选框的选中状态（布尔值）。
  • 联动逻辑：
    • 全选框状态改变时，同步所有子复选框的checked值。
    • 子复选框状态改变时，统计选中数量，若等于总数量则勾选全选框。

知识点 4：获取下拉列表（select）的 value

var provinceListElt = document.getElementById("provinceList");
// 下拉列表选项改变时触发
provinceListElt.onchange = function(){
  alert(provinceListElt.value);
  // 也可以用this表示当前元素：alert(this.value);
}
  • 核心事件：onchange 当元素值改变时触发（适用于下拉框、文本框等）。
  • this 关键字：在事件处理函数中，this指向当前触发事件的元素，简化代码。
  • select 的 value：返回当前选中option的value属性值（而非显示文本）。

三、JavaScript 数组（Array）操作知识点

1. 数组的创建方式

// 1. 字面量方式创建空数组（推荐）
var arr = [];
console.log(arr.length); // 0

// 2. 字面量方式创建带元素的数组（元素类型可混合）
var arr2 = [1,2,3,false,"abc",3.14];
console.log(arr2.length); // 6

// 3. 构造函数方式创建数组
var a = new Array(); // 空数组，长度0
var a2 = new Array(3); // 长度为3的空数组
var a3 = new Array(3,2); // 包含元素3和2的数组，长度2
  • 字面量方式：[] 是创建数组最简洁的方式，推荐优先使用。
  • 构造函数方式：new Array() 可通过参数指定长度或元素（注意单参数时表示长度）。
  • 动态类型：JavaScript 数组支持混合存储不同类型的数据（数字、布尔、字符串等）。

2. 数组的动态扩容特性

// 数组下标越界时会自动扩容
arr2[7] = "test"; // 原长度6，扩容后长度8
console.log(arr2[6]); // undefined（未赋值的索引值为undefined）
console.log(arr2.length); // 8
  • JavaScript 数组是动态的，无需预先指定长度，下标越界时会自动扩容。
  • 未赋值的索引位置值为undefined。

3. 数组的遍历

// 遍历数组（通过索引访问元素）
for(var i = 0; i < arr2.length; i++){
  console.log(arr2[i]);
}
  • 最常用的遍历方式是for循环，通过索引i访问arr[i]，循环条件为i < arr.length。

4. 数组常用方法

var a = [1,2,3,9];

// join(分隔符)：将数组元素拼接为字符串
var str = a.join("-");
console.log(str); // "1-2-3-9"

// push(元素)：在数组末尾添加元素（返回新长度）
a.push(10);
console.log(a.join("-")); // "1-2-3-9-10"

// pop()：移除数组末尾元素（返回被移除的元素）
var endElt = a.pop();
console.log(endElt); // 10
console.log(a.join("-")); // "1-2-3-9"

// reverse()：反转数组（改变原数组）
a.reverse();
console.log(a.join("-")); // "9-3-2-1"
  • join()：将数组转为字符串，参数为元素间的分隔符（默认逗号）。
  • push()：向数组末尾添加元素，修改原数组，返回新长度。
  • pop()：移除数组末尾元素，修改原数组，返回被移除的元素。
  • reverse()：反转数组顺序，直接修改原数组（注意：不是返回新数组）。

四、JSON 详解知识点

JSON（JavaScript Object Notation）是前后端数据交换的标准格式。

1. JSON 的基本概念与语法

/*
  JSON是一种标准的轻量级的数据交换格式。特点是体积小，易解析。
  JSON的语法格式：
    var jsonObj = {
      "属性名" : 属性值,
      "属性名" : 属性值,
      ....
    };
*/
// 基础JSON对象
var userJson = {
  "id" : "1",
  "username" : "张三"
};

// 访问JSON属性
console.log(userJson.id + "," + userJson.username); // 1,张三
  • 语法规则：
    • 键值对结构："key": value（键名必须用双引号包裹）。
    • 多个键值对用逗号分隔，最后一个键值对后无逗号。
    • 支持的数据类型：字符串、数字、布尔值、null、对象、数组。
  • 访问方式：通过对象.属性名访问 JSON 中的值（如userJson.id）。

2. JSON 数组（批量数据存储）

// JSON数组（存储多个JSON对象）
var usersJson = [
  {"id":"1","username":"张三"},
  {"id":"2","username":"李四"},
  {"id":"3","username":"王五"}
];

// 遍历JSON数组
for(var i = 0; i < usersJson.length; i++){
  var user = usersJson[i];
  console.log(user.id + "," + user.username );
}
  • JSON 数组：用[]包裹的多个 JSON 对象，常用于存储批量数据（如多条用户信息）。
  • 遍历方式：与数组遍历一致，通过索引获取单个 JSON 对象，再访问其属性。

3. 复杂嵌套 JSON

// 包含嵌套对象和数组的复杂JSON
var userJson = {
  "id" : 1,
  "username" : "张三",
  "address" : { // 嵌套JSON对象
    "province" : "浙江省",
    "urban" : "杭州市",
  },
  "hobbies" : ["study","sing","dance"] // 嵌套数组
};	

// 访问嵌套属性
console.log(userJson.username + "居住在" + userJson.address.urban); 
// 输出：张三居住在杭州市
  • 复杂 JSON 支持多层嵌套：
    • 嵌套对象：通过对象.外层属性.内层属性访问（如userJson.address.urban）。
    • 嵌套数组：通过对象.数组属性[索引]访问（如userJson.hobbies[0]）。

4. JSON 与字符串的转换（前后端交互核心）

前后端交互时，数据以字符串形式传输，需进行 JSON 与字符串的转换：

// 模拟后端传来的JSON格式字符串
var fromJava = "{\"id\":\"1\",\"username\":\"张三\"}"; 

// 方法1：用eval将字符串转为JSON对象（了解即可，不推荐）
window.eval("var jsonObj = " + fromJava);
console.log(jsonObj.id + "," + jsonObj.username); // 1,张三

// 方法2：用JSON.parse()转换（推荐，标准方法）
var jsonObj2 = JSON.parse(fromJava);
console.log(jsonObj2.username); // 张三

// 方法3：用JSON.stringify()将JSON转为字符串
var jsonStr = JSON.stringify(jsonObj2);
console.log(jsonStr); // {"id":"1","username":"张三"}
  • 关键区别：
    • eval()：可转换键名不带双引号的字符串，但存在安全风险（执行任意代码），不推荐。
    • JSON.parse()：标准转换方法，要求键名必须用双引号，安全性高，推荐使用。
    • JSON.stringify()：将 JSON 对象转为字符串，用于前端向后端发送数据。

总结

本文基于示例代码，详细解析了前端开发中的四大核心知识点：

  1. BOM 与 DOM：明确二者的包含关系与核心对象。
  2. DOM 操作：文本框 value 处理、innerHTML 与 innerText 区别、复选框联动、下拉框操作。
  3. 数组操作：创建方式、动态扩容、遍历及常用方法（join、push、pop、reverse）。
  4. JSON 处理：语法规则、JSON 数组、复杂嵌套 JSON、与字符串的转换。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值