js之DOM节点的操作

245 阅读2分钟

一. DOM节点

DOM文档对象模型可以理解成树模型,里面每个分支都是一个节点。DOM的节点类型可以分为这几种:

  • 元素节点:常用,例如div标签
  • 属性节点:例如class属性
  • 文本节点:例如标签里面的文字

二. 查找节点

根据节点关系查找目标节点

  • 查找父节点:子元素.parentNode查找最近的父级元素

  • 查找子节点:父元素.children,返回的是伪数组,遍历不能使用foreach

    (注意:childrenNode和children的区别是childrenNode获取的是父元素的所有子节点,包括元素节点,属性节点,文本节点;而children是只获取当前父元素下的子节点的元素节点,所以一般使用children比较多)

  • 查找兄弟节点:当前元素.nextElementSibling下一个兄弟元素

    当前元素.previousElementSibiling上一个兄弟元素

三. 增加节点

  • 创建新节点:let result = document.createElement('标签名')

  • 节点列表末尾处追加节点:parent.appendChild(child)把child元素元素添加到parent元素里面去,appendChild方法会把元素追加到最后面。

  • 节点列表开头追加节点:parent.insertBefore(child,refchild)将child元素添加到

    将child元素添加到refchild的前面去,rechild是对应的元素位置索引

    如果rechild获取不到,就会默认以appendChild的方式添加

    一定要传第二个参数,否则报错

  • 克隆节点:被克隆元素.cloneNode(布尔值),false就是浅拷贝,只拷贝元素结果;true就是深拷贝,拷贝元素结构和内容。用于复制一个模板节点

四. 删除节点

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

五. 日期对象

要获取日期对象首先要实例化即new一个Date对象,let date = new Date()然后才能调用时间对象的方法。

常用时间对象方法:

  • getFullYear():获取年份,是getFullYear而不是getYear
  • getMonth()+1:获取的月份是从0~11,所以要加1
  • getDate()
  • getDay():获取星期,注意不是getWeek,取值是0~6
  • getHours()
  • getMinutes()
  • getSecond()