JavaScript的节点操作、移动端事件和插件运用

---

结点操作

DOM节点

DOM数里的每一个内容都称之为结点。

结点类型：

• 元素结点
  • 所有的标签，比如body、div
  • html是根节点
• 属性结点
  • 所有的属性，比如href
• 文本结点
  • 所有文本
• 其他

查找节点

目标：能够具备根据节点关系查找目标节点的能力

父节点查找：

• 返回最近一级的父节点(对象)，如果没有则返回null

子元素.parentNode

子节点查找：

• 父元素.childNodes：获得所有子节点，包括文本节点（空格、换行）、注释节点等，返回一个伪数组
• 父元素.children：仅获得所有元素节点，返回一个伪数组

兄弟节点查找：

• 下一个兄弟元素节点：nextElementSibling属性
• 上一个兄弟元素节点：previousElementSibling属性

增加节点

很多时候，我们需要在页面中动态增加元素，比如点击发送按钮，新增一条评论信息。

步骤：

• 创建一个新节点
• 将创建的新节点放到指定元素内部

创建节点：document.createElement('标签名')

追加节点：

• 插入到父元素的最后一个子元素后：父元素.appendChild(要插入的元素)
• 插入到父元素的某个子元素之前：父元素.insertBefore(要插入的元素, 在哪个元素前面)

克隆节点：

• 元素.cloneNode(布尔值)
• 复制一个原有的节点，把复制的节点放入到元素内部
• 若为true，代表克隆时会包含后代节点一起克隆
• 若为false，代表克隆时不包含后代节点（默认为false）

删除节点：

• 语法：父元素.removeChild(要删除的元素)
• 如不存在父子关系则删除不成功
• 删除节点和隐藏节点（display: none）的区别：隐藏的节点还存在，删除的节点在html里不存在

M端事件

M端是移动端，有自己独有的事件。

触屏事件

touch对象代表一个触摸点。触屏事件可响应用户手指或触控笔对屏幕的操作。

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

js插件

• 熟悉官网,了解这个插件可以完成什么需求 https://www.swiper.com.cn/
• 看在线演示,找到符合自己需求的demo https://www.swiper.com.cn/demo/index.html
• 查看基本使用流程 https://www.swiper.com.cn/usage/index.html
• 查看APi文档,去配置自己的插件 https://www.swiper. com.cn/api/index.html
• 注意: 多个swiper同时使用的时候, 类名需要注意区分