JavaScript WebAPI复习

Posted 2020-12-26 吃蛋糕的猫

/*
*
* javascript分三个部分:
* 1. ECMAScript标准----JS基本的语法
* 2. DOM:Document Object Model 文档对象模型
* 3. BOM:浏览器对象模型
*
* DOM的作用:操作页面的元素
* DOM树:把html页面或者是xml文件看成是一个文档,文档就是一个对象,这个文档中所有的标签都是元素,元素也可以看成是对象,标签(元素,对象)有很多,还有嵌套的关系,组成的这种层次结构,可以模拟成树形结构图,简称:树状图 ,就是DOM树
*
* 获取元素:
* 2种方式:
* 根据id从整个的文档中获取元素---返回的是一个元素对象
* document.getElementById("id属性的值")
* 根据标签的名字获取元素-----返回的是元素对象组成的伪数组
* document.getElementsByTagName("标签的名字");
* 操作基本标签的属性
* src,title,alt,href,id属性
* 操作表单标签的属性
* name,value,type,checked,selected,disabled,readonly
* 元素的样式操作
* 对象.style.属性=值;
* 对象.className=值;
*
* 为元素添加事件的操作
* 事件:就是一件事,有事件源,触发和响应
*
* this关键字----如果是在当前的元素的事件中使用this,那么this就是当前的对象
*
*
* 内置对象:系统自带的对象
* 自定义对象:自己写的对象
* 浏览器对象:
* DOM
* DOM对象:------->通过DOM方式获取的元素得到的对象
*
* 元素:element:页面中的标签
* 节点:Node:页面中所有的内容,标签,属性,文本
* 根元素:html标签
* 页面中的顶级对象---:document
*

* 阻止超链接默认的跳转事件: return false;
* 获取元素的方式
* 根据id获取元素
* document.getElementById("id属性的值");
* 根据标签名字获取元素
* document.getElementsByTagName("标签的名字");
*
*
* 有的浏览器不支持, IE低版本的浏览器不支持,IE8以下的
* 根据name属性的值获取元素
* document.getElementsByName("name属性的值");
* 根据类样式的名字获取元素
* document.getElementsByClassName("类样式的名字");
* 根据选择器获取元素
* document.querySelector("选择器");返回一个对象
* 根绝选择器获取元素
* document.querySelectorAll("选择器");返回数组,多个元素组成的
*
* 设置元素的样式的方式
* 对象.style.属性=值;
* 对象.className=值;
*
*
* innerText和textContent的兼容问题
* 目前的浏览器都支持innerText,应该是属于ie的标准
* textContent本身是火狐支持,IE8不支持
*
* innerText和innerHTML的区别
* 都可以设置标签的文本内容,如果要设置标签及内容推荐使用innerHTML
* 如果要获取标签中的文本,innerText,也可以使用innerHTML
* 如果想要获取的是有标签,也有文本---innerHTML
*
* 自定义属性的操作
* 自定义属性:标签原本没有这个属性,为了存储数据,程序员自己添加的属性
* 自定义属性无法直接通过DOM对象的方式获取或者设置
* 对象.getAttribute("自定义属性名字");获取自定义属性的值
* 对象.setAttribute("属性名字","值");设置自定义属性及值
* 移除自定义属性
* 对象.removeAttribute("属性的名字");
*

*
* 节点:
* 节点:页面中所有的内容都是节点(标签,属性,文本:文字,空格,换行)
* 文档：document---页面中的顶级对象
* 元素:页面中所有的标签, 标签---元素--对象(通过DOM的方式来获取这个标签,得到了这个对象,此时这个对象叫DOM对象)
* 节点的属性:作用:为了将来获取很多节点,得到节点中的标签(元素),识别节点中的标签元素
* 节点的类型:1标签节点,2属性节点,3文本节点
* nodeType:节点的类型,1---标签节点,2----属性节点,3---文本节点
* nodeName:标签节点--大写的标签名字,属性节点---小写的属性名字,文本节点---#text
* nodeValue:标签---null,属性---属性的值,文本---文本内容
* if(node.nodeType==1&&node.nodeName=="P")
*
* 获取节点及元素的代码(下面呢)
*
*
*
* 元素的创建
* 三种元素创建的方式
* 1. document.write("标签代码及内容"); 如果在页面加载完毕后创建元素.页面中的内容会被干掉
* 2. 父级对象.innerHTML="标签代码及内容";
* 3. document.createElement("标签名字");得到的是一个对象,
* 父级元素.appendChild(子级元素对象);
* 父级元素.inerstBefore(新的子级对象,参照的子级对象);
* 移除子元素
* 父级元素.removeChild(要干掉的子级元素对象);
*
* 事件的绑定:为同一个元素绑定多个相同的事件
* 三种方式:
* 1. 对象.on事件名字=事件处理函数 如果是多个相同事件注册用这种方式,最后一个执行,之前的被覆盖了
* my$("btn").onclick=function(){};
* 2. 对象.addEventListener("没有on的事件名字",事件处理函数,false);
* my$("btn").addEventListener("click",function(){},false);
* 3. 对象.attachEvent("有on的事件名字",事件处理函数);
* my$("btn").attachEvent("onclick",function(){});
*

为元素绑定事件的三种方式:
* 1.
* 对象.on事件类型=事件处理函数;
* 2.IE8不支持
* 对象.addEventListener("没有on的事件类型",事件处理函数,false);
* 3.谷歌和火狐不支持
* 对象.attachEvent("有on的事件类型",事件处理函数);
*
* 为元素解绑事件的三种方式:
* 1.
* 对象.on事件类型=null;
* 2.
* 对象.removeEventListener("没有on的事件类型",事件处理函数名字,false);
* 3.
* 对象.detachEvent("有on的事件类型",事件处理函数);
*
* 事件冒泡:元素A中有元素B,都有相同的事件,里面的元素的事件触发了,外面元素的事件也会触发.可以是多个元素嵌套
*
* 阻止事件冒泡:
* 两种
* 1.
* e.stopPropagation(); e---事件参数对象,谷歌和火狐都支持,IE8不支持
* IE8和谷歌支持
* window.event.cancelBubble=true;
*
* window.event就是事件参数对象----e是一样的
*
* BOM:Browser Object Model 浏览器对象模型---操作浏览器
* 历史记录的后退和前进 history: back()后退 forward()前进
* 地址栏上的地址的操作 location href属性跳转页面, assgin()跳转页面 reload()刷新 replace()方法替换地址栏上的地址的,没有历史记录的
* 获取系统和浏览器的信息的 navigator userAgent属性---获取系统,浏览器的信息的
*
*
* 地址栏上#及后面的内容
* console.log(window.location.hash);
* 主机名及端口号
* console.log(window.location.host);
* 主机名
* console.log(window.location.hostname);
* 文件的路径---相对路径
* console.log(window.location.pathname);
* 端口号
* console.log(window.location.port);
* 协议
* console.log(window.location.protocol);
* 搜索的内容
* console.log(window.location.search);
*
* 定时器:
* 该定时器会返回自己的id值
* var timeId=window.setInterval(函数,时间);
* 执行过程:页面加载完毕后,过了一段时间执行函数,反复的,除非清理定时器
* window.clearInterval(定时器的id值);清理定时器