DOM开发FTP自学思维导图

一图带你了解DOM开发FTP，主要包括了事件、DOM的加载和组成、DOM元素的属性操作、访问关系、节点操作等内容，想要学习DOM开发FTP的小伙伴可以的下载收藏。

DOM开发FTP自学思维导图

• 事件
  • 获取事件源
    • documennt.getElementById(); 元素节点
    • documennt.getElementsByTagName(); 数组
    • documennt.getElementsByClassName(); 数组
  • 绑定事件
    • onclick/onmouseover/onmouseout/oninput/onfocus/onblur/onload
    • 匿名函数绑定、事件名绑定、标签内绑定
  • 书写事件驱动程序：dom操作： 样式操作（css：class和style）。标签操作(html)（节点操作，创建添加删除复制--移动）。
• DOM的加载和组成
  • 加载的时候是按照dom树形状加载
  • dom是由节点（元素、属性、文本）组成。最大的节点是document
• dom元素的属性操作
  • 方式
    • 节点.属性===节点[属性]
    • get/set/removeAttribute();
    • 相同点：都可以操作标签默认属性。不相同点：方法的形式定义的属性可以出现在标签汇中。自定义属性，怎么定义的怎么获取。
  • 属性种类
    • 普通属性
      • id/title/src....
      • className/href/innerHTML/innerText
    • 表单属性：disabled/checked/selected......
    • style
      • 6点注意事项。。。。。
• 访问关系
  • 父节点
    • parentNode:兼容性好，大家都用他。
  • 兄弟节点
    • nextELementSibling/previousElementSibling.......兼容不好，需要封装
  • 单个子节点
    • firstElementChild/lastElementChild.......兼容不好，需要封装
  • 所有子节点
    • childNodes/children; 用的最多的就是children;
  • 封装
    • 写好封装方法......
  • 封装....(给元素和索引找兄弟元素。自己删除自己。获取所有兄弟节点。 下面的所有兄弟，上面的所有兄弟...... )
  • 案例：菜单案例.....
• 节点的操作
  • 创建
    • document.write(); 缺点：覆盖原有的元素
    • innerHTML:优点：快方便。 缺点：老元素的事件容易被覆盖。
    • document.createElement();灵活不容易覆盖原有的事件。绑定属性麻烦。
  • 添加
    • 父元素,appendChild(新元素); 在最后的子元素后面添加新元素
    • 父元素,insertBefore(新元素，参考元素); 在参考元素之前添加新元素。参考元素为null或者undefined,在最后添加等同于appendChild()。
  • 删除
    • 父节点.removeChild(); 删除子节点。 自己.parentNode.removeChild(自己);自己删除自己
  • 复制
    • 节点.cloneNode(bool); bool==true是深层复制。 bool没有或者==false，是浅层复制 都无法复制节点的事件
  • 案例
    • 复杂标签嵌套创建
    • 四大美女
    • 祝愿墙第一版
  • 大案例
    • 水果切换
    • 微博添加
    • 在线用户
    • 祝愿墙
    • 动态创建元素
    • 百度搜索
• FTP
  • 工作模式
    • 主动（标准）模式
      • 客户端首先与服务器21端口建立链接，通过该通道客户端发送port命令， port命令包含客户端用什么端口接收数据。 在传送数据时，服务器通过 TCP 20端口发送数据，服务器和客户端建立一个新的链接来传送数据
    • 被动模式
      • 客户端首先与服务器21端口建立链接，通过该通道发送pasv命令， FTP Server 打开一个随机端口，并且通知客户端在该端口上传送数据的请求。 FTP server 将通过这个端口进行数据的传送，不需要建立一个新的和客户端之间的连接。
  • NAT
    • 基本NAT
      • Basic NAT一对一的地址转换，只转换IP地址
    • NAPT
      • 多个内部地址映射到同一个公有地址，多对一地址转换
    • Easy IP
      • 公网IP地址＋端口号与源IP地址＋源端口号的正向转换表
    • NAT Server
      • “公网IP地址+端口号”与“私网IP地址+端口号”
      • 目的IP+端口号”查找NAT Server转换表项，找出对应的“私网IP+端口号”
    • 静态NAT/NAPT
      • 静态NAPT是指“内部网络主机的IP+协议号+端口号”同“公网IP+协议号+端口号”是一对一静态绑定的