节点操作
DOM节点
DOM数里每一个内容都称为节点
节点类型:
- 元素节点
所有的标签,比如body、div等等
html是根节点 - 属性节点
所有属性,比如href - 文本节点
所有的文本 - 其他
查找节点
- 父节点查找
属性名:parentNode
作用:返回最近一级的父节点,找不到返回为null
语法:子元素.parentNode
- 子节点查找
属性名:childrenNode
作用:获得所有子节点,包括文本节点(空格、换行)、注释节点等
属性名:children
作用:仅获得所有元素节点,返回的还是一个伪数组
语法:父元素.children
- 兄弟关系查找
下一个兄弟节点,属性名:nextElementSibling
上一个兄弟节点,属性名:previousElementSibling
增加节点
- 创建节点
即创造出一个新的网页元素,再添加到网页内,一般先创建节点,然后插入节点
语法:document.createElement('标签名')
- 追加节点
1.插入到父元素的最后一个子元素
语法:父元素.appendChild(要插入的元素)
2.插入到父元素中某个子元素的前面
语法:父元素.insertBefore(要插入的元素,在哪个元素前面)
- 克隆节点
复制一个原有的节点,把复制的节点放入到指定的元素内部
语法:元素.cloneNode(布尔值)
若为true,则代表克隆时会包含后代节点一起克隆
若为false,则代表克隆时不包含后代节点(只克隆标签)
默认为false
删除节点
在JavaScript原生DOM操作中,要删除元素必须通过父元素删除
语法:父元素.removeChild(要删除的元素)
删除节点与隐藏节点(display:none)的区别:隐藏节点还是存在的,但是删除节点是从html中彻底删除