[自学第十七天] 笔记小结

1. JSON

JSON(JavaScript Object Notation: JS对象表示法) 是一种轻量级的数据交换格式.
用独立的编程语言的文本格式来存储和表示数据.

    1)优点:
        易于阅读和编写,同时也易于浏览器解析和生成,并有效地提升网络传输效率.
    2)与XML比较:
        JSON书写或解析时是一个对象,更容易解析,而XML是由用户自定义标签来存储数据的,对于前端来说,不容易书写且解析起来比较困难.
    3)JSON文件内容
        它可以是一个对象,也可以是数组,也可以是对象和数组的结合.
    4)JSON写在哪里
        可以写在JavaScript代码中,也可以形成一个独立的.json文本文件.
    5)数据值可以是
        i)简单值:可以在JSON中表示字符串、数值、布尔值和null.但JSON不支持JavaScript中的特殊undefined,
        ii)对象({})
        iii)数组([])
    6）在实际开发中的数据处理
        在实际项目开发中，如果后台工程师还没创建好后台数据接口时，前端工程师可以先做数据mock（模拟），写对应的HTML、CSS和JS代码，
    等后台数据可以调用时，再进行替换即可。
        在项目开发中，数据最好分离出来，形成单独的JSON文件。
    7）解析JSON数据
        a)JS中JSON
            如果是JSON数据，可以直接访问；如果是JSON格式的字符串需要用JSON.parse()方法进行转换。

            JSON.parse()：将JSON格式的字符串转换为JSON
            JSON.stringify()：将JSON转换为JSON格式的字符串
        b)解析JSON文件
            JSON文件必须用ajax（异步请求）技术去获取。

2. ajax请求操作步骤：

    1）创建请求对象
      var xhr = new XMLHttpRequest();
    2）建立请求连接
      xhr.open('get',url,true);// get/post：请求方式 true/false：true表示异步请求,false表同步操作 url：表示请求的路径
    4）前端对请求的结果进行处理
      xhr.onreadystatechange = function () {
        if(xhr.readyState == 4 && xhr.status == 200){ // 如果请求成功
          console.log(JSON.parse(xhr.responseText)); // responseTextr：获取请求的结果
        }
      };
     3）向后台发送请求
      xhr.send();

注意：如果发送ajax请求，必须以http（服务器端）的方式启动文件，不能在本地直接打开。

3. DOM操作

DOM（Document Object Model:文档对象模型）：是HTML和XML文档的编程接口，定义了访问和操作HTML和XML文档的标准方法。
DOM以树型目录结构表达HTML和XML文档的，每一个节点就是一个DOM元素。
document->html->head/body->...

    1）DOM节点
        a）节点层次
            节点层次分为父子节点和同胞节点两种。
                在节点树中，顶端节点被称为根（root）
                每个节点都有父节点、除了根（它没有父节点）
                一个节点可拥有任意数量的子节点
                同胞节点是拥有相同父节点的节点，也叫兄弟节点
        b）DOM节点分类
            元素节点：标签
            属性节点：标签的属性
            文本节点：标签后的换行符
            文档节点：document
        c）DOM节点的名称（nodeName）
            元素节点 标签名相同
            属性节点 属性名相同
            文本节点 #text
            文档节点 #document
        d）DOM节点的值（nodeValue）
            元素节点 undefined 或 null
            属性节点 属性值
            文本节点 文本内容
        e）DOM节点的类型（nodeType）
            元素 1
            属性 2
            文本 3
            注释 8
            文档 9
    2）节点操作
        a）获取节点
            通过ID获取节点 【返回具体某个节点】
                document.getElementById(ID名)
            通过标签名获取节点 【返回节点数组，即使只有一个】
                document.getElementsByTagName(标签名)
            通过标签的name值获取节点 【返回节点数组】
                document.getElementsByName(Name名)
            通过class值来获取节点 【返回节点数组】
                document.getElementsByClassName(Class名)
            根据选择器返回找到结果集中的第一个
                document.querySelect("选择器")
            根据选择器返回找到的结果集，是个节点数组
                document.querySelectAll("选择器")
        b）创建DOM节点
            i)创建元素节点
                document.createElement('标签名');
            ii)创建文本节点
                document.createTextNode('文本内容');
            iii)创建属性节点
                document.createAttribute('属性名');
                属性节点名.value = '属性值'; // 为属性设置值

              // 关联以上三个节点
              元素节点名.appendChild(文本节点名); // 在元素节点上添加文本节点
              元素节点名.setAttributeNode(属性节点名); // 在元素节点上添加属性节点

              document.body.appendChild(元素节点名); // 将创建的节点添加到文档中


        简洁写法：
            var oDiv = document.createElement('div'); // 创建元素节点
            oDiv.setAttribute('class','wrapper box'); // 为元素节点添加属性及属性值
            oDiv.innerHTML = '创建DOM元素的简洁写法';  // 为元素节点设置文本内容
            document.body.appendChild(oDiv); // 将创建的元素节点添加到文档中
    3）插入节点
        i)插入内部的尾部
            父节点.appendChild(创建的节点)
        ii)插入内部的某个前面
            父节点.insertBefore(创建的节点,已知的子节点)
    4）替换节点
        父节点.replaceChild(新节点，老节点)
    5）克隆节点
      深度克隆： 包含子节点一起克隆。
      浅克隆： 只会将找到的这个节点克隆，子节点不会克隆

        需要被复制的节点. cloneNode(true/false);
            true: 复制当前节点以及所有子节点（深度克隆）
            false: 仅复制当前节点（浅克隆）
    6）删除节点
        i)删除当前节点及子节点
            节点.remove();
        ii)删除子节点
            父节点.removeChild(子节点)
    7）节点属性操作
        i)获取属性值
            DOM节点.属性名   // 不能获取用户自定义属性的值
            DOM节点.getAttribute(属性名)  // 获取所有属性（用户自定义属性）的值
        ii)设置属性值
            DOM节点.属性名 = 属性值   // 不能设置用户自定义属性的值
            DOM节点.setAttribute(属性名, 属性值)  // 设置所有属性（用户自定义属性）的值
        iii)删除属性值
            DOM节点.属性名 = ''   // 不能删除用户自定义属性
            DOM节点.removeAttribute(属性名)  // 删除所有属性（用户自定义属性）
    8）节点文本操作
        i) 获取文本
            节点.innerHTML //获取节点下的所有内容包含了标签
            节点.innerText // 获取节点下的文本内容，会过滤掉标签
            节点.value // 获取input输入框等表单控件的内容
            节点.getAttribute(“value”) //value是表单输入框的属性，可以使用getAttribute获得value值
        ii)设置文本
            节点.innerHTML= "文本内容" // 会翻译html标签
            节点.innerText = "文本内容" // 不会翻译html标签
            节点.value = 值
            节点.setAttribute("value",值) // 因为value是属性，所以也可以中这个方法设置内容
        iii)删除文本
            节点.innerHTML= ""
            节点.innerText = ""
            节点.value = ""
            节点.removeAttribute("value")
    9）DOM节点样式操作
        a)操作样式class
            i)获取class
                节点.className 获取节点的所有class
                节点.getAttribute("class") 获取节点的所有class
            ii)设置class
                节点.className = 值
                节点.setAttribute("class",值)
            iii)其它方法
                节点.classList.add(value); //为元素添加指定的类
                节点.classList.contains(value); // 判断元素是否含有指定的类，如果存在返回true
                节点.classList.remove(value); // 删除指定的类
                节点.classList.toggle(value); // 有就删除，没有就添加指定类
        b)操作内联样式
            i)获取内联样式
                节点.style.样式属性名 // 获取某个具体的内联样式
                节点.style.cssText // 获取某个节点的所有内联样式，返回字符串
            ii)设置内联样式
                节点.style.样式属性名 = 属性值  // 设置某个具体的内联样式
                节点.style.cssText = 属性值或属性值列表 // 设置某个节点的所有内联样式

4. 常用事件

onload
onclick
ondblclick
onmouseover
onmouseout
onmousemove
onmousedown
onmouseout
onblur
onfocus
onsubmit
onrest
onchange
onkeydown
onkeyup
onkeypress
onresize
…

2019-10-27