【博学谷学习记录】超强总结，用心分享前端|节点操作

目录

节点类型

查找节点

父节点查找

子节点查找

兄弟关系查找

增加节点

克隆节点

删除节点

M端事件

---

DOM节点：DOM树里每一个内容都称之为节点

节点类型

元素节点：所有的标签，比如body，div...（html是根节点）

属性节点：所有的属性，比如href，content，id，class...

文本节点：所有的文本

其他节点

查找节点

节点关系：针对的找亲戚返回的都是对象

父节点查找

parentNode属性：返回最近一级的父节点，找不到返回为null

语法：子元素.parentNode

子节点查找

childNodes属性：获得所有子节点，包括文本节点（空格、换行）、注释节点等

语法：父元素.childNodes

children属性：仅获得所有元素节点，返回的还是一个伪数组

语法：父元素.children

兄弟关系查找

下一个兄弟节点：nextElementSibling属性

上一个兄弟节点：previousElementSibling属性

增加节点

一般情况下我们新增节点，按照如下操作：

创建一个新节点

把创建的新的节点放入到指定的元素内部

1. 创建节点：即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点

创造一个新的元素点：document.createElement（‘标签名’）

1. 追加节点：要想再页面看到，还是得插入到某个父元素中

插入到父元素中最后一个子元素/插入到这个父元素的最后：父元素.appendChild（要插入的元素）

插入到父元素中某个子元素前：父元素.insertBefore（要插入的元素，在哪个元素前）

克隆节点

特殊情况下，新增节点时，按照如下操作：

复制一个原有的节点，把复制的节点放入到指定的元素内部

克隆一个已有的元素节点：元素.cloneNode（布尔值）

cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值

若为true，则代表克隆时会包含后代节点一起克隆

若为false，则代表克隆时不包含后代节点

默认为false

删除节点

若一个节点在页面中不需要时，可以删除它

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

语法：父元素.removeChild（要删除的元素）

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

删除节点和隐藏节点（display：none）有区别：隐藏节点还是存在的，但是删除，则从html中删除节点

M端事件

移动端也有自己独特的地方，比如触屏事件touch（也称触摸事件），Android和IOS都有touch对象代表一个触摸点，触摸点可能是手指或触摸笔，触屏事件可响应用户手指（或触摸笔）对屏幕或触控板操作

常见的触屏事件如下：

触摸touch事件	说明
touchstart	手指摸到一个DOM元素时触发
touchmove	手指在一个DOM元素上滑动时触发
touchend	手指从一个DOM元素上移开时触发