朝花夕拾-JavaScript(浏览器端)-学习笔记
朝花夕拾,一个老年人的学习笔记,不妥请指,感谢
学习《JavaScript全栈开发》凌杰 著
这里写目录标题
- 朝花夕拾-JavaScript(浏览器端)-学习笔记
- 第6章 前端变更概述
- 第7章 DOM标准与使用
- 7.1 DOM简述
- 7.2 DOM的节点
- 7.2.1 统一节点接口
- 7.2.1.1 nodeType属性
- 7.2.1.2 nodeName属性
- 7.2.1.3 nodeValue属性
- 7.2.1.4 childNodees属性
- 7.2.1.5 firstChild属性
- 7.2.1.6 lastchild属性
- 7.2.1.7 parentNode属性
- 7.2.1.8 previousSibling属性
- 7.2.1.9 nextSibling属性
- 7.2.1.10 appendchild()方法
- 7.2.1.11 insertchild()方法
- 7.2.1.12 replacechild()方法
- 7.2.1.13 removechild()方法
- 7.2.1.14 cloneNode()方法
- 7.2.2 常用节点类型
- 7.2.2.1 文档节点
- 1.documentElement属性
- 2.body属性
- 3.title属性
- 4.url属性
- 5.domain属性
- 6.referrer属性
- 7.anchors属性
- 8.forms属性
- 9.images属性
- 10.links属性
- 11.getElementById()方法
- 12.getElementByName（）方法
- 13.getElementByTagName（）方法
- 14.getElementByClassName（）方法
- 15.write（）方法
- 16.writeln（）方法
- 17.createElement（）方法
- 18.createAttribute（）方法
- 19.createTextNode（）方法
- 20.createcomment（）方法
- 7.2.2.2 元素节点
- 7.2.2.3 属性节点
- 7.2.2.4 本文节点
- 7.2.2.5 注释节点
- 第8章 DOM扩展与BOM
- 第9章 前端事件处理
- 第10章 AJAX编程方法
- 10.1 AJAX编程基础
- 10.1.1 为何需要异步通信
- 10.1.2 了解XMLHttpRequest对象
- 1.readyState属性
- 2.response属性
- 3.responseText属性
- 4.responseType属性
- 5.responseURL属性
- 6.responseXML属性
- 7.status属性
- 8.statusText属性
- 9.timeout属性
- 10.upload属性
- 11.withCredentials属性
- 12.abort()方法
- 13.getAllResponseHeader()方法
- 14.getResponseHeader()方法
- 15.open()方法
- 16.overrideMineType（）方法
- 17.send（）方法
- 18.setRequestHeader()方法
- 19.onreadstatechange事件处理函数
- 10.1.3 XMLHttpRequest对象的基本使用
- 10.1.4 封装XMLhttpRequest对象
- 10.1.5 响应数据的处理
- 10.1.6响应数据的使用
- 10.2 不要重复发明轮子
第二部分 浏览器的JavaScript
第6章 前端变更概述
6.1 浏览器扮演的角色
6.2 明确前端开发任务
6.3 前端编程中的JavaScript
6.3.1
在前端编程环境中,JavaScript是一门内嵌在HTML文档中的脚本语言,
1.同步执行模式
2.内联样式模式
3.异步执行模式
4.延后执行模式
6.3.2 标准新增的模块机制
export
6.3.3标签
6.4 前端编程对象
在web浏览器环境下,JavaScript主要有3部分组成:语言的核心ECMAScript,用于操作HTML稳当的DOM和用于操作浏览器部分功能的BOM.
1.文档对象模型:DOM
2.浏览器对象模型BOM
第7章 DOM标准与使用
7.1 DOM简述
7.1.1 DOM的发展历程
DOM0
DOM1
DOM2
DOM3
7.1.2 DOM的使用思路
DOM只是一套用于处理XML和HTML文档的应用程序接口,它并不是JavaScript专有,VB,Python等脚本语言都可以调用这套接口,他设计的目的是为了XML和HTML这里文档提供一种映射在内存中的数据结构,以便其它编程语言可以在程序运行时通过该数据结构来操作文档,从而改变文档的机构\样式和内容,DOM将会读取到的XML和html文档映射到内存中的一个树形数据结构上,文档界面中的每个页面元素都会被解析成该数据结构上的节点,然后其他脚本语言就可以通过增删改查这些节点来完成对这些文档的处理.
7.2 DOM的节点
7.2.1 统一节点接口
DOM标准接口中,节点是我们可操作的最基本的类型,DOM树结构中的每个节点都对应着HTML文档中的一个标签元素,为了便于对所有的节点进行统一处理,DOM标准定义了一套适用于所有DOM节点的接口
7.2.1.1 nodeType属性
7.2.1.2 nodeName属性
元素节点的nodeName属性值是对应的HTML标签名
属性节点的nodename属性值与其对应html标签的属性名相同
本文节点的nodename属性值为#text
注释节点的nodeName属性值为#comment
文档节点的nodeName属性值为#document
7.2.1.3 nodeValue属性
7.2.1.4 childNodees属性
7.2.1.5 firstChild属性
7.2.1.6 lastchild属性
7.2.1.7 parentNode属性
7.2.1.8 previousSibling属性
7.2.1.9 nextSibling属性
7.2.1.10 appendchild()方法
7.2.1.11 insertchild()方法
7.2.1.12 replacechild()方法
7.2.1.13 removechild()方法
7.2.1.14 cloneNode()方法
7.2.2 常用节点类型
7.2.2.1 文档节点
文档节点通常代表整个XML和HTML文档,一个文档的DOM树结构往往有且只能有一个文档节点.
nodeType的值为9
nodeName的值为#document
nodevalue的值为null
在浏览器环境下,文档节点是一个名为"document"的全局对象.这个对象可以获取当前HTML页面中的信息,并对页面中的元素执行各种操作.
1.documentElement属性
当前页面的HTML标签,DOM数据结构中对应的一个元素类型的节点,有时也是文档节点的第一个子节点
2.body属性
在HTML中,代表当前页面的body标签,在web开发中我们要执行的绝大部分操作针对的都是这个子节点,该属性应该是document对象使用频率最高的属性之一
3.title属性
对应
4.url属性
存储的是当前页面的浏览器地址栏中显示的url
5.domain属性
存储的是当前页面的url所属的域名
6.referrer属性
存储的是链接到当前页面的那个页面的url
7.anchors属性
一个类数组对象,存储当前页面所有设置了name属性的标签
8.forms属性
一个类数组对象,存储当前页面所有的元素
9.images属性
一个类数组对象,存储了当前页面中所有的元素
10.links属性
一个类数组对象,存储了当前页面中所有设置了href属性的元素
11.getElementById()方法
该方法获取当前页面中指定id值得页面元素,如果当前页面中有id值相同的元素,就选取其中的第一个元素
12.getElementByName（）方法
该方法的作用时返回一个类数组对象，包含了当前页面中所有设置了相同name值的元素
13.getElementByTagName（）方法
该方法的作用是返回一个类数组对象，其中包含了当前页面中所有使用了相同标签的元素
14.getElementByClassName（）方法
该方法的作用是返回一个类数组对象，包含当前页面中设置了相同class属性的元素，html中class属性
主要时给css设计详实的，有时候也配合JavaScript脚本配合
15.write（）方法
将接收到的字符串类型的实参原样输出到document对象所代表的html文档中
16.writeln（）方法
与write（）基本相同，会加上一个换行符
17.createElement（）方法
创新一个新的元素节点，只接受一个代表新建标签名的字符串为实参，并且对于HTML标签来说，这个是实参不区分大小写
18.createAttribute（）方法
创建一个新的属性节点，接收一个字符串类型的实参指明新建属性节点的名称。
19.createTextNode（）方法
创建一个新的文本节点，他只接收一个字符串类型的实参，用来指定其创建节点所要容纳的文本
20.createcomment（）方法
创建一个新的注释节点，接收一个字符串类型的实参，用来指定注释的内容
7.2.2.2 元素节点
在DOM中，元素节点代表是XML或HTML文档中的各种页面元素，其
nodeType的值为1；
nodeName的值为他们各自对应的页面标签；
nodeValue的值为null。
严格来说，html每一种标签都对应着一种类型的元素节点。
1.tagName属性
返回当前元素节点所对应的html标签，可以认为是nodeName属性的一个别名
2.id属性
返回当前节点所对应HTML标签的id值
3.class属性
返回当前节点所对应的HTML标签的class属性，但由于class在javaScript中属于语言本身的关键字，所有将对应的属性命名为className
4.title属性
返回当前元素节点所对应html标签的title属性
5.lang属性
返回lang属性
6.dir属性
返回dir属性,说明当前页面中文字的走向,
7.getAttribute()方法
读取当前元素的指定属性
8.setAttribute()方法
设置当前元素节点所对应html标签中指定属性的值,如果指定属性不存在,创建该属性.
9.removeAttribute()方法
删除当前元素节点对应的html标签中的指定属性.
10.getAttributeNode()方法
以DOM节点对象的形式读取当前元素中的指定属性
11.setAttributeNode()方法
以DOM节点对象的形式设置当前余数中的指定属性
12.removeAttributeNode()方法
该方法的作用是dom对象节点的形式删除当前元素中的指定属性
7.2.2.3 属性节点
属性节点代表的XML或HTML文档中各种页面元素的属性,其nodetype的值为2,nodeName的值为节点所代表的标签属性的名称,nodeValue的值为节点所代表的标签属性的名称,在web前端开发的语境中,属性节点通常对应着一个html标签的属性
1.name属性
nodeName属性的别名,存取节点所代表的标签属性的名称
2.value属性
nodeValue属性的别名,存取节点所代表的标签属性中的数据
3.specified属性
该属性值是一个布尔类型的值,表示用脚本代码设置的(true),还是原本就在HTML文档中(false)
7.2.2.4 本文节点
文本节点代表的xml或html文档中各个页面元素中显示的文本,其nodeType的值为3,nodeName的值为#text,nodeValue的值为节点所代表的那段文本,通常情况下,文本节点位于dom树结构的末端,被认为是叶子节点,没有子节点
1.data属性
nodeValue属性的别名,存储注释节点中的文本
2.appendDate()方法
将指定的文本加入当前节点的现有文本的后面,他接收一个字符串类型的实参,用于指定要插入的文本
3.deleteDate()方法
将指定的文本从当前节点的现有文本中删除
4.insertDate()方法
将指定的文本插入当前节点的现有文本中,
5.replaceDate()方法
指定文本替换掉当前节点的现有文本中的某个文本段
6.splitText()方法
指定位置分割当前节点中的现有文本
7.subStringData()方法
从当前节点的现有文本中截取某一段指定的文本
7.2.2.5 注释节点
第8章 DOM扩展与BOM
8.1 常用的DOM接口
8.1.1 本文处理
1.innerText属性
使用该属性读取节点中的文本时,它会将该节点下所有的文本拼接成一整个字符串并返回
2.outerText属性
该属性在执行读取操作时的行为与innerText属性完全一致,但在执行写入操作时,它覆盖掉的就不只是指定节点下面的子节点了,他会连同被指定的节点本身一起覆盖掉
8.1.2 元素遍历
1.childElementCount属性:
该属性用于返回当前节点的子节点中元素节点的个数,即不包含文本节点和注释节点
2.firstElementChild属性:
该属性用于返回当前节点的子节点中的第一个元素结点
3.lastElementChild属性:
该属性用于返回当前结点的子节点中的最后一个元素节点
4.previousElementSibling属性:
该属性用于返回当前节点的前一个兄弟元素节点.
5.nextElementSibling属性:
该属性用于返回当前结点的后一个兄弟元素节点.
8.1.3 元素选择
1.querySelector()方法
该方法的作用是返回目标对象中第一个符合条件的元素对象,它接受一个字符串类型的实参,该实参是一个CSS选择器,我们用#id,.className,tagName等CSS选择器模型来指定要匹配的元素
2.querySelectorAll()方法
该方法的作用是返回目标对象所有符合条件的元素对象,
8.1.4 创建表格
1.caption属性
该属性对应的
元素下面的2.tHead属性
该属性对应的
元素下面的元素,我们可以通过该属性来设置调用该方法的3.tFoot属性
页脚
4.rows属性
存储元素的类数组对象
5.createCaption()方法
该方法创建一个元素,并在返回该元素对象引用的同时,将其加入调用该方法
元素对象中6.createThead()方法
创建一个thead元素
7.createTFoot()方法
创建一个元素,返回该元素对象引用的同时,加入
元素对象中8.1.5 样式变换
8.1.5.1 style属性
5.1.5.2 classList属性
8.2 浏览器对象模型
8.2.1 识别显示环境
8.2.2 定位与导航
8.2.3 浏览器识别
8.2.4 弹出对话框
第9章 前端事件处理
9.1 了解前端事件机制
9.1.1 前端事件概述
9.1.1.1 事件处理中涉及的概念
例如鼠标点击\键盘输入\文档或窗口载入等操作发生或完成的瞬间,浏览器会启动预先设置的提示机制,称为时间触发
9.1.1.2 了解event对象
event对象不是一个由程序员来定义的对象
event对象的属性众多
1.detail属性
代表详细信息
2.isTrusted属性
代表时间是否是浏览器自动生成的.
3.type属性
返回当前event对象所属的事件类型
4.target属性
返回event对象所针对的事件目标,
5.currentTatget属性
处理当前event对象的事件处理函数所属的页面元素,他与target属性是否指向同一个页面元素,取决于事件处理函数的具体位置
6.bubbles属性
当前event对象所代表时间的传播状态
7.eventPhase属性
当前event对象所处的事件传播节点
8.defaultPrevented属性
浏览器是否禁止了event对象所代表事件的默认行为
9.stopPropagation()方法:
该方法用于通知浏览器禁止event对象所代表时间的冒泡传播,即将bubbles属性的值设置为false
10.stopImmediatePropagation()方法
当event对象所针对的事件目标上注册了多个时间处理函数时,这些函数的在事件被触发时就会按照其注册的顺序全部执行;如果我们希望在执行了某个事件处理函数后就不再继续了就应该在这个事件处理函数的最后调用该方法,这样在他后面注册的事件处理函数就不会被执行了
11.preventDefault()方法
该方法用于通知浏览器禁止执行event对象所代表的事件的默认行为.
9.1.2 前端事件类型
在DOM3规范,web应用程序的前端可触发的常用事件为用户界面事件,鼠标操作事件,键盘操作事件与焦点得失事件
9.1.2.1 用户界面事件
通常指的是一些鱼用户操作没有直接关系的时间类型
1.load事件
该事件会在事件目标加载完成时被触发,事件目标通常是一些加载到浏览器中需要一定时间的对象,他们既可以是BOM中的window对象,也可以是DOM中等元素对象
2.unload事件
该事件会在事件目标完全被卸载时触发,通常是一些需要在从浏览器中卸载之后执行某种善后工作的对象.
3.abort事件
该事件会在事件目标被停止加载时被触发,事件目标即可以是BOM中的window对象,也可以是DOM等对象
4.error事件
该事件会在事件目标出错时被触发,事件目标通常是一些包含可被选中内容的对象,例如表单中的文本框元素
5.select事件
该事件会在事件目标中的内容被选中时触发,事件目标通常是一些包含可被选中内容的对象,例如表单中的文本框元素文本框元素
6.resize事件
该事件会在事件目标的大小被改变时触发,时间目标通常是一些可在运行时调整大小的对象.
7.scroll事件
该事件会在当前页面启用滚动条功能时被触发,事件目标即当前页面所对应的window对象.
在用户界面类事件中,最常用的是load事件.
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>测试页</title>
<script>
window.onload = function () {
const btn = document.querySelector('#sayHello');
btn.onclick = function (event) {
console.log('Hello111', event);
};
};
</script>
</head>
<body>
<h1>测试页</h1>
<input type="button" value="先打声招呼" id ="sayHello">
</body>
</html>
9.1.2.2 鼠标操作事件
1.click事件
该事件会在时间目标被鼠标单击时触发,事件目标通常是当前页面上的所有可见元素,
2.dblclick事件
该事件会在事件目标被鼠标双击时触发,事件目标是当前页面上的所有可见元素
3.mousedown事件
该事件会在鼠标在事件目标上按下任意键时被触发,它无法通过键盘来出发,事件目标通常是当前页面上的所有可见元素
4.mouseenter事件
该事件会在首次将屏幕上的鼠标指针移到事件目标所在区域时触发,它不支持冒泡传播
5.mouseleave事件
该事件会在将屏幕上的鼠标指针从事件目标所在区域移出时触发,
6.mousemove事件
该事件会在鼠标指针在事件目标所在区域内移动时触发,由于他会反复被触发,所以该事件的处理函数不能执行过于复杂的操作,否则可能会影响程序的执行效率
7.mouseout事件
该事件会在将屏幕上的鼠标指针从事件目标所在的元素移动到另一个元素时触发,另一个元素即可以是事件目标的父元素,也可以是它的兄弟元素或子元素
8.mouseover事件
该事件会在将屏幕上的鼠标指针从另一个元素移动至事件目标所在的元素时触发
9.mouseup事件
该事件会在鼠标在事件目标上释放任意按键时被触发
10.mousewheel事件
该事件会在鼠标在网页所在区域滑动滚轮时被触发,事件目标可以是当前页面上的任意元素,采用冒泡传播的方式向上传播至doucment对象和window对象,通常情况,我们会在最顶层的window对象上注册该事件的处理函数
9.1.2.3 键盘操作事件
1.keydown事件
该事件会在键盘上任意一个键被按下时触发,如果用户按住该键不松开,还会导致他被重复触发.事件目标通常是当前页面中获得了焦点的元素
2.keyup事件
该事件会在键盘上任意一个键被松开时触发,事件目标通常是当前页面中获得了焦点的元素
3.keypress事件
该事件会在键盘上任意一个字符键被按下时触发,如果用户按住该键不松开,还会导致他被重复触发.事件目标通常是当前页面中获得了焦点的元素
4.textInput事件
该事件会在事件目标中被输入文本时触发,事件目标必须是当前页面中可输入文本的元素
9.1.2.4 焦点得失事件
无论是鼠标还是键盘,在使用它们进行输入操作之前,我们都必须要让操作对象进入等待输入的状态,例如文本框获得输入光标,链接进入被选中状态等,我们将文本框中的输入光标,链接被选中后呈现的方框这类表示目标已经进入待输入状态的标记成为焦点.程序用户界面上的各个元素都可以在得失焦点时处罚相关事件,已告知用户自己是否处于可输入状态
1.blur事件
该事件会在相关对象失去焦点时触发,他在传播途径上不会采用冒泡方式
2.focus事件
该事件会在相关对象获得焦点时被触发,他在传播途径上不会采用冒泡方式
3.focusin事件
该事件会在相关对象获得焦点时被触发,但与fucus事件不同的是,他在传播途径上会采用冒泡方式
4.focusout事件
该事件会在相关对象失去焦点时被触发,但与blur事件不同的是,他在传播途径上会采用冒泡方式
5.特别说明
通常情况下,我们会优先选择响应focus和blur这两个事件来处理与焦点相关的操作,因为它们存在于javascript代码中的历史较为悠久,所有的浏览器都对它们提供了完全的支持,只有在需要处理冒泡传播的焦点事件时,人们才会考虑后两个事件
9.1.3 前端事件传播
9.2注册事件处理函数
9.2.1 事件处理函数的编程方式
1.addEventListener()方法
该方法用于为当前元素添加事件处理函数.它有3个实参,一是一个字符串类型的值,用于指定要处理的事件名称,例如load\click,二是一个函数类型的值,用于设定响应时间的处理函数,三是一个布尔类型的值,用于决定在事件传播的哪个阶段响应时间,当该值为false时则在事件冒泡阶段响应事件,并且我们还可以为相同元素的相同事件注册多个事件处理函数
2.removeEventListener()方法
该方法用于为当前元素移除之前被注册的事件处理函数,它的实参列表与addEventListener()方法相同
9.2.2 事件处理的业务逻辑
第10章 AJAX编程方法
10.1 AJAX编程基础
这一技术实现了浏览器与服务器之间的异步数据通信,并在不重新加载当前页面的情况下局部更新该页面的数据,从而给予用户更好的操作体验,
10.1.1 为何需要异步通信
AJAX独到之处就是提出了使用XMLHttpRequest这个对象来专门处理异步数据通信,该对象更更为流畅的完成向服务器发送请求,并解析服务器响应数据的任务,所以学习AJAX技术的关键就是深入的了解XMLHttpRequest对象,并熟练掌握它的使用方法
10.1.2 了解XMLHttpRequest对象
1.readyState属性
只读属性,作用是返回表示请求状态的枚举值,
UNSET:请求处于未初始化状态
OPENED:请求处于启动状态
HEADERS_RECEIVED:请求处于发送状态
LOADING:请求处于接收响应数据的状态
DODE:请求处于任务完成的状态
2.response属性
只读属性,作用是XMLHttpRequest对象从服务器上接收到得响应内容,其具体指的类型取决于XMLHttpRequest.responseYype的值
3.responseText属性
只读属性,作用是以纯文本的形式返回XMLHttpRequest对象从服务器上接收到的响应内容,如果请求未成功或尚未发送,则返回null
4.responseType属性
该属性是一个枚举值,用于表示相应数据的类型,
text:表示相应数据为纯文本类型的字符串对象,这是其默认类型
arraybuffer:表示响应数据为ArrayBuffer类型的二进制数组对象
blob:表示相应数据为Blob类型的对象
document:表示响应数据为一个HTML或XML格式的文档对象
json:表示响应数据为一个JSON格式的对象
5.responseURL属性
只读属性,作用是返回响应数据所在的URL,
6.responseXML属性
只读属性,作用是以XMLDOM对象的格式返回XMLHttpRequest对象从服务器接收到的响应内容
7.status属性
只读属性,作用是以数字的形式返回XMLHttpRequest对象发送请求完成之后得到的响应状态值
8.statusText属性
只读属性,作用是以文本的形式返回XMLHttpRequest对象发送请求完成之后得到的响应状态
9.timeout属性
该属性可被赋予一个无符号长整形的数值,用于设置XMLHttpRequest对象所发送请求的最大请求时间
10.upload属性
只读属性,作用是返回一个用来表示上传进度的XMLHttpRequestUpload对象,我们可以通过响应该对象事件的方式来追踪数据上传的进度.
onloadstart事件处理函数:在数据上传开始时被调用
onprogress事件处理函数:在数据上传的过程中一直被调用,
onabort事件处理函数:在数据上传过程中被中止时调用
onerror事件处理函数:在数据上传失败时被调用
onload事件处理函数:在数据上传成功时被调用,
ontimeout事件处理函数:在数据上传未在用户规定的时间内完成时被调用,
onloadend事件处理函数,在数据上传过程完成时被调用
11.withCredentials属性
该属性是一个布尔类型的值,用于设置XMLHttp-Request对象是否该用是类似cookies\authorization headers(头部授权)或TLS客户端认证机制创建一个跨域请求
12.abort()方法
该方法会在请求已被发送的情况下,于收到响应之前中止请求
13.getAllResponseHeader()方法
该方法会以字符串的形式返回所有用CRLF分隔的响应头,如果请求没有收到响应,则返回null
14.getResponseHeader()方法
该方法会烦会包含指定响应头的字符串,如果请求没有收到响应或在受到的响应中不存在该头,则返回null
15.open()方法
该方法的作用是初始化XMLHttpRequest对象要发送的请求
16.overrideMineType（）方法
该方法会重写由路由器返回的MIME类型
17.send（）方法
该方法用于发送请求，如果请求时异步的，那么该方法将在请求发送给后立即返回
18.setRequestHeader()方法
该方法用于设置HTTP请求头的值，他必须在open（）之后，send（）之前被调用
19.onreadstatechange事件处理函数
该事件处理函数会在XMLHttpRequest对象的readState属性值发生时被调用
10.1.3 XMLHttpRequest对象的基本使用
1.创建XMLHttpRequest对象
2.初始化请求。
3.在调用open方法之哦胡，我们还可以继续对将要发送的请求做进一步设置
4.向服务器发送请求
5.处理服务器的响应
10.1.4 封装XMLhttpRequest对象
10.1.5 响应数据的处理
根据XMLhttprequest对象的responseType属性，响应报文分为纯文本，JSON,DOM对象以及普通的二进制4种
905
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
