博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS核心知识点:DOM\BOM\EVENT
阅读量:4993 次
发布时间:2019-06-12

本文共 5277 字,大约阅读时间需要 17 分钟。

1.DOM(Document Object Model) :文档对象模型

2. DOM节点:页面中最基本的组成部分

3. childNodes:获取某个节点下所有的子节点

  • 在标准及ie9以上 : 会获取空文本节点。
  • 在ie6/7/8 : 没有空文本节点。
文本文字123455

4. nodeType:查看某个节点的类型

  • 1 代表 元素节点
  • 2 代表 属性节点
  • 3 代表 文本节点
  • 8 代表 注释节点
  • 9 代表 文档节点

 

 

5. nodeName:查看某个节点的标签名

6. children:获取某个节点下所有的子节点
   a. 和childNodes的区别是,children只会获取到元素节点
b. children非标准属性,childNodes是标准属性
7. parentNode:获取元素的父级
8. offsetParent获取定位元素的父节点
--- 实例:树形菜单收缩与展开

 

    
多级展开菜单
View Code

 

1. 获取第一个或最后一个节点,也可以获取元素上个或下个兄弟节点的属性

  • firstChild : 第一个子节点 在标准和ie9下会获取到空白文本节点。
  • firstElementChild : 标准下获取第一个子元素节点,ie6/7/8不支持。
  • lastChild : 最后一个子节点 在标准和ie9下会获取到空白文本节点。
  • lastElementChild : 标准下获取最后一个子元素节点,ie6/7/8不支持。
  • nextSibling:下一个兄弟节点 在标准和ie9下会获取到空白文本节点。
  • nextElementSibling:标准下获取下一个兄弟节点,ie6/7/8不支持。
  • previousSibling:上一个兄弟节点,在标准和ie9下会获取到空白文本节点。
  • previousElementSibling:标准下获取上一个兄弟节点,ie6/7/8不支持

--- 实例:封装四个方法 first()、last()、next()、prev();

 

2. offsetParent:距离当前节点最近的具有定位属性的祖先节点

3. 元素定位后相对offsetParent的距离
a. offsetLeft : 当前节点的左外边框到offsetParent的左内边框之间的距离。
b. offsetTop : 当前节点的上外边框到offsetParent的上内边框之间的距离。
--- 实例:实用的文字提示层
4. 文档宽高:元素在页面所占的空间宽高
a. offsetWidth / offsetHeight:获取元素在页面所占的空间宽高,包含边框
b. clientWidth / clientHeight :获取元素在页面所占的空间宽高,不包含边框
注意:如果元素没有占页面空间,那么这四属性的值都为0
(比如给元素设置了 display: none; 属性)
5. 内容宽高:被内容所撑出来的高度
a. scrollWiddth / scrollHeigt : 获取被内容所撑出来的高度
注意:当获取body的内容宽高时,在chrome下内容宽高没有可视区宽高,
内容宽高就是可视区的宽高。
其他浏览器, 内容的实际宽高

--- 实例:全盘锁定页面,元素不可操作

 知识点:DOM中动态创建元素

当使用innerHTML的时候,赋值之前的事件,赋值后会被注销。

1、createElement(’要创建的标签名‘):创建一个DOM节点

语法:document.createElement(’要创建的节点‘)只能从document中去创建新节点;
--- 实例:创建留言板内容
2、父级.appendChild(要添加的元素);从父级的尾部添加一个节点。
--- 实例:留言板插入内容
3、父级.insertBefore(要添加的元素 );从父级的首部添加一个节点。第一个参数:准备插入的节点(内容);第二个参数:插入到哪个节点的前面(目标);
如果父级没有内容,那么会新添加一个元素节点;
在IE下如果第2个参数不存在会报错;在其他标准浏览器下如果第二个参数的节点不存在则会以appendChild的形式进行添加;

    
留言板加强,限制条数

     

    4、父级.removeChild( 删除谁) ; 从一个节点里面删除某个指定的子节点。

    --- 实例:删除留言内容

        
    留言板加强,批量删除

       

      5、父级.replaceChild( ) ;用一个节点替换掉另一个节点里面指定的子节点。
      有两个参数:第一个参数是newNode(新的节点);第二个参数是oldNode(想要替换的节点);且当替换元素之后,之前绑定的所有事件都将会被清空;
      --- 实例:始终显示一条留言
      解决方案:循环一遍后再添加,或者通过createElement创建出来的元素上添加事件。

       

      6、要克隆的元素. cloneNode( ):克隆节点;如果没有参数那么只会克隆这个元素,但不会克隆里面的子元素;

      如果参数是 true 那么会克隆所有的元素包含子元素;
      如果参数是 false 那么只会克隆当前要克隆的元素(不包含子元素);
      被克隆的元素如果包含事件,则事件是无法被克隆的;(克隆->复制)
      --- 综合实例:元素上移下移,加上运动形式

                  
      • 啦啦啦啦 1
      • 哈哈哈哈 2
      • 嘿嘿额和 3
      • 呱呱呱呱 4
      • 哥哥哥哥 5

       

      7、父级.appendChild、父级.insertBefore、父级.replaceChild 如果要添加或者插入或者替换的元素都是该父级下已有的元素,那么该元素都是被 剪切 到目标位置的。

      8、动态数组:只要定义一次,再去修改节点时,同样能够重新计算节点的新length。
      9、在循环中操作DOM,会因为动态数组的原因,改变了操作DOM之后的结果。
      10. 操作元素属性的两种方式:中括号([]) 或 点(.)
      11. 操作元素属性的第三种方式
               a. getAttribute():获取属性,也可以获取自定义在行间的属性
             注意:可以获取到src,href,url等的相对地址。
             b. setAttribute(): 设置属性
             c. removeAttribute:删除属性
      注意:在ie低版本下属性名应避开关键字
      --- 实例:图片的按需加载方式

       

      转载于:https://www.cnblogs.com/eveblog/p/5234085.html

      你可能感兴趣的文章
      imx6 18bit display
      查看>>
      Spring静态属性注入
      查看>>
      实验10:指针2
      查看>>
      【转】hibernate缓存:一级缓存和二级缓存
      查看>>
      第二个spring冲刺第3天
      查看>>
      AwSnap:让全版本(Windows、iOS、Android)Chrome浏览器崩溃的有趣漏洞
      查看>>
      线段树合并学习笔记
      查看>>
      AndroidAutoLayout
      查看>>
      样本不均衡下的分类损失函数
      查看>>
      node启动服务后,窗口不能关闭。pm2了解一下
      查看>>
      vsCode 改变主题
      查看>>
      【vijos】【树形dp】佳佳的魔法药水
      查看>>
      聚合新闻头条
      查看>>
      Ubuntu 关闭锁屏界面的 on-screen keyboard
      查看>>
      凸优化学习笔记
      查看>>
      使用ehcache-spring-annotations开启ehcache的注解功能
      查看>>
      Charles设置HTTPS抓包
      查看>>
      NGUI出现Shader wants normals, but the mesh UIAtlas doesn't have them
      查看>>
      Boost.Asio c++ 网络编程翻译(14)
      查看>>
      Codeforces Round #306 (Div. 2) D.E. 解题报告
      查看>>