DOM-节点操作

节点操作

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

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

• 查

  • 返回的都是dom对象

  • 查找父级: 子元素.parentNode

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

  • 查找子集: 父元素.children

    • 伪数组

      • 遍历,不能使用forEach

  • 兄弟

    • nextElementSibling

      • 下一个兄弟元素

    • previousElementSibling

      • 上一个兄弟元素

节点-增

• 创建新节点

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

  • 创建元素之后，还需要对元素设置内容和样式

    • 内容设置：innerText innerHTML
    • 属性设置： 元素.属性

• 追加节点

  • parent.appendChild(child)

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

  • parent.insertBofore(child, refChild)

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

      • ref：相对引用参照

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

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

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

• 克隆节点

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

    • false: 浅拷贝

      • 只拷贝元素结构

    • true: 深拷贝

      • 拷贝元素结构及内容

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

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

删除节点

• parent.removeChild(child)：通过父元素删除直接子元素
• element.remove():删除元素本身

日期对象

• 0. 获取日期对象

  • new Date()

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

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

• 3. 补0函数的制作

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