JavaScript的DOM树、json_jsjson存储dom树-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_65047139/article/details/124651331

本文介绍了JavaScript中的DOM树和JSON。DOM树是W3C标准，提供了操作HTML的API，包括window、navigator等核心对象。JSON是一种轻量级的数据交换格式，常用于AJAX异步请求，其语法基于ECMAScript子集，方便数据存储和交换。文章还讨论了JSON与JavaScript对象的相互转换及其在数据交换中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、DOM树

1.组成

ECMAScript描述了javascript语言的语法和基本对象
文档对象模型DOM（Document Object Model）与HTML网页API接口
浏览器对象模型BOM（Browser Object Model），与浏览器进行交互的API接口

核心对象有：window浏览器窗口，navigator浏览器信息，location浏览器当前地址信息，history浏览器历史信息，screen用户屏幕信息。
在这里插入图片描述

2.DOM树结构

DOM 是一项 W3C (World Wide Web Consortium) 标准，DOM（Document Object Model）文档对象模型为JS操作html文档所提供的一套API，通过这套API可以很方便的对html元素进行访问及增删改查操作。

在这里插入图片描述

3.用法

第一步:获取document对象, window.document,其中window可以省略不写
第二步:使用对象的属性和函数

getElementById()--按照id属性的值,来获取元素,只能获取一个
getElementsByName()--按照name属性的值,来获取元素,获取多个,并存入数组
getElementsByClassName()--按照class属性的值,来获取元素,获取多个,并存入数组
getElementsByTagName()--按照标签名的值,来获取元素,获取多个,并存入数组

innerHTML属性---获取内部的内容
innerText属性---获取内部的内容

4.测试

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试 DOM</title>
    <script>
        //DOM就是用一套API来快速的通过js代码获取元素
        function get() {
            //1.获取id="a"的元素的内容
            // 获取document对象
            //按照id获取元素getElementById("id属性的值")
            var x = document.getElementById("a");
            console.log(x);
            var y = x.innerHTML;
            console.log(y);
            //2.获取id="b"的元素的内容 并修改
            var z = document.getElementById("b").innerHTML;
            console.log(z);
            z = '我变了。。。';
            console.log(z);
            //3.修改id="a"的元素的内容
            document.getElementById("a").innerHTML = "我也变了";
            //4.获取我是span1--按照class获取到了数组
            var a = document.getElementsByClassName("c");
            console.log(a); //按照class获取到了数组
            var b = a[0].innerHTML; //按照下标操作元素
            console.log(b);
            //5.获取我是span1--按照标签名的值获取
            var c = document.getElementsByTagName("span")[0];
            console.log(c);
            //6.修改我是span2的内容
            //了解:innerHTML和innerText的区别?前者可以解析HTML代码,后者不能
            document.getElementsByClassName("c")[1].innerHTML = "<h1>我是渣渣辉</h1>";
            //document.getElementsByClassName("c")[1].innerText = "<h1>我是渣渣辉</h1>";
        }
    </script>
</head>

<body>
    <button onclick="get()">按钮</button>
    <div id="a">我是div1</div>
    <div id="b">我是div2</div>
    <span class="c">我是span1</span>
    <span class="c">我是span2</span>
</body>

</html>

二、JSON

1.概述

ajax往往要完整应用还会配合一个技术：JSON，那什么是JSON呢？

JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）

JSON(JavaScript Object Notation，JS 对象简谱) 起名不咋地，非常拗口，我们就记住它是一种轻量级的数据交换格式即可。它基于 ECMAScript (js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。是xml的终结者，成为主流开发方式（ajax异步请求，json返回）。

简而言之，是一种轻量级的数据交换格式，本质就是一个字符串。用来规定浏览器和服务器之间数据交换的一个格式.
在这里插入图片描述

2.作用

JSON 是存储和交换文本信息的语法。当数据在浏览器与服务器之间进行交换时，这些数据只能是文本。JSON 属于文本，并且我们能够把任何 JavaScript 对象转换为 JSON，然后将 JSON 发送到服务器。我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。以这样的方式，我们能够把数据作为 JavaScript 对象来处理，无需复杂的解析和转译。

3.语法

JSON数据:

var a =' "firstName" : "John" '

JSON 对象:

var a = '{ "firstName":"John" , "lastName":"Doe" }'

JSON 数组:

var a = '[{ "firstName":"Bill" , "lastName":"Gates" },{ "firstName":"George" , "lastName":"Bush" }]';

4.转换工具

使用JS里的内置对象JSON.用来把以 JSON 格式写的字符串和原生 JavaScript 对象互转.

给服务器发送数据: 将JS对象转成JSON字符串 	JSON.stringify(Js对象)
接受服务器的数据: JSON字符串转成JS对象		JSON.parse("json字符串")

5.测试

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试 json</title>
    <script>
        //1.创建json字符串
        var a = '"name":"jack"'; //注意语法！！
        console.log(a);
        //TODO 创建一个js对象，对比语法的区别？？？
        console.log(a.length); //求长度
        console.log(a.concat(100)); //拼接
        //2.创建json对象
        var b = '{"name":"jack","age":"20"}';
        console.log(b);
        console.log(b.length);
        //js对象--为了方便的解析对象的属性
        var b2 = {
            name: "jack",
            age: 20
        }
        console.log(b2.name); //获取属性的值
        //3.创建json数组
        var c = '[{"name":"jack","age":"20"},{"name":"rose","age":"21"}]';
        console.log(c.length);
        console.log(c.concat(100));
        //TODO 需求:解析c里面每个属性的值
        //解决方案:把json字符串转成js对象,否则就只能一点一点截取字符串啦!
        //利用js的内置对象JSON,完成json字符串和js对象的互转
        //parse(): json字符串->js对象:为了方便的调用对象的属性
        var obj = JSON.parse(c);
        console.log(obj);
        console.log(obj[0].name); //jack
        console.log(obj[0].age); //20
        console.log(obj[1].name); //rose
        console.log(obj[1].age); //18
        //stringify(): js对象->json字符串:为了方便的操作字符串
        //定义JS对象
        var person = {
            name: "jack",
            age: 20
        };
        //利用工具变成json字符串
        var str = JSON.stringify(person);
        console.log(str);
        console.log(str.length);
        var y = str.substring(9, 13);
        console.log(y); //jack
    </script>
</head>

<body>

</body>

</html>