webApi，节点操作增删查，日期对象

DOM-节点操作

节点操作

• 本质上针对标签本身的增删查

• 总结: 有明确的亲戚关系的时候, 使用查语法更加方便一些

• 查

  • 返回的都是dom对象

  • 查找父级: 子元素.parentNode

    • 查找最近的父级元素，返回是dom元素

  • 查找子集: 父元素.children

    • 伪数组

      • 遍历,不能使用forEach

  • 兄弟

    • nextElementSibling

      • 下一个兄弟元素

    • previousElementSibling

      • 上一个兄弟元素

节点-增

• 创建新节点

  • let result = document.createElement(标签名称)

• 追加节点

  • parent.appendChild(child)

    • 将child的元素添加到parent元素里面去(最后面)
    • append：追加，都是在最后面追加

  • parent.insertBofore(child, refChild)

    • 将child元素添加到refChild的前面去

      • ref：相对引用参照

    • 如果refChild元素获取不到, 会默认以appendChild形式添加

    • 一定要传递第二个参数，否则报错

  • 追加的节点可以是新创建的 也可以是页面上已经存在 (移动)

• 克隆节点

  • 模板元素.cloneNode(布尔值)

    • false: 浅拷贝

      • 只拷贝元素结构

    • true: 深拷贝

      • 拷贝元素结构及内容

    • 用于需要创建一个复杂的标签

      • 前提: 页面上有一个模板节点

删除节点

• parent.removeChild(child)

案例：

• 表格渲染案例
• 学成在线渲染案例

日期对象

• 0. 获取日期对象

  • new Date()

• 2. 获取日期对象的每一个部分

  • getFullYear()
  • getMonth() + 1
  • getDate()
  • getHours()
  • getMinutes()
  • getSeconds()

• 3. 补0函数的制作

  • 将小于10的数值连上一个字符串的0

• 综合案例： 倒计时

小案例-微博发布案例

• 需求1

  • 0. 注册input事件
  • 2. 将文本的内容的长度赋值给对应的数值
  • 3. 表单的maxlength属性可以直接限制在200个数之间

• 需求2

  • 克隆预定义好的模板,将模板的hidden属性设置为false, 并最终展示到页面上
  • 判断如果内容为空，则提示不能输入为空, 并且直接return
  • 防止输入无意义空格, 使用字符串.trim()去掉首尾空格, 并将表单的value值设置为空字符串

• 需求3

  • 获取文本域的内容, 赋值给由模板克隆出来的新标签里面的content.innerText

  • 随机获取数据数组里面的内容, 替换newNode的图片和名称

    • Math.random()* (n + 1)

  • 利用时间对象将时间动态化

• 需求4

  • 在事件处理函数里面获取点击按钮,注册点击事件

    • (易错点: 必须在事件里面获取,外面获取不到)

  • 删除对应的元素 (通过this获取对应的那条需要删除的元素)

• 需求5

  • 将表单域内容重置为空

  • 将userCount里面的内容重置为0

  微博发布案例,html页面代码

微博发布案例，css样式代码

微博发布案例,js代码

实现效果