zoukankan      html  css  js  c++  java
  • 原生js(1)

     
    
    Element对象有以下重要属性:
    
    1、style。
    
      a) Element的css样式
    
      b) 可以通过elem.style.backgroundColor = "red"的形式才动态的修改css样式
    
    2、className。
    
      elem.className = "highlight"; // 修改elem的class
    
     
    
    HTML文档中嵌入js的四种方法:
    
    1、内联,js内容放到script标签中间
    
    2、由scirpt标签的src属性引入 // 最常用的方式,也是最推荐的一种
    
    3、通过html的onclick、onmouseover这样的属性指定 // 取消元素的默认行为时常用
    
    4、伪协议,"javascript:" // 使用a标签模拟tab切换时常用,还有url、form的action属性、window.open等
    
     
    
    使用javascript的src属性引入js文件的优点:
    
    1、将js文件和html分离
    
    2、js复用时,可以只管理一份文件
    
    3、可以被浏览器缓存,不必每次都去服务器请求
    
    4、可以请求跨域的js
    
     
    
    脚本类型:
    
    如果是引入js文件,不需要显示的指定script标签的type。但如果不是js文件,比如是vbscript文件,必须指定script标签的type属性。language属性已经废弃。
    
    如果指定了浏览器不能识别的type属性值,script的内容会被解析但不会被显示或执行,因此可以利用这个script的这个特性获取或存储数据。
    
     
    
    js的同步、异步和延迟
    
    1、默认情况下,js是同步和阻塞DOM解析的。在解析DOM的过程中,当遇到script时,会暂停DOM解析,开始请求script并执行js,执行完成之后再接着解析DOM树。
    
    2、之前一直不知道DOMReady是在什么时候,也从来没在书上看到对这个时间点的解释。现在感觉,DOMReady是解析完body的结束标签之后。所以所有的js的应该绑定在body标签之前。否则其中的DOMReady所触发的回调可能无法执行。
    
    3、想要js不阻塞DOM解析的方法有:
    
      将js写在body的结束标签之前,其它所有的html之后
    
      为script添加defer和async属性。添加了这两个属性是为了告诉浏览器这个scirpt不会对DOM产生影响,可以继续往下解析DOM树,但此时js请求已经发出。
    
    4、js的执行分两种,一种是在加载后立即执行,另一种是事件驱动执行。
    
     
    
    
    客户端js的时间线:
    
    1、web浏览器创建Document对象,开始解析html和文本、生成Element对象和Text节点添加到文档中。这个阶段的document.readystate=="loading"
    
    2、当遇到没有async和defer的script标签时,停止文档的解析,开始请求并执行js
    
    3、当遇到有async或defer时,会先下载js,但不执行,等到文档解析完毕之后才执行
    
    4、当文档解析完成时,document.readyState=="interactive"
    
    5、开始执行defer或async的脚本
    
    6、浏览器在Document对象上触发DOMContentLoaded事件(此时异步的脚本可能尚未执行完毕)
    
    7、当所有的资源都加载完成,并且所有的异步脚本也执行完成之后,document.readyState=="complete",此时在window对象上触发load事件。
  • 相关阅读:
    luffy后台登录+注册+课程
    luffy前台登录+注册+课程
    luffy前台准备
    luffy后台准备
    跨域请求
    pip源和虚拟环境的搭建
    Book接口
    drf-Xadmin的使用
    drf-JWT认证
    drf-自动生成接口文档
  • 原文地址:https://www.cnblogs.com/czx521/p/6488728.html
Copyright © 2011-2022 走看看