X

曜彤.手记

随记,关于互联网技术、产品与创业

吉 ICP 备10004938-2号

《JavaScript 高级程序设计(第四版)》读书笔记(第 12-17 章)


书接上回,本文为第 12-17 章的笔记。

第 12 章 - BOM

  1. (Page:873)window 对象:
// scroll document to a fixed position (1000, 0).
window.scrollTo({
  left: 1000, 
  top: 0, 
  behavior: 'smooth',
});
// get the size of the viewport.
let { innerWidth, innerHeight } = window;
if (typeof innerWidth !== 'number') {
  if (document.compatMode === 'CSS1Compat') {
    innerWidth = document.documentElement.clientWidth;  // <html>.
    innerHeight = document.documentElement.clientHeight;
  } else {
    innerWidth = document.body.clientWidth;  // <body>.
    innerHeight = document.body.clientHeight;
  }
}
  1. (Page:895)window.location 对象:

- 属性和方法

  1. (Page:904)window.navigator 对象:

- 属性和方法

  1. (Page:914)window.screen 对象:保存着客户端显示器信息
  2. (Page:916)window.history 对象:

- 属性和方法

let stateObj = { foo: 'bar' };
window.history.pushState(stateObj, '', 'baz.html');

第 13 章 - 客户端检测

(略)

第 14 章 - DOM

  1. (Page:970)DOM:HTML 与 XML 文档的编程接口。DOM 表示由多层节点构成的文档,通过它开发者可以添加、删除和修改页面的各个部分。

- document 额外属性和方法

- DOM 节点查询属性和方法

- DOM 节点操作属性和方法

  1. (Page:1043)MutationObserver 接口(取代了废弃的 MutationEvent):可以用于监听 DOM 改动。
let observer = new MutationObserver((mutationRecords, observer) => {
  console.log(mutationRecords);
});
observer.observe(document.body, {
  attributeOldValue: true,  // 是否记录观察之前的属性值;
  attributeFilter: ['class'],  // 观察的属性列表;
  attributes: true,  // 观察属性变化;
  characterData: true,  // 修改字符数据是否触发变化事件;
  characterDataOldValue: true,  // 是否记录之前变化的字符数据;
  childList: true,  // 修改目标节点的子节点是否触发变化事件;
  subtree: true,  // 观察子树;
});
observer.disconnect();

第 15 章 - DOM 扩展

  1. (Page:1071)Selector API:
  1. (Page:1075)元素遍历(Element Traversal 规范):
  1. (Page:1077)HTML5

- 专有扩展(未进入标准)

第 16 章 - DOM2 和 DOM3

  1. (Page:1106)DOM 子集:
  1. (Page:1107)XML 命名空间:可以实现在一个格式规范的文档中混用不同的 XML 语言
<html xmlns="http://www.w3.org/1999/xhtml">
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
      <rect x="0" y ="0" width="100" height="100" style="fill:red" />
    </svg>
  </body>
</html>
  1. (Page:1119)DOM 节点相关属性和方法:
  1. (Page:1123)样式属性
  1. (Page:1131)操作样式表
  1. (Page:1137)元素尺寸

- 偏移尺寸属性

- 客户端尺寸属性

- 滚动尺寸属性

- 确定元素尺寸

  1. (Page:1144)DOM 遍历:**NodeIterator** \ **TreeWalker**(两套 DOM API);
  2. (Page:1156)DOM 范围:**Range**;

第 17 章 - 事件

  1. (Page:1176)事件捕获与事件冒泡:前者的事件由最外层向目标事件传播;后者由目标元素向最上层元素逐层传播。现代浏览器会先进行捕获(到达目标元素),再进行冒泡(从目标元素开始)

  1. (Page:1181)事件处理程序(Event Handler):
<html>
  <body>
 <form method="post">
   <input type="text" name="username">
   <!-- 包装函数扩展了作用域链,可以直接访问成员对象 -->
   <input type="button" value="Echo Username" onClick="console.log(username.value)">
 </form>
  </body>
</html>
let btn = document.getElementById('myBtn');
if (btn) {
  btn.onclick = (e) => {
   console.log(this.id);
  }
}
let btn = document.getElementById('myBtn');
let handler = (e) => { console.log(this.id); }
if (btn) {
  btn.addEventListener('click', handler, true);
}
btn.removeEventListener('click', handler, true);
  1. (Page:1194)事件对象(event)的属性和方法:
  1. (Page:1211)事件类型
// add an appropriate event listener.
let obj = document.getElementById('obj');
obj.addEventListener("cat", e => { console.log(e.detail) });

// create and dispatch the event.
let event = new CustomEvent("cat", {
  detail: {
    hazcheeseburger: true
  }
});
obj.dispatchEvent(event);
  1. (Page:1296)事件优化:


这是文章底线,下面是评论
  暂无评论,欢迎勾搭 :)