BOM的常用对象、DOM的一些操作、上树、let

黑屋俊
119 阅读3分钟

BOM的常用对象

history对象

  • 保存了当前窗口的历史纪录（过去的url）
  • 前进：history.go(1);
  • 后退：history.go(-1);
  • 刷新：history.go(0);

location对象

  • 保存了当前窗口的正在打开的url（现在的url）

url的组成5部分

  • 协议：https(加密)/http(未加密)/ftp(传输文件)/ws(直播)... 前两个都属于叫做请求-响应模型
  • 主机号|IP地址|域名：域名是需要花钱购买的，主机号|IP地址是免费，127.0.0.1才真的是叫做主机号，只能自己访问自己
  • 端口号：https默认端口为443，http默认端口为80，只有默认端口可以省略不写
  • 文件的相对路径|路由：百度加密了
  • 查询字符串|请求消息：前端传输到后端的东西，前端对后端说的话，就是form表单提交带来的东西

属性

  • 协议：location.protocal;
  • 域名：location.hostname;
  • 端口：location.port;
  • 路由：location.pathname;
  • 请求消息：location.search;

跳转

  • location="新url" - 替换当前窗口，可以后退
  • location.replace("新url") - 替换当前窗口，禁止后退
  • location.reload(); - 刷新

DOM

  • 核心DOM：无敌的，即可以操作HTML又可以操作XML，但是语法相对比较繁琐
  • HTML DOM：只可以操作HTML，不能访问一切自定义的东西，但是语法简单
  • XML DOM：只可以操作XML，被淘汰了，被JSON数据格式代替了

查找元素

通过关系找元素

直接找元素

  • document.getElementsByXXXX(); - 返回的是一个动态集合HTMLCollection
  • 2个
    • var elem=document.querySelector("任意css选择器的"); //query-查询 selector-选择器：查询css选择器
      • 缺陷：只能找到单个元素，如果匹配到了多个，也只会返回第一个，没找到null
    • var elems=document.querySelectorAll("任意css选择器的");全是优点 - 找到了是一个集合，没找到是一个空集合 - 复杂查找时，非常简单 - 返回的是一个静态集合NodeList
  • document.getXXX 和 document.queryXXX的区别？
    • 后者更适合复杂查找
    • 动态集合和静态集合的区别
      • 动态集合：每一次DOM发生变化，他都会悄悄的再次查找，让页面和数据保持一致，但是效率也就低下了 - 不支持forEach
      • 静态集合：每一次DOM发生变化，他不会悄悄的再次查找，让页面和数据没有保持一致，但是效率也就高了 - 支持使用forEach

操作样式

内联样式

样式表样式：- 此生不见

//获取你想要操作的样式表
var sheet=document.styleSheets[i];
//获取此样式表种所有的样式规则
var rules=sheet.cssRules;
//数出你想要操作的那个规则的
var rule=rules[i];
//操作
console.log(rule.style.css属性名)
rule.style.css属性名="css属性值";

操作属性

  • 优先HTML DOM，HTML DOM实现不了的再用核心DOM补充
  • HTML缺陷：
    • class必须写为className
    • 自定义的东西都操作不了

获取属性值

  • 核心DOM：elem.getAttribute("属性名");
  • HTML DOM：elem.属性名;

设置属性值

  • 核心DOM：elem.setAttribute("属性名","属性值");
  • HTML DOM：elem.属性名="属性值";

删除属性

  • 核心DOM：elem.removeAttribute("属性名");
  • HTML DOM：elem.属性名=""; - 属性节点删不干净

判断有没有属性

  • 核心DOM：elem.hasAttribute("属性名");
  • HTML DOM：elem.属性名!="";

操作内容

创建元素以及上树

创建空标签

  • var elem=document.createElement("标签名");

设置必要的属性和事件

  • elem.属性名="属性值";
  • elem.on事件名=function(){}

上树

  • 父元素.appendChild(elem);//在父元素末尾处追加一个子元素elem
  • 父元素.insertBefore(elem,已有子元素);//在父元素追加一个子元素elem,但是放在已有子元素的前面
  • 父元素.replaceChild(elem,已有子元素);//在父元素追加一个子元素elem,但是会替换掉已有子元素

删除元素

  • elem.remove();

let

创建变量let 变量名=值;

作用

  • 解决了声明提前
  • 带来了块级作用域，一个{}就是一个块，此变量只能在那个{}里面使用
  • 如果用let去当作下标绑定事件，那么他会记录着你当前元素的下标，不再需要自定义下标了 - 其实forEach的那个形参i就是let创建的

类数组转为普通数组：接住=Array.from(类数组对象);

avatar
文章
阅读
粉丝