Dom和JSON

# DOM

1.文档对象模型 标签,元素

2.作用 实际要在Dom中获取元素对元素进行增删改查的处理

3.功能

--- 查询(获取) 某一个元素

--- 查询也可以通过某个元素找到其他相关的,祖先,后代,兄弟元素

--- 查到后,可以修改元素

--- 查到后,可以删除元素

--- 查到后还可以在其内部新增,或与该元素相关位置关系增加元素

总结:就是对页面元素的增删改查

# 元素的操作与应用部分

1.找到元素(获取到元素)

getElementById('id名)可以返回一个特定id的元素,因为id要求是独一无二的,所以这个方法相对更高效的查找到指定元素

2.获取/设置元素内容

 元素.innerHtml 双向功能,既可以获取内容,又可以设置或者插入内容

# 事件

1.事件就是在编程的时候系统内发生的动作,系统响应事件之后,以某种方式作出回应

2.在web中,事件是在浏览器窗口中触发特定的部分,可能是一个元素或者一些元素,从而做出处理

3.常见的事件

---提交用户名密码

---按键盘

 

---鼠标在元素的移入移出

---调整浏览器页面大小

---元素获取焦点和失去焦点

4.鼠标的点击事件

click点击,当元素绑定了点击事件之后,用户只要点击元素就会触发该事件

---直接绑定在Dom元素里 onclick="函数()"

---通过js绑定在onclick = function () {}

   

# input元素的属性

1.input的值,并不是通过innerHtml获取的,是用户交互产生的,它会在用户交互后存在当前元素的value属性中

2.直接写在标签里的value属性可以通过元素的value 直接获取到这也叫初始值

3.如果是用户输入的值，则在页面刷新后无法直接拿到，需要事件触发获取

# 数据遍历显示在页面上

以下是一个例子：

  //1.获取元素list

  var list = document.getElementById('list')

  //2.提前准备一个用于承接累加数据的空变量

  var str = ''

  //3.遍历data这个数组

  for(var i=0;i<51;i++){

  //4.在循环体内，将需要的数据如：data[i].属性名 就能拿到它的值

  //（1）先用li里放置所有小精灵名字

    str += `<li>

      <h1>${data[i].id}</h1>

      <h2>${data[i].name}</h2>

      <img src="./img/${data[i].id}.png" width="50px">

      </li>`

  }

  //插入到ul中去

  list.innerHTML = str;

---------------------

 function show_list(arr){

    //1.专用变量累加数据

    var str = '';

    //2.遍历形参数组

    for(var i=0;i<arr.length;i++){

      // 3.在模板字符串中拼结构

      str += `可以在这里加自己需要的结构`

    }

    return str;

  }

---------------------------------------

# 前端的非空验证

1.种类

去空格法,正则

2.用户会出现传空值

---全没写

---写空格

---前后空格

3.trim()方法

可以删除字符串头尾的，空白符，制表符，空格换行等等

并且他不会改变原始字符串

  //1.获取所有有id的元素

    var uname = document.getElementById('uname');

    var pwd = document.getElementById('pwd');

    var btn = document.getElementById('btn');

    //2.给按钮绑定点击事件

    btn.onclick = function () {

      //3.接收input传入的值，但要去空格

      var uname_val = uname.value.trim();

      //4.如果去空格后长度为0，弹窗提示用户内容“有空值”

      //5.如果去空格长度不为0，弹窗提示用户“可以了”

      if (uname_val.length) {

        alert('可以了，该往后台传了')

      } else {

        alert('有空值')

      }

    }

# JSON

1.常见的数据传递

{"id":3,"name:"jerry"}

{"code":1,"msg":"登录成功"}

2.json语法规则

---没有声明变量,在JSON里没有变量概念

---最末尾没有逗号没有分号(因为他不是js语句)

---属性和字符串的值必须加双引号

3.js对象和json 格式相互转换

将一个对象转换成对象形式的字符串

JSON.stringify()

将一个对象形式的字符串转换成真正的对象

JSON.parse()