一、DOM节点
1. 什么是DOM节点?
> DOM树里每一个内容都称之为节点
2. 节点类型
> 元素节点:例如body、div等,html是根节点
> 属性节点:属性,例如class href
> 文本节点:所有的文本,例如标签里的文字
二、查找节点
节点关系:父节点、子节点、兄弟节点
1. 父节点查找:parentNode属性,返回最近一级的父节点,找不到返回null
子元素.parentNode
2. 子节点查找:
(1)childNodes,获得所有子节点包括文本节点(空格换行)、注释节点等
(2)children属性,仅获得所有元素节点,返回的还是一个伪数组
父元素.children
3. 兄弟节点查找
(1)下一个兄弟节点:nextElementSibling属性
(2)上一个兄弟节点:previousElementSibling属性
三、增加节点
步骤:(1)创建一个新节点(2)把创建的新节点放入指定元素内部
1. 创建节点:创造出一个新的网页元素,在添加到网页中,一般先创建节点,然后插入节点
方法:document.creatElement('标签名')
2. 追加节点:要想在界面看到,要将新节点插入到某个父元素中
(1)插入到父元素的最后一个元素:父元素.appendChild(要插入的元素)
(2)插入到父元素中某个子元素的签名:父元素.insertBefore(要插入的元素,在哪个元素前面)
3. 克隆节点:复制一个原有的节点
> 方法:元素.cloneNode(布尔值)
> 注意:cloneNode会克隆出一个跟原标签一样的元素,括号内传入布尔值
> 若为true:克隆时会包含后代节点一起克隆
> 若为false:克隆时不包含后代节点
> 默认为false
四、删除节点
在js原生DOM操作中,要删除元素必须通过父元素删除
> 方法:父元素.removeChild(要删除的元素)
> 注意:(1) 若不存在父子关系删除不成功。
(2) 删除节点和隐藏节点(display:none)有区别:隐藏节点节点还是存在的,但是删除节点节点会从html中被删除。