《JavaScript高级程序设计》读书笔记(二)

Author Avatar
wshunli 11月 05, 2017
  • 在其它设备中阅读本文章

《JavaScript高级程序设计》读书笔记

(二) 熟悉JavaScript运行的环境,深刻理解DOM,熟悉DOM提供给JavaScript的原生API。(8-14章)

第八章 BOM

window 对象

BOM 的核心对象是 window,表示浏览器的实例。既是范文浏览器窗口的接口,又是 ECMAScript 规定的 Global 对象。

全局作用域:全局作用域中声明的变量函数会变成 window 对象的属性和方法。

窗口关系及框架:若页面中包含框架,则每个框架都有自己的 window 对象,并且保存在 frames 集合中。

top 对象始终指向最高(最外)层的框架,也就是浏览器窗口。
parent 对象始终指向当前框架的直接上层框架。
self 对象始终指向 window。

所有这些对象都是 window 对象的属性。

窗口位置:IE、Safari、Opera、Chrome 提供 screenLeft 和 screenTop 属性,FireFox 提供 screenX 和 screenY 属性,分别用于表示窗口相对于屏幕左边和上边的位置。

窗口大小:innerWidth、innerHeight、outerWidth、outerHeight

导航和打开窗口: window.open()方法既可以导航到一个特定的URL,也可以打开一个新的浏览器窗口。

接受 4 个参数:要加载的URL、窗口目标、一个特性字符串、一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。

通常只须传递第一个参数,最后一个参数只在不打开新窗口的情况下使用。

间歇调用和超时调用:JavaScript 是单线程语言,但允许通过设置超时时间和间歇时间调度代码在特定的时刻执行。

超时调用 setTimeout():指定的时间过后执行代码。

var timeoutId=setTimeout(function(){
    console.log("Hello world!");
},1000);
//取消超时调用
clearTimeout(timeoutId);

间歇调用 setInterval():指定的时间间隔重复执行代码。

系统对话框:alert()、confirm()、prompt()

location 对象

location 对象不仅提供与当前窗口中加载的文档有关信息,还提供了一些导航功能。
即是 window 对象的属性,也是 document 对象的属性。

除直接修改 location 对象属性外 assign()、replace()、reload() 方法也可以改变当前加载页面。

location.assign("http://www.wshunli.com");
// 等价于
window.location="htttp://www.wshunli.com";
location.href="htttp://www.wshunli.com";

location.replace="htttp://www.wshunli.com";// 无法返回前一个页面
location.reload();// 重新加载页面

navigator 对象是识别客户端浏览器的事实标准,其属性通常用于检测显示网页的浏览器类型。

screen 对象

screen 对象用来表明客户端的能力,其中包括浏览器窗口外部的显示器的信息 ,如像素高度和宽度等。每个浏览器中的screen对象都包含着不同过的属性,支持也不同。

history 对象

history 对象保存着用户上网的历史记录,从窗口被打开的那一刻算起。因为 history 是 window 对象的属性,因此每个浏览器窗口、每个标签乃至每个框架,都有自己的history 对象与特定的 window 对象关联。

第九章 客户端检测

客户端检测主要包括:
能力检测:浏览器的特定能力;
怪癖检测:浏览器实际中存在的 bug ;
用户代理检测:通过检测用户代理字符串识别浏览器。

尽量不使用客户端检测。先设计最通用的方案,再使用特定的浏览器方法增强该方案。

第十章 DOM

节点层次

DOM 将任何HTML或XML文档描绘成一个由多层节点构成的树形结构。总共有 12 种节点,其中常用的有 4 种。

Node.ELEMENT_NODE(1) - 元素节点
Node.ATTRIBUTE_NODE(2) - 特性(属性)节点
Node.TEXT_NODE(3) - 文本节点
Node.COMMENT_NODE(8) - 注释节点

DOM 节点关系:

DOM节点关系

Document 类型:JavaScript通过Document类型表示文档;浏览器中,document对象是HTMLDocument的一个实例,表示整个HTML页面,且也是window对象的一个属性,因此可以将其作为全局对象来访问。

文档属性:
document.title:取得当前页面的标题,也可以修改标题。
document.URL:页面完整的URL;
document.domain:只包含页面的域名;
document.referrer:保存着链接到当前页面的那个页面的 URL。
文档方法:
document.getElementById()
document.getElementsByTagName()
document.getElementsByName()
特殊集合:
document.anchors:包含文档中所有带name特性的<a>元素;
document.forms:包含文档中所有<form>元素;
document.img:包含文档中所有<img>元素;
document.links:包含文档中所有带href特性的<a>元素。

Element 类型:Element 类型用于表现XML或HTML元素,提供了对元素标签名、子节点及特性的访问。

特性(属性)操作:getAttribute()、setAttribute()、removeAttribute()
创建元素:document.createElement()

Text 类型:文本节点由 Text 类型表示,包含的是可以照字面解释的纯文本内容。

创建文本节点:document.createTextNode()

规范文本节点:父元素上调用 normalize(),其实就是将元素的相邻文本节点合并成一个节点。

var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
var anotherTextNode = document.createTextNode("Yippee!");
element.appendChild(anotherTextNode);
document.body.appendChild(element);

console.log(element.childNodes.length);  //2
element.normalize();
console.log(element.childNodes.length);  //1
console.log(element.firstChild.nodeValue);  //"Hello World!Yippee!"

分割文本节点:spiltText()

var element=document.createElement("div");
element.className="message";
var textNode=docuemnt.createTextNode("Hello World!");
element.appendChild(textNode);
document.body.appendChild(element);

var newNode=element.firstChild.spiltText(5);
console.log(element.firstChild.nodeValue); //"Hello"
console.log(newNode.nodeValue);            //" World"
console.log(element.childNodes.length);    //2

Attr 类型:元素的特性(属性)在 DOM 中以 Attr 类型来表示。
Attr对象有3个属性:name、value和specified。
其中,name是特性名称,value是特性的值,specified是一个布尔值,用以区别特性是在代码中指定的还是默认的。

Comment 类型:注释在 DOM 中是通过 Comment 类型来表示的。

其他节点类型

Node.CDATA_SECTION_NODE(4)
Node.ENTITY_REFERENCE_NODE(5)
Node.ENTITY_NODE(6)
Node.PROCESSING_INSTRUCTION_NODE(7)
Node.DOCUMENT_NODE(9)
Node.DOCUMENT_TYPE_NODE(10)
Node.DOCUMENT_FRAGMENT_NODE(11)
Node.NOTATION_NODE(12)

DOM 操作技术

利用 JavaScript 代码、CSS 样式、表格修改 DOM 元素的结构、属性、内容的技术。

动态脚本:<script>
动态样式:<link>,<style>
操作表格:<table>

第十一章 DOM 扩展

DOM扩展主要包含两方面:Selector API,HTML5

选择符 API

querySelector() :接收一个 CSS 选择符,返回匹配的第一个元素;
querySelectorAll() :返回 NodeList 对象。

// 取得ID为"myDIV"的元素
var myDIV = document.querySelector("#myDiv");
// 取得某<div>中的所有<em>元素(类似于getElementsByTagName("em"))
var ems = document.getElementById("myDiv").querySelectorAll("em");

元素遍历

Element Traversal 规范为 DOM 元素新定义了5个属性:
childElementCount:返回子元素的个数(不包括文本节点和注释)
firstElementChild:指向第一个子元素,firstChild元素版
lastElementChild:指向最后一个子元素,lastChild元素版
previousElementSibling:指向前一个同辈元素,previousSibling元素版
nextElementSibling:指向后一个同辈元素,nextSibling元素版

HTML5

与类相关的扩展

getElementsByClassName():返回带有特定类的所有元素的 NodeList。
classList属性:HTML5为所有元素添加 classList属性。

焦点管理:HTML5也添加了辅助管理DOM焦点的功能。
document.activeElement 属性,始终会引用 DOM 中当前获得焦点的元素。
document.hasFocus()方法,确定文档是否获得了焦点。

var button = document.getElementById("myButton");
button.focus();
console.log(document.activeElement === button); // true
console.log(document.hasFocus()); // true

HTMLDocument 的变化

readyState 属性:document.readyState 指示文档是否加载完成。
loading:正在加载文档;complete:已经加载完文档。

head 属性:document.head 属性可以获得<head>元素。

字符集属性

document.charset:表示文档中实际使用的字符集。
document.defaultCharset:当前文档的默认字符集。

自定义数据属性

HTML5规定可以为元素添加非标准的属性,以此为元素提供与渲染无关的信息。
每个自定义数据属性,都要为其添加前缀data-。可通过 dataset 属性访问自定义属性的值。

<div id="myDiv" data-appId="12345" data-myName="nicholas"></div>
// 访问上述div元素的自定义属性
var div = document.getElementById("myDiv");
// 访问自定义属性值时,属性名前不必加data-前缀
var appId = div.dataset.appId;

插入标记

innerHTML 属性:
在读模式下,innerHTML属性返回调用元素的所有子节点HTML标记。
在写模式下,innerHTML属性会根据指定的值创建新的DOM树,然后用新DOM树替换调用元素原先的所有子节点。

outerHTML 属性:
在读模式下,outerHTML返回调用它的元素及所有子节点的HTML标签。
在写模式下,outerHTML会根据指定的HTML字符串创建新的DOM子树,然后用这个DOM子树完全替换调用元素。

insertAdjacentHTML() 方法:
语法:insertAdjacentHTML(插入位置,要插入的HTML文本)
插入位置必须是下列四个值之一:

  • “beforebegin”,在当前元素之前插入一个紧邻的同辈元素
  • “afterend”,在当前元素之后插入一个紧邻的同辈元素
  • “afterbegin”,给当前元素插入第一个子元素(不管当前元素是否有无子元素)
  • “beforeend”,给当前元素插入最后一个子元素(不管当前元素是否有无子元素)

scrollIntoView() 方法:所有元素均可调用,通过滚动浏览器窗口或某个容器元素,调用元素就可以出现在视口中。

第十二章 DOM2 和 DOM3

DOM1级主要定义的是HTML和XML文档的底层结构。DOM2 和DOM3 级则在这个结构的基础上引入了更多的交互能力,也支持了更高级的XML特性。

第十三章 事件

事件流

事件流描述的是从页面中接收事件的顺序。

事件冒泡(event bubbling):事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。
事件捕获(event capturing):不太具体的节点应该更早接收到事件,最具体的节点应该最后接收到事件。

事件-事件流

事件流包括三个阶段:
事件捕获阶段:首先发生,为截获事件提供了机会。
处于目标阶段:实际的目标接收到事件。
事件冒泡阶段:在此阶段可以对事件做出响应。

事件-事件流三个阶段

事件处理程序

事件是用户或浏览器自身执行的某种动作(比如click、load、mouseover等)
事件处理程序(事件侦听器)是响应某个事件的函数。
事件处理程序的名字以“on”开头,如click事件的事件处理程序是onclick。

HTML事件处理程序

为元素添加一个与事件处理程序同名的属性,该属性的值是能够执行的JS代码或JS函数。

<script type="text/javascript">
    function showMessage() {
        console.log("Hello world");
    }
</script>
<input type="button" value="Clicke Me" onclick="showMessage()" />

DOM0级事件处理程序

将一个函数赋值给一个事件处理程序属性。

var btn = document.getElementById("myBtn");
// 为按钮指定onclick事件处理程序
btn.onclick = function(){
    console.log("Clicked");
}
// 删除事件处理程序
btn.onclick = null;

DOM2级事件处理程序

“DOM2级事件”定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()、removeEventListener() 。

var btn = document.getElementById("myBtn");
//定义事件处理程序函数
var handler = function(){
    console.log(this.id);
}
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false);

true:在捕获阶段调用事件处理程序;false:在冒泡阶段调用事件处理程序。

事件对象

触发DOM上的某个事件时,会产生一个event事件对象,该对象包含着所有与事件有关的信息。

兼容DOM(DOM0级和DOM2级)的浏览器将event对象传入到事件处理程序中。

var btn = document.getElementById("myBtn");
btn.onclick = function(event){
    console.log(event.type);  //"click"
};
btn.addEventListener("click", function(event){
    console.log(event.type);  //"click"
}, false);

属性/方法

currentTarget:正在处理事件的那个元素
target:事件的目标
type:事件类型
cancelable:可以阻止特定事件的默认行为
preventDefault():阻止特定事件的默认行为
stopPropagation():停止事件在DOM层次中的传播,即取消进一步的事件捕获或冒泡
eventPhase:事件出于事件流的阶段 捕获阶段为1 处于目标对象为2 冒泡阶段为3

事件类型

UI事件、焦点事件、鼠标事件、滚轮事件、文本事件、键盘事件、合成事件、变动事件。

第十四章 表单脚本

在HTML中,表单是由 <form> 元素来表示的,而在 JavaScript 中,表单对应的则是 HTMLFormElement 类型。

如果本文对您有所帮助,且您手头还很宽裕,欢迎打赏赞助我,以支付网站服务器和域名费用。 https://paypal.me/wshunli 您的鼓励与支持是我更新的最大动力,我会铭记于心,倾于博客。
本文链接:https://www.wshunli.com/posts/d8b94418.html