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

最新推荐文章于 2022-05-01 16:19:24 发布

ice_bear-

最新推荐文章于 2022-05-01 16:19:24 发布

阅读量250

点赞数

分类专栏： web前端开发

本文链接：https://blog.csdn.net/qq_42701999/article/details/98787800

版权

web前端开发专栏收录该内容

49 篇文章 1 订阅

订阅专栏

未完待续……

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>

通过父元素获取子元素

childElementcount//获取当前元素的子元素个数
childNode; 子节点，包含文本元素，属于nodelist集合类型，具有length属性，通过索引获取[]

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

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

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

在这里插入图片描述

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

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

通过子元素获取父元素

parentNode:父节点
parentElement：父元素

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

Dom元素的创建

创建dom元素：createElement("元素名");
追加元素：appendChild();//添加到当前元素的所有内容之后
eg:
追加前：

追加后：

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

在这里插入图片描述

insertBefore()//将新的元素添加到指定元素之前
有两个参数：[node]newChild, [node]refChild;
添加前：

添加后：

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

在这里插入图片描述

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

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

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

语法点：Json

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

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

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

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

本身的数据类型为：数组型和对象型
建立单个：var stu{"name":"",age:18}
注意中间使用逗号隔开
建立对象后的调用格式有两种：stu.name;或stu[“name”]
建立多个var stu[{“name”:””,age:18},{“name”:””,age:18}]
注意中间使用逗号隔开
建立对象后的调用格式有两种：
for循环遍历student[i][“name”]或student[i] .name
调用时：遇到属性 .属性，遇到数组用 遍历
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);
}

json后台的数据类型转换：字符串，对象
上例中单个对象和多个对象的输出结果分别为：

转换方法：
stringify：对象转化为字符串；[{“”“”“”}]
parse：字符串转化为对象{}
eval：字符串转化为对象{},只有标准格式才能转换

转化结果：
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)));

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

json的多层写法
eg:省市区

案例二：购物车

遇到的小知识点

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

在这里插入图片描述

ice_bear-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录