第三周day003

是张大炮
61 阅读4分钟

day003

BOM的常用对象：最重要的三个东西：定时器、客户端存储技术、event

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

  1. location对象：保存了当前窗口的正在打开的url（现在的url）

    ***程序员必备常识：一个url由及部分组成？分别每个部分有什么？

5部分：
1、协议：https（加密）/http（未加密）/ftp(传输文件) /ws（直播） - 前两个都属于叫做 请求 - 响应 模型，专门用于实现网站开发
2、主机号|ip地址|域名：域名是需要花钱购买的，主机号|ip地址是免费的，127.0.0.1才真的叫主机号，只能自己访问自己
3、端口号：https默认端口为443，http默认端口为80，只有默认端口可以省略不写！
4、***文件的相对路径|路由：百度加密
5、***查询字符串|请求消息：前端传输到后端的东西，前端对后端说的话，就是form表单get提交带来的东西

属性：获取url的5个部分的内容，但是不需要记忆，直接输出location对象即可查看
		协议：location.protocal
		域名：location.hostname
		端口号：location.port
		路由：location.pathname
		请求消息：location.search

方法：
		跳转：location="新url" - 替换当前窗口，可以后退
		跳转后，禁止后退：location.replace("新url");
		刷新：location.reload();
DOM：

1、核心DOM：无敌的，既可以操作HTML又可以操作XML，但是语法相对比较复杂

2、HTML DOM：只能操作HTML，不能访问一切自定义的东西，但是语法简单

3、XML DOM：只能操作XML数据格式，被淘汰了，被JSON数据格式代替了

查找元素：
1、通过关系找元素：前提：至少要找到一个元素，才可以调用关系网
                父：xx.parentNode;
		子：xx.children; - 集合
		第一个儿子：xx.firstElementChild;
		最后一个儿子：xx.lastElementChild;
		前一个兄弟：xx.previousElementSibling;
		后一个兄弟：xx.nextElementSibling;

2、直接找元素：2大类：通过HTML的特点去查找元素
var elems=document.getElementsByXXXXXX();//返回的是一个动态集合HTMLCollection
第二大类：2个：通过CSS选择器去查找元素
var elem=document.querySelector("任意css选择器");
缺陷：只能找到单个元素，如果匹配到多个，也只会返回第一个，没找到，返回null

***var elems=document.querySelectorAll("任意css选择器");
优点：
	1、找到了是一个集合，没找到是一个空集合
	2、复杂查找时，非常简单
	3、返回的是一个静态集合NodeList

面试题：document.getXXX 和 document.queryXXX的区别？

	1、后者更适合复杂查找
	2、动态集合和静态集合的区别？
		1、动态集合：每一次DOM发生变化，他都会悄悄的再次查找页面元素，让页面和数据保存一致，但是效率也就低下了 - 不支持forEach
		2、静态集合：每一次DOM发生变化，他都不会悄悄的再次查找页面元素，让页面和数据保存不一致，但是效率也就高了 - 支持forEach
操作样式：

1、内联样式：

获取：elem.style.css属性名; - 只能获取内联样式
设置：elem.style.css属性名="css属性值";

2、样式表样式

//获取想要操作的样式表
	var sheet=document.styleSheets[i];
	//获取此样式表中所有的样式规则
	var rules=sheet.cssRules;
	//数出你想要操作的那个样式规则
	var rule=rules[i];
	//操作
	console.log(rule.style.background);
	rule.style.background="purple"
操作属性：
1、*获取属性值：
核心DOM：elem.getAttribute("属性名");
HTML DOM：elem.属性名

2、*设置属性值：
核心DOM：elem.setAttribute("属性名","属性值");
HTML DOM：elem.属性名="属性值"

3、删除属性：设置属性值为空字符串，确实某些属性可以算是删除，但是只是删除了属性值，属性名还在，而有的属性哪怕只有一个属性名，也会具有作用（checked、href、readonly...）
*核心DOM：elem.removeAttribute("属性名");
HTML DOM：elem.属性名="";

如何创建元素以及上树：3步

1、创建空标签：
	var elem=document.createElement("标签名");

2、为其设置必要的属性和事件
	elem.属性名="属性值";
	elem.on事件名=function(){操作}

3、上树：3种
\*父元素.appendChild(elem);//在父元素末尾追加一个子元素elem
父元素.insertBefore(elem,已有子元素);//在父元素里面追加一个子元素elem，但是会放在已有子元素的前面
父元素.replaceChild(elem,已有子元素);//在父元素里面追加一个子元素elem，但是elem会替换掉已有子元素
删除元素：elem.remove();

扩展：

1、input的两个专属事件：onfocus（获取焦点）和onblur（失去焦点）
2、创建变量：在ES6新增了一个let关键字 - 建议忘掉var
	let 变量名=值;
作用：
	1、解决了声明提前，一定要先创建再使用
	2、带来了块级作用域：一个{}就是一个快，此变量只能在那个{}里面使用！
	3、如果用let去当作下标绑定事件，那么他会记录着你当前元素的下标，不再需要自定义下标了！其实forEach的那个形参i就是用let创建的！
3、//将类数组对象变为普通数组！ES5提供了此API
		接住=Array.from(类数组);
avatar
文章
阅读
粉丝