一. 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()