DOM学习

105 阅读2分钟

这是我参与【第五届青训营】伴学笔记创作活动的第九天 DOM节点:DOM树里的每一个内容都称为节点

节点类型:

元素节点   所有的标签 比如body,div  html是根节点

属性节点:所有的属性 比如href

文本节点:所有的文本

查找节点:

父节点查找:

parentNode属性

返回最近一级的父节点,找不到返回null

语法:子元素.parentNode

子节点查找:

childNodes获得所有子节点,包括文本节点(空格,换行),注释节点等

children(重点)

仅获得所有元素节点

返回的还是一个伪数组

语法:父元素.children

兄弟关系查找:

1. 下一个兄弟节点

nextElementSibling属性

2. 上一个兄弟节点

previousElementSibling属性

 

增加节点

语法:document.createElement(‘标签名’)

插入到父元素的最后一个子元素:

语法:父元素.appendChild(要插入的元素)

插入到父元素中某个子元素的前面

语法:父元素.insertBefore(要插入的元素,在那个元素前面)

增加节点:

克隆节点:

语法:元素.cloneNode(布尔值) 布尔值如果为true,则代表克隆时会包含后代节点一起克隆,如果为false,则代表克隆时不包含后代节点,默认为false

删除节点:

在js原生DOM操作中,要删除元素必须通过父元素删除

语法:父元素.removeChild(要删除的元素)

注:如果不存在父子关系则删除不成功

删除节点和隐藏节点有区别:隐藏节点还是存在的,但是删除,则从html中删除节点

 

时间对象:

实例化:在代码中发现了new关键字时,一般将这个操作称为实例化。类->对象

获得当前时间

语法:let date = new Date()

指定时间 let date = new Date(‘1948-2-28 18:30:00’)

 

时间戳:

什么是时间戳:是指1970年01月01日00时00分00秒起至现在的毫秒数,他是一种特殊的计量时间的方式

三种获取时间戳的方法:

1. 使用getTime()方法

2. 简写+new Date()

3. 使用Date.now()方法 无需实例化

转换方法: