js节点操作
- 一.DOM节点
- 二.查找节点
- 三.增加节点
- 3.1.创建节点
- 3.2.追加节点
- 3.3.克隆节点
- 四. 删除节点
一.DOM节点
DOM树里每一个内容都称之为节点
节点类型:元素节点(所有的标签 比如 body,div等,html 是根节点)
属性节点(比如 href,src)
文本节点(所有的文本)
其他
二.查找节点
通过节点关系找节点,其返回的都是对象
关系:父子,兄弟
父节点查找:
parentNode 属性
返回最近一级的父节点 找不到返回为null
子元素.parentNode
子节点查找:
1.childNodes属性
获得所有子节点、包括文本节点(空格、换行)、注释节点等
2.children 属性(重点)
仅获得所有元素节点
返回的还是一个伪数组
父元素.children
兄弟关系查找:
1.下一个兄弟节点
nextElementSibling 属性
2.上一个兄弟节点
previousElementSibling 属性
三.增加节点
3.1.创建节点
即创造出一个新的网页元素,再添加到网页内,一般先创建节点,然后插入节点
创建元素节点方法:
3.2.追加节点
要想在界面看到,还得插入到某个父元素中
插入到父元素的最后一个子元素:
插入到父元素中某个子元素的前面:
3.3.克隆节点
cloneNode会克隆出一个跟原标签一样的元素,括号内传入布尔值
若为true,则代表克隆时会包含后代节点一起克隆
若为false,则代表克隆时不包含后代节点
默认为false
四. 删除节点
若一个节点在页面中已不需要时,可以删除它
在 JavaScript 原生DOM操作中,要删除元素必须通过父元素删除
语法
注:
如不存在父子关系则删除不成功
删除节点和隐藏节点(display:none)是有区别的: 隐藏节点还是存在的,但是删除,则从html中删除节点