JavaScript起步(二十四)| 一起学系列

123 阅读3分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第22天,点击查看活动详情

  • location对象

    • location对象是window对象下的一个属性,使用的时候可以省略window对象;location对象可以获取或者设置浏览器地址栏的URL    

    • 常用方法:href()、assign()(方法和作用与href属性一样,可以设置页面跳转的地址。和href一样可以记录历史,点击返回键可以跳转原网页)、reload()(类似刷新功能,相当于参数是false,如果使用Ctrl+F5,相当于参数true。参数:true强制从服务器获取页面;false如果浏览器有缓存页面,会直接从缓存中获取页面)、replace()(替换掉地址栏中当前的网址,但是不记录历史)

  • URL 统一资源定位符(Uniform Resource Locator)

    • 组成:scheme://host:port/path?query#fragment例如www.lagou.com:80/a/b/index.h…

    • scheme:通信协议,常用的HTTP、FTP、maito等

    • host:主机,服务器(计算机)域名系统(DNS)主机名或IP地址

    • port:端口号,整数,可选,省略时使用方案的默认端口,如http的默认端口为80

    • path:路径,由零或多个‘/’符号隔开的字符串,一般用来表示主机上的一个目录或文件地址

    • query:查询,可选,用于给动态网页传递参数,可有多个参数,用‘&’符号隔开,每个参数的名和值用‘=’符号隔开,例如:name=zs

    • fragment:信息片段,字符串,锚点

  • history对象

    • window对象下的一个属性,使用的时候可以省略window对象

    • history对象可以与浏览器历史记录进行交互,浏览器历史记录是对用户所访问的页面按时间顺序进行的记录和保存

    • back()、forward()、go()(参数1为前进,-1为后退,可以随着页面的增加,增加数字)

  • Date()对象

    • 是JavaScript内置的一个对象

    • 创建方法:var x = new Date()     //此时x存储的值是当前的时间

      var x = +new Date() //此时x存储的值是自1970年1月1日起经过的毫秒数

  • 创建元素的三种方式

    • document.write():参数是字符串内容,会把字符串中的标签进行解析。问题:如果书写在事件内部,添加的内容会替换整个页面

    • innerHTML:参数是字符串内容,会把字符串中的标签进行解析。父级.innerHTML = '';如果是给某元素添加属性或者元素,需要用字符串拼接原来的属性和新添加的属性,否则会把原来的属性覆盖

    • document.createElement():只是在内存中创建了元素,须用父级.appendChild()添加

    • 性能问题:

      • innerHTML:因为每一次都需要解析字符串中的标签元素,当使用innerHTML大量添加元素时,会解析的很慢。如果使用变量来接收内容,然后再使用字符串变量直接赋值给innerHTML,这样速度虽然提升,但是会导致大量内存被浪费。每给字符串变量赋值一次,之前的变量并没有销毁,一直在内存中,无法使用。最好的方法是使用一个数组的push方法来存储每次创建的内容,再将数组转成字符串,最后直接赋值给innerHTML即可。代码在👇
    • document.createElement每添加到页面一次,导致页面结构尺寸变化,会触发DOM回流,也会消耗一些性能。解决方法是创建一个DOM碎片:var frg = document.createDocumentFragment()。为了避免DOM回流,先添加到碎片,循环结束后,再将碎片添加给box。代码在👇

    • 建议: 简单的内容添加可以用任意方法

      • 添加多个元素,但是内容比较简单时,可以借助字符串或数组的方式进行替换,再设置给innerHTML

      • 添加的元素功能比较复杂时,使用document.createElement image.png image.png