2021-01-08

Location

1、https://baike.baidu.com/item/%E9%A9%AC%E4%BF%9D%E5%9B%BD/50106525?fr=aladdin#2_1

• http https 传输协议
• www.baidu.com 域名
• ?fr=aladdin 查询字符
• #2_1 hash（锚点定位）
  2、 location对象：
  里面存储了和网页地址所有内容有关的信息。
  属性：
  href：地址信息。
  跳转页面：location.href = “XXX”;
  3、search：查询字符串 一般是用于传输数据，需要进行解析。
  【注意】location.href需要等页面加载完后再调用。
  4、split(分割字符串)
  返回值：分割好的字符串组成的数组： 苏轼|辛弃疾|李商隐 =》[苏轼,辛弃疾,李商隐]
  解析查询字符
  1.""
  2.?name=zhangsan&age=18
  步骤：
  1.需要准备一个函数进行解析，这个函数还需要一个参数。
  参数：要解析的字符串
  2.开始解析
  1.判断如果为空字符串，直接返回 空对象。
  2.如果不是空字符串，解析字符串，并将结果放入对象中。
  （1）截取掉第一个字符。
  （2）剩余字符按照&进行分割，得到一个数组。
  （3）遍历数组，得到 “属性名=属性值”这样格式的字符串。
  （4）对每一个字符串，按照=分割，得到一个属性和属性值组成的数组。
  （5）将属性名和属性值赋值给对象 //obj[t[0]]=t[1];
  （6）返回对象。
  5、 方法：
  assign()：改变浏览器地址栏中的地址，并记录到历史中。
  【注意】设置location.href 就会调用assign方法。
  replace() 替换浏览器地址栏中的地址。
  reload() 重新加载 F5
  reload(true) 强制加载，不适用缓存。

navigator

navigator：获取浏览器客户端的一些信息。

  <script>
      console.log(navigator.userAgent);
      console.log(navigator.appName);
      console.log(navigator.platform);
  </script>

history

history:保存当前窗口的历史记录 ，里面包含了一些操作历史记录的属性和方法
【注意】不是浏览器中的历史记录
1.属性
length:返回历史记录的条数。
2.方法：

• back():
  语法：history.back();
  作用:类似浏览器上面的后退键，回退到上一条历史记录中。
• forward():
  语法：history.forward();
  作用:类似浏览器上面的前进键，前进到下一条历史记录中。
• go(n):
  语法：history.go(n); n表示整数
  正整数：表示前进
  0：刷新当前页面
  负整数：表示后退
  作用：跳转n条记录记录。

浏览器卷去的高宽

1、 当页面的宽高比较大时，会出现滚动条，一部分内容会随着页面的滚动而被隐藏。
我们管上面隐藏的叫做 卷去的高度
左边隐藏的宽，叫做卷去的宽度。

• document.documentElement.scrollTop
  获取卷去的高度 使用时页面中必须要有DOCTYPE标签。
• document.body.scrollTop
  获取卷去的高度，使用时，页面中没有DOCTYPE标签。
  兼容写法：
• var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
  2、 可以通过js代码来指定浏览器滚动到什么位置上。

第一种方式：
格式：window.scroll(横坐标，纵坐标)；
【注意】不需要书写单位，瞬间定位。

第二种方式：
window.scroll({
left:200,
top:600,
behavior:‘smooth’
});
behavior:可以决定滚动的方式，默认为 auto 瞬间定位，可以设置为smooth 平滑过渡。

DOM

1、 dom:docment object model 文档对象模型
2、 DOM 都是由节点组成的。
节点可以分为三大类：

• 元素节点 html标签
• 文本节点 标签中的文字（空格，换行）
• 属性节点 标签的属性
  3、学习dom，就是学习对节点的操作
  修改：修改DOM节点的内容。
  遍历：遍历DOM节点下的子节点，方便下一步操作。
  添加：在DOM节点下添加一个子节点。
  删除：将该节点从HTML中删除。也相当于删除了它包含的所有内容以及所有子节点。
  4、 DOM可以做什么：
  （1）.找对象（元素节点）
  （2）.设置元素节点的属性值、
  （3）.动态删除和创建节点。
  （4）.事件的响应触发

1.getElementById
格式：node.getElementById(“ID”)
功能：从node节点开始，通过ID查找节点。
2.getElementsByTagName
通过标签名查找节点
格式：node.getElementsByTagName(“标签名”);
3.getElementsByClassName
通过类名去查找节点
格式：node.getElementsByClassName(“类名”);
4.getElementsByName()
通过name属性值去获取节点
最常用在 表单元素中。
--------------------------------------------------
低版本的IE不支持。

4.querySelector()
格式：node.querySelector(css选择器)
返回值：
如果找到选择器匹配的元素，则返回第一个元素。
如果没找到，则返回null
5.querySelectorAll()
格式：node.querySelector(css选择器)
返回值：
如果找到选择器匹配的元素，则返回全部。
如果没找到，则返回null

nodelist 伪数组 常规的数组方法对伪数组是无效的 length 【下标】

【注意】嵌套获取节点时，不要使用getElementById。