day16——DOM元素子父节点及JSON基础

逃离我推掉我的手 2021-11-05 00:16 303阅读 0赞

未完待续……

### Dom元素子父节点 ###

前提：body中的代码结构

<body>
        <ul id="nav">
            你好
            <li id="menu">1111</li>
            <input type="text" value="123"/>
        </ul>
        <div class="block">
            我是div
            <button id="btn">按钮</button>
        </div>

#### 通过父元素获取子元素 ####

1.  `childElementcount`//获取当前元素的子元素个数
2.  `childNode;` 子节点，包含文本元素，属于nodelist集合类型，具有length属性，通过索引获取\[\]  
    ![在这里插入图片描述][20190807215514402.png]

其中  
**NodeType节点类型**:1代表元素，3为字符；  
**nodename**为当前节点名称  
**nodevalue**：标签及表单元素为null，值在innerHtml或innerText中，表单元素在 value中  
**nextElementSibling**：获取当前元素的同胞兄弟元素，当前节点的下一个同胞兄弟元素  
**previousElementSibling**：获取当前元素的同胞兄弟元素上一个同胞元素  
**nextSibling**：可能获取到字符 回车，可能为当前节点的下一个同胞兄弟元素  
**previousSibling**：上一个同胞元素，可能为回车

1.  直接获取父元素里的子集  
    firstElementChild:获取当前元素的第一个子元素  
    lastElementChild:获取当前元素的第一个子元素

firstChild:获取当前元素的第一个子元素,可能包括字符回车  
lastChild:获取当前元素的第一个子元素，可能包括字符回车

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20190807215724595.png]

> 综上带有Element的获取不包括回车键，即节点可以获取到回车键，元素不可以

1.  **children**:返回htmlCollection:通过索引获取  
    获取所有子元素（不包括回车键）

#### 通过子元素获取父元素 ####

1.  `parentNode:`父节点
2.  `parentElement：`父元素

> 因为父元素不存在回车键的情况，所以两者获取到的结果和使用方法都相同

### Dom元素的创建 ###

1.  创建dom元素：`createElement("元素名");`
2.  追加元素：`appendChild();`//添加到当前元素的所有内容之后  
    eg:![在这里插入图片描述][20190807215920220.png]  
    追加前：

追加后：

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

![在这里插入图片描述][20190807215933797.png]

1.  `insertBefore()`//将新的元素添加到指定元素之前  
    有两个参数：`[node]newChild, [node]refChild;`  
    添加前：  
    ![在这里插入图片描述][20190807220013436.png]  
    添加后：

var block=document.getElementsByClassName("block");
        var dom=document.createElement("div");
        var btn=document.getElementById("btn");
        block[0].insertBefore(dom,btn);

![在这里插入图片描述][20190807220037175.png]

1.  动态获取和静态获取  
    `getElementByClassName();`//动态获取，在动态创建之前获取，可以获取到  
    `querySelectorAll ();`//静态获取，在动态创建元素之前获取获取不到新增节点

案例：图片瀑布流  
**遇到的小知识点**

1.  格式化快捷键：`ctrl+alt+L`
2.  变量命名不能和内置变量重名
3.  随机数组里面给出随机路径，`Math.random`:0~1随机数，取小不取大（0-0.999999……）
4.  `offsettop`和`offsetheight`在火狐中有属性但获取不到值，在火狐中要得到`offsetHeight`自身高的值要在浏览器加载完成后才能得到值，即要写在`window.onload=function(){}`事件中，偏移量都是数字型，没有单位，`style.top`为字符串型，有单位px
5.  scroll滚动条事件——加载完成后绑定  
    `scroll.top`为隐藏的看不到的页面高度，`documentElement.clientHeight`为页面可视高度，两者相加等于body页面实际高度
6.  屏幕横向缩小后减少一行显示的数量，要为图片总数的因数，否则显示错误

### 语法点：Json ###

1.  json是后天返回的数据类型 json/xml

> Json方式：返回的数据为json，json是javascript主要支持的语言，数据格式较为简单，易于读写，易于解析

> XML方式：格式统一，数据共享比较方便，但是xml文件比较庞大，格式比较复杂，解析比较困难，解析代码复杂度高

> 在浏览器之间没有统一标准的解析方式，耗时较长

1.  本身的数据类型为：数组型和对象型
2.  建立单个：`var stu{"name":"",age:18}`  
    **注意中间使用逗号隔开**  
    建立对象后的调用格式有两种：`stu.name;或stu[“name”]`
3.  建立多个`var stu[{“name”:””,age:18},{“name”:””,age:18}]`  
    **注意中间使用逗号隔开**  
    建立对象后的调用格式有两种：  
    for循环遍历`student[i][“name”]`或`student[i] .name`  
    调用时：遇到属性 `.属性`，遇到数组用 `遍历`
4.  for in遍历**集合**前是索引`key==value`;遍历**单个对象**（json）前是键值`key`  
    eg:

//json单个对象
        var stus = {
            "name": "张三",
            "age": 18,
            "job": "学生"
        }

使用：

for (var key in stus) {
        console.log(stus[key]);
    }

多个对象：

//多个对象：
    var student = [
        {
            "name": "李四",
            "age": 20,
            "job": "学生"
        },
        {
            "name": "战三",
            "age": 20,
            "job": "学生"
        },
        {
            "name": "马六",
            "age": 20,
            "job": "学生"
        }
    ]

使用：

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

1.  json后台的数据类型转换：字符串，对象  
    上例中单个对象和多个对象的输出结果分别为：  
    ![在这里插入图片描述][20190807221550795.png]  
    转换方法：  
    `stringify`：对象转化为字符串；\[\{“”“”“”\}\]  
    `parse`：字符串转化为对象\{\}  
    `eval`：字符串转化为对象\{\},只有标准格式才能转换  
    ![在这里插入图片描述][2019080722164258.png]  
    转化结果：  
    ![在这里插入图片描述][20190807221652254.png]
2.  json的标准型格式`var stu{"name":"",age:18}`  
    非标准格式：`var stu{name:"mary",age:18}`  
    `eval`只能转化标准格式的json，否则报错  
    eg:

var s = {
                name: "wangwu",
                age: "23"
            }

console.log(eval(JSON.stringify(s)));//报错
        console.log(JSON.parse(JSON.stringify(s)));

![在这里插入图片描述][20190807221817177.png]  
提示`token :`则说明是格式错误  
调用方法为：eval(字符串转对象);

1.  json的多层写法  
    eg:省市区

案例二：购物车

**遇到的小知识点**

1.  父元素居中，`text-align`居中  
    `flex-decoration:row;`//按行排列  
    子元素:  
    `flex:1;`//每个元素占一份
2.  动态绑定数据  
    `flex-decoration:column;`//按行排列
3.  索引对索引，调整数量加减

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]

[20190807215514402.png]: /images/20211104/924ca0b099324b08afaef7ce1d786912.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]: /images/20211104/95e99d6c71e344a38fa4b23d00c65ea6.png
[20190807215724595.png]: /images/20211104/cf5a55c9b7dd4b4ca9b277c069055a78.png
[20190807215920220.png]: /images/20211104/feb4cad71cca49ebb4ef467fd64d5712.png
[20190807215933797.png]: /images/20211104/2bf9c0a111a74c73ab915a4a7e98b09a.png
[20190807220013436.png]: /images/20211104/91b89ef9f00945b6a8b22036eef03bfb.png
[20190807220037175.png]: /images/20211104/ad4be54fe4d3490c929ec7d2db3c07ce.png
[20190807221550795.png]: /images/20211104/fc362b871e574bfb882ef7491470df4b.png
[2019080722164258.png]: /images/20211104/745f45c600e848c8a28afeb2e47f94c5.png
[20190807221652254.png]: /images/20211104/5d6369d235764702a3ab414606c4fbec.png
[20190807221817177.png]: /images/20211104/b3d51861f7af41a18f05317501e145ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]: /images/20211104/d383618a6abb41c795470bdf53c3b19d.png