2019.6.22 Web全栈开发学习笔记（十）

SkywalkerHD

已于 2023-06-29 10:05:24 修改

阅读量208

点赞数

CC 4.0 BY-SA版权

分类专栏：学习笔记文章标签： JavaScript 前端 Web编程

于 2019-08-08 00:26:56 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44363959/article/details/98798409

学习笔记专栏收录该内容

19 篇文章

订阅专栏

本文深入讲解了JavaScript中DOM元素的子父节点操作，包括获取子元素数量、节点及元素的兄弟关系、首尾元素及节点，以及如何通过子元素找到父元素。同时，文章详细介绍了如何直接创建DOM元素并进行添加，还全面解析了JSON的定义、基本操作、数据类型转换及多层写法，是前端开发者不可多得的学习资源。

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

JavaScript Day 3

上课日期：2019年8月6日

课程内容

一、DOM元素子父节点相关操作

首先在body中定义

<ul id="nav">
    你好
    <li id="menu">1111</li>
    <input type="text" value="123"/>
</ul>

再获取nav

var nav = document.querySelector("#nav");

再写js代码来进行节点操作

childElementCount 获取当前元素的子元素的个数

console.log(nav.childElementCount);

输出结果为2，即子元素个数为2

childNodes获取子节点

console.log(nav.childNodes);

输出结果是一个子节点的NodeList集合

nextElementSibling 获取当前节点的下一个同胞兄弟元素
（previousElementSibling）为获取当前节点前一个同胞兄弟元素

console.log(nav.childNodes[2].nextElementSibling);
    console.log(nav.childNodes[2].previousElementSibling);

2号节点为li和input中间的文本，所以它的下一个同胞兄弟元素就是input，上一个就是li

firstElementChild获取当前元素中的第一个

console.log(nav.firstElementChild);
    console.log(nav.lastElementChild);

输出结果为li和input，它们分别是当前元素中的第一个子集和最后一个

firstChild 获取第一个节点

console.log(nav.firstChild);
    console.log(nav.lastChild);

输出结果为li，这是当中的第一个节点，以及input后面的文本，这是当中的最后一个节点。

通过子元素来获取父元素和父节点

var menu=document.getElementById("menu");
    console.log(menu.parentNode);
    console.log(menu.parentElement);

输出结果为其父元素，也就是ul

二、JavaScript中直接创建DOM元素

使用createElement方法可以直接创建DOM元素
例如：

var dom=document.createElement("div");
    console.log(dom);

输出结果就是创建好的div
appendChild方法则是将创建好的dom追加到当前元素的内容之后
先在页面中写一个类名为block的div元素

<div class="block">
</div>

再使用appendChild方法

var block=document.getElementsByClassName("block");
block[0].appendChild(dom);

即可将刚才创建好的dom加到类名为block的div元素之后

三、JSON
JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation），是一种轻量级的文本数据交换格式
JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。
JSON 解析器和 JSON 库支持许多不同的编程语言。目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。

JSON基本操作

定义一个JSON对象

var stus = {
        "name": "张三",
        "age": 18,
        "job": "学生"
    }

则当我们取值时

console.log(stus);
    console.log(stus.name);
    console.log(stus["job"]);

就会输出stus对象，对象中的name以及job
当我们定义多个对象的时候

var student = [
        {
            "name": "李四",
            "age": 20,
            "job": "学生"
        },
        {
            "name": "张三",
            "age": 22,
            "job": "学生"
        },
        {
            "name": "马六",
            "age": 19,
            "job": "老师"
        }
    ]

使用

console.log(student);
    for (var i = 0; i < student.length; i++) {
        console.log(student[i]["name"]);
    }

或者

for (var index in student) {
        console.log(student[index].name);
    }

即可获取到所定义全部对象中的name值

JSON数据类型转化
使用JSON.stringify方法可以将对象转换为字符串
例如：

console.log(JSON.stringify(student));

即可将我们刚刚定义的student对象转化为字符串类型，输出结果为
[{“name”:“李四”,“age”:20,“job”:“学生”},{“name”:“张三”,“age”:22,“job”:“学生”},{“name”:“马六”,“age”:19,“job”:“老师”}]

同理，我们也可以使用JSON.parse方法将其重新转化为对象

var str = JSON.stringify(student);
    console.log(JSON.parse(str));

那么输出的结果依然为对象。

JSON多层写法
JSON可以使用以下的方式定位为多层

var city=[
        {
            "id":1001,
            "name":"北京市",
            "child":[
                {
                    "id":"10011",
                    "name":"海淀区",
                    "child":[
                        {
                            "name":"海淀区街道01"
                        },
                        {
                            "name":"海淀区街道02"
                        }
                    ]
                },
                {
                    "id":"10012",
                    "name":"朝阳区",
                    "child":[
                        {
                            "name":"朝阳区街道01"
                        },
                        {
                            "name":"朝阳区街道02"
                        }
                    ]
                }
            ]
        }

定义完毕后，当我们输出

for(var index in city){
        for(var key in city[index].child){
            for(var list in city[index].child[key].child){
                console.log(city[index].child[key].child[list]);
            }
        }
    }

时，就会输出我们所定义的所有最小后代对象。