听说过CSS in JS，那你听说过JS in CSS吗

SS in JS

CSS in JS是一种解决css问题想法的集合，而不是一个指定的库。从CSS in JS的字面意思可以看出，它是将css样式写在JavaScript文件中，而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、tree-shaking。还解决了css中的一些问题，譬如：更方便解决基于状态的样式，更容易追溯依赖关系，生成唯一的选择器来锁定作用域。尽管CSS in JS不是一个很新的技术，但国内的普及程度并不高。由于Vue和Angular都有属于他们自己的一套定义样式的方案，React本身也没有管用户怎样定义组件的样式[1]，所以CSS in JS在React社区的热度比较高。

目前为止实现CSS in JS的第三方库有很多:(http://michelebertoli.github.io/css-in-js/)。像JSS[2]、styled-components[3]等。在这里我们就不展开赘述了(相关链接已放在下方)，这篇文章的重点是JS in CSS。

JS in CSS又是什么

在上面我们提到CSS in JS就是把CSS写在JavaScript中，那么JS in CSS我们可以推断出就是可以在CSS中使用JavaScript脚本，如下所示。可以在CSS中编写Paint API的功能。还可以访问：ctx，geom。甚至我们还可以编写自己的css自定义属性等。这些功能的实现都基于CSS Houdini[4]。

.el {
  --color: cyan;
  --multiplier: 0.24;
  --pad: 30;
  --slant: 20;
  --background-canvas: (ctx, geom) => {
    let multiplier = var(--multiplier);
    let c = `var(--color)`;
    let pad = var(--pad);
    let slant = var(--slant);

    ctx.moveTo(0, 0);
    ctx.lineTo(pad + (geom.width - slant - pad) * multiplier, 0);
    ctx.lineTo(pad + (geom.width - slant - pad) * multiplier + slant, geom.height);
    ctx.lineTo(0, geom.height);
    ctx.fillStyle = c;
    ctx.fill();
  };
  background: paint(background-canvas);
  transition: --multiplier .4s;
}
.el:hover {
  --multiplier: 1;
}

Houdini 解决了什么问题

CSS 与 JS的标准制定流程对比

在如今的Web开发中，JavaScript几乎占据了项目代码的大部分。我们可以在项目开发中使用ES 2020、ES2021、甚至提案中的新特性（如:Decorator[5]），即使浏览器尚未支持，也可以编写Polyfill或使用Babel之类的工具进行转译，让我们可以将最新的特性应用到生产环境中（如下图所示）。

JavaScript标准制定流程.png

而CSS就不同了，除了制定CSS标准规范所需的时间外，各家浏览器的版本、实战进度差异更是旷日持久（如下图所示），最多利用PostCSS、Sass等工具來帮我们转译出浏览器能接受的CSS。开发者们能操作的就是通过JS去控制DOM与CSSOM来影响页面的变化，但是对于接下來的Layout、Paint与Composite就几乎没有控制权了。为了解决上述问题，为了让CSS的魔力不在受到浏览器的限制，Houdini就此诞生。

CSS 标准制定流程.png

CSS Polyfill

我们上文中提到JavaScript中进入提案中的特性我们可以编写Polyfill，只需要很短的时间就可以讲新特性投入到生产环境中。这时，脑海中闪现出的第一个想法就是CSS Polyfill，只要CSS的Polyfill 足够强大，CSS或许也能有JavaScript一样的发展速度，令人可悲的是编写CSS Polyfill异常的困难，并且大多数情况下无法在不破坏性能的情况下进行。这是因为JavaScript是一门动态脚本语言[6]。它带来了极强的扩展性，正是因为这样，我们可以很轻松使用JavaScript做出JavaScript的Polyfill。但是CSS不是动态的，在某些场景下，我们可以在编译时将一种形式的CSS的转换成另一种(如PostCSS[7])。如果你的Polyfill依赖于DOM结构或者某一个元素的布局、定位等，那么我们的Polyfill就无法编译时执行，而需要在浏览器中运行了。不幸的是，在浏览器中实现这种方案非常不容易。

页面渲染流程.png

如上图所示，是从浏览器获取到HTML到渲染在屏幕上的全过程，我们可以看到只有带颜色（粉色、蓝色）的部分是JavaScript可以控制的环节。首先我们根本无法控制浏览器解析HTML与CSS并将其转化为DOM与CSSOM的过程，以及Cascade,Layout,Paint,Composite我们也无能为力。整个过程中我们唯一完全可控制的就是DOM，另外CSSOM部分可控。

CSS Houdini草案中提到，这种程度的暴露是不确定的、兼容性不稳定的以及缺乏对关键特性的支持的。比如，在浏览器中的 CSSOM 是不会告诉我们它是如何处理跨域的样式表，而且对于浏览器无法解析的 CSS 语句它的处理方式就是不解析了，也就是说——如果我们要用 CSS polyfill让浏览器去支持它尚且不支持的属性，那就不能在 CSSOM 这个环节做，我们只能遍历一遍DOM，找到 <style> 或 <link rel="stylesheet"> 标签，获取其中的 CSS 样式、解析、重写，最后再加回 DOM 树中。令人尴尬的是，这样DOM树全部刷新了，会导致页面的重新渲染（如下如所示）。

即便如此，有的人可能会说：“除了这种方法，我们也别无选择，更何况对网站的性能也不会造成很大的影响”。那么对于部分网站是这样的。但如果我们的Polyfill是需要对可交互的页面呢？例如scroll，resize，mousemove，keyup等等，这些事件随时会被触发，那么意味着随时都会导致页面的重新渲染，交互不会像原本那样丝滑，甚至导致页面崩溃，对用户的体验也极其不好。

综上所述，如果我们想让浏览器解析它不认识的样式（低版本浏览器使用grid布局），然而渲染流程我们无法介入，我们也只能通过手动更新DOM的方式，这样会带来很多问题，Houdini的出现正是致力于解决他们。

Houdini API

Houdini是一组底层API，它公开了CSS引擎的各个部分，如下图所示展示了每个环节对应的新API（灰色部分各大浏览器还未实现），从而使开发人员能够通过加入浏览器渲染引擎的样式和布局过程来扩展CSS。Houdini是一群来自Mozilla，Apple，Opera，Microsoft，HP，Intel和Google的工程师组成的工作小组设计而成的。它们使开发者可以直接访问CSS对象模型（CSSOM），使开发人员可以编写浏览器可以解析为CSS的代码，从而创建新的CSS功能，而无需等待它们在浏览器中本地实现。

CSS Houdini-API

Properties & Values API

尽管当前已经有了CSS变量，可以让开发者控制属性值，但是无法约束类型或者更严格的定义，CSS Houdini新的API，我们可以扩展css的变量，我们可以定义CSS变量的类型,初始值,继承。它是css变量更强大灵活。

CSS变量现状：

.dom {
  --my-color: green;
  --my-color: url('not-a-color'); // 它并不知道当前的变量类型
  color: var(--my-color);
}

Houdini提供了两种自定义属性的注册方式，分别是在js和css中。

CSS.registerProperty({
  name: '--my-prop', // String 自定义属性名
  syntax: '<color>', // String 如何去解析当前的属性，即属性类型，默认 *
  inherits: false, // Boolean 如果是true，子节点将会继承
  initialValue: '#c0ffee', // String 属性点初始值
});

我们还可以在css中注册，也可以达到上面的效果

@property --my-prop {
  syntax: '<color>';
  inherits: false;
  initial-value: #c0ffee;
}

这个API中最令人振奋人心的功能是自定义属性上添加动画，像这样：transition: --multiplier 0.4s;，这个功能我们在前面介绍什么是js in css那个demo[8]用使用过。我们还可以使用+使syntax属性支持一个或多个类型，也可以使用|来分割。更多syntax属性值：

属性值描述<length>长度值<number>数字<percentage>百分比<length-percentage>长度或百分比,calc将长度和百分比组成的表达式<color>颜色<image>图像<url>网址<integer>整数<angle>角度<time>时间<resolution>分辨率<transform-list>转换函数<custom-ident>ident

Worklets

Worklets是渲染引擎的扩展，从概念上来讲它类似于Web Workers[9]，但有几个重要的区别：

设计为并行，每个Worklets必须始终有两个或更多的实例，它们中的任何一个都可以在被调用时运行
作用域较小，限制不能访问全局作用域的API（Worklet的函数除外）
渲染引擎会在需要的时候调用他们，而不是我们手动调用

Worklet是一个JavaScript模块，通过调用worklet的addModule方法（它是个Promise）来添加。比如registerLayout,registerPaint, registerAnimator 我们都需要放在Worklet中

//加载单个
await demoWorklet.addModule('path/to/script.js');

// 一次性加载多个worklet
Promise.all([
  demoWorklet1.addModule('script1.js'),
  demoWorklet2.addModule('script2.js'),
]).then(results => {});

registerDemoWorklet('name', class {

  // 每个Worklet可以定义要使用的不同函数
  // 他们将由渲染引擎在需要时调用
  process(arg) {
    return !arg;
  }
});

Worklets的生命周期

Worklets lifecycle

Worklet的生命周期从渲染引擎内开始
对于JavaScript，渲染引擎启动JavaScript主线程
然后他将启动多个worklet进程，并且可以运行。这些进程理想情况下是独立于主线程的线程，这样就不会阻塞主线程(但它们也不需要阻塞)
然后在主线程中加载我们浏览器的JavaScript
该JavaScript调用 worklet.addModule 并异步加载一个worklet
加载后，将worklet加载到两个或多个可用的worklet流程中
当需要时，渲染引擎将通过从加载的Worklet中调用适当的处理函数来执行Worklet。该调用可以针对任何并行的Worklet实例。

Typed OM

Typed OM是对现有的CSSOM的扩展，并实现 Parsing API 和 Properties & Values API相关的特性。它将css值转化为有意义类型的JavaScript的对象，而不是像现在的字符串。如果我们尝试将字符串类型的值转化为有意义的类型并返回可能会有很大的性能开销，因此这个API可以让我们更高效的使用CSS的值。

现在读取CSS值增加了新的基类CSSStyleValue，他有许多的子类可以更加精准的描述css值的类型：

子类描述CSSKeywordValueCSS关键字和其他标识符（如inherit或grid）CSSPositionValue位置信息 (x,y)CSSImageValue表示图像的值属性的对象CSSUnitValue表示为具有单个单位的单个值（例如50px），也可以表示为没有单位的单个值或百分比CSSMathValue比较复杂的数值，比如有calc，min和max。这包括子类 CSSMathSum, CSSMathProduct, CSSMathMin,CSSMathMax, CSSMathNegate 和 CSSMathInvertCSSTransformValue由CSS transforms组成的CSSTransformComponent列表，其中包括CSSTranslate, CSSRotate, CSSScale, CSSSkew, CSSSkewX, CSSSkewY, CSSPerspective 和 CSSMatrixComponent

使用Typed OM主要有两种方法：

通过attributeStyleMap设置和获取有类型的行间样式
通过computedStyleMap获取元素完整的Typed OM样式

使用attributeStyleMap设置并获取

myElement.attributeStyleMap.set('font-size', CSS.em(2));
myElement.attributeStyleMap.get('font-size'); // CSSUnitValue { value: 2, unit: 'em' }

myElement.attributeStyleMap.set('opacity', CSS.number(.5));
myElement.attributeStyleMap.get('opacity'); // CSSUnitValue { value: 0.5, unit: 'number' };

在线demo[10]

使用computedStyleMap

.foo {
  transform: translateX(1em) rotate(50deg) skewX(10deg);
  vertical-align: baseline;
  width: calc(100% - 3em);
}

const cs = document.querySelector('.foo').computedStyleMap();

cs.get('vertical-align');
// CSSKeywordValue {
//  value: 'baseline',
// }

cs.get('width');
// CSSMathSum {
//   operator: 'sum',
//   length: 2,
//   values: CSSNumericArray {
//     0: CSSUnitValue { value: -90, unit: 'px' },
//     1: CSSUnitValue { value: 100, unit: 'percent' },
//   },
// }

cs.get('transform');
// CSSTransformValue {
//   is2d: true,
//   length: 3,
//   0: CSSTranslate {
//     is2d: true,
//     x: CSSUnitValue { value: 20, unit: 'px' },
//     y: CSSUnitValue { value: 0, unit: 'px' },
//     z: CSSUnitValue { value: 0, unit: 'px' },
//   },
//   1: CSSRotate {...},
//   2: CSSSkewX {...},
// }

Layout API

开发者可以通过这个API实现自己的布局算法，我们可以像原生css一样使用我们自定义的布局（像display:flex, display:table）。在Masonry layout library[11] 上我们可以看到开发者们是有多想实现各种各样的复杂布局，其中一些布局光靠 CSS 是不行的。虽然这些布局会让人耳目一新印象深刻，但是它们的页面性能往往都很差，在一些低端设备上性能问题犹为明显。

CSS Layout API 暴露了一个registerLayout方法给开发者，接收一个布局名（layout name）作为后面在 CSS中使用的属性值，还有一个包含有这个布局逻辑的JavaScript类。

my-div {
  display: layout(my-layout);
}

// layout-worklet.js
registerLayout('my-layout', class {
  static get inputProperties() { return ['--foo']; }
  
  static get childrenInputProperties() { return ['--bar']; }
  
  async intrinsicSizes(children, edges, styleMap) {}

  async layout(children, edges, constraints, styleMap) {}
});

await CSS.layoutWorklet.addModule('layout-worklet.js');

目前浏览器大部分还不支持

Painting API

我们可以在CSS background-image中使用它，我们可以使用Canvas 2d上下文，根据元素的大小控制图像，还可以使用自定义属性。

await CSS.paintWorklet.addModule('paint-worklet.js');

registerPaint('sample-paint', class {
  static get inputProperties() { return ['--foo']; }

  static get inputArguments() { return ['<color>']; }

  static get contextOptions() { return {alpha: true}; }

  paint(ctx, size, props, args) { }
});

Animation API

这个API让我们可以控制基于用户输入的关键帧动画，并且以非阻塞的方式。还能更改一个 DOM 元素的属性，不过是不会引起渲染引擎重新计算布局或者样式的属性，比如 transform、opacity 或者滚动条位置（scroll offset）。Animation API的使用方式与 Paint API 和Layout API略有不同我们还需要通过new一个WorkletAnimation来注册worklet。

// animation-worklet.js
registerAnimator('sample-animator', class {
  constructor(options) {
  }
  animate(currentTime, effect) {
    effect.localTime = currentTime;
  }
});

await CSS.animationWorklet.addModule('animation-worklet.js');

// 需要添加动画的元素
const elem = document.querySelector('#my-elem');
const scrollSource = document.scrollingElement;
const timeRange = 1000;
const scrollTimeline = new ScrollTimeline({
  scrollSource,
  timeRange,
});

const effectKeyframes = new KeyframeEffect(
  elem,
  // 动画需要绑定的关键帧
  [
    {transform: 'scale(1)'},
    {transform: 'scale(.25)'},
    {transform: 'scale(1)'}
  ],
  {
    duration: timeRange,
  },
);
new WorkletAnimation(
  'sample-animator',
  effectKeyframes,
  scrollTimeline,
  {},
).play();

关于此API的更多内容：(https://github.com/w3c/css-houdini-drafts/tree/main/css-animation-worklet-1)

Parser API

允许开发者自由扩展 CSS 词法分析器。

解析规则：

const background = window.cssParse.rule("background: green");
console.log(background.styleMap.get("background").value) // "green"

const styles = window.cssParse.ruleSet(".foo { background: green; margin: 5px; }");
console.log(styles.length) // 5
console.log(styles[0].styleMap.get("margin-top").value) // 5
console.log(styles[0].styleMap.get("margin-top").type) // "px"

解析CSS：

const style = fetch("style.css")
        .then(response => CSS.parseStylesheet(response.body));
style.then(console.log);

Font Metrics API

它将提供一些方法来测量在屏幕上呈现的文本元素的尺寸，将允许开发者控制文本元素在屏幕上呈现的方式。使用当前功能很难或无法测量这些值，因此该API将使开发者可以更轻松地创建与文本和字体相关的CSS特性。例如：

flex布局: align-items baseline特性。需要知道每一个flex盒子中第一个元素的基线位置。
首字母: 需要知道每个字母的基线高度和字母最大的高度，以及换行内容的基线长度。
单个字形的前进和后退。
换行: 需要访问字体数据，文本的所有样式输入以及布局信息（可用的段落长度等）。
元素中的每一个line boxes都需要一个基线。(line boxes代表包含众多inline boxes的这行)

Houdini 目前进展

Is Houdini ready yet

(https://ishoudinireadyyet.com/)

Houdini 的蓝图

了解到这里，部分开发者可能会说：“我不需要这些花里胡哨的技术，并不能带收益。我只想简简单单的写几个页面，做做普通的Web App，并不想试图干预浏览器的渲染过程从而实现一些实验性或炫酷的功能。”如果这样想的话，我们不妨退一步再去思考。回忆下最近做过的项目，用于实现页面效果所使用到的技术，grid布局方式在考虑兼容老版本浏览器时也不得不放弃。我们想控制浏览器渲染页面的过程并不是仅仅为了炫技，更多的是为了帮助开发者们解决以下两个问题：

统一各大浏览器的行为
像JavaScript一样，在推出新的特性时，我们可以通过Polyfill的形式快速的投入生产环境中。

几年过后再回眸，当主流浏览器完全支持Houdini的时候。我们可以在浏览器上随心所欲的使用任何CSS属性，并且他们都能完美支持。像今天的grid布局在旧版本浏览器支持的并不友好的这类问题，那时我们只需要安装对应的Polyfill就能解决类似的问题。

档对象模型(DOM)

JS 有很多地方让咱们吐槽，但没那么糟糕。作为一种在浏览器中运行的脚本语言，它对于处理web页面非常有用。在本中，我们将看到我们有哪些方法来交互和修改HTML文档及其元素。但首先让我们来揭开文档对象模型的神秘面纱。

文档对象模型是一个基本概念，它是咱们在浏览器中所做的一切工作的基础。但那到底是什么? 当咱们访问一个 web 页面时，浏览器会指出如何解释每个 HTML 元素。这样它就创建了 HTML 文档的虚拟表示，并保存在内存中。HTML 页面被转换成树状结构，每个 HTML 元素都变成一个叶子，连接到父分支。考虑这个简单的HTML 页面：

<!DOCTYPE html>
<html lang="en">
<head>
 <title>A super simple title!</title>
</head>
<body>
<h1>A super simple web page!</h1>
</body>
</html

当浏览器扫描上面的 HTML 时，它创建了一个文档对象模型，它是HTML结构的镜像。在这个结构的顶部有一个 document 也称为根元素，它包含另一个元素:html。html 元素包含一个 head，head 又有一个 title。然后是含有 h1的 body。每个 HTML 元素由特定类型(也称为接口)表示，并且可能包含文本或其他嵌套元素

document (HTMLDocument)
 |
 | --> html (HTMLHtmlElement)
 | 
 | --> head (HtmlHeadElement)
 | |
 | | --> title (HtmlTitleElement)
 | | --> text: "A super simple title!"
 |
 | --> body (HtmlBodyElement)
 | |
 | | --> h1 (HTMLHeadingElement)
 | | --> text: "A super simple web page!"

每个 HTML 元素都是从 Element 派生而来的，但是它们中的很大一部分是进一步专门化的。咱们可以检查原型，以查明元素属于什么“种类”。例如，h1 元素是 HTMLHeadingElement

document.quertSelector('h1').__proto__
// 输出：HTMLHeadingElement

HTMLHeadingElement 又是 HTMLElement 的“后代”

document.querySelector('h1').__proto__.__proto__
// Output: HTMLElement

Element 是一个通用性非常强的基类，所有 Document 对象下的对象都继承自它。这个接口描述了所有相同种类的元素所普遍具有的方法和属性。一些接口继承自 Element 并且增加了一些额外功能的接口描述了具体的行为。例如， HTMLElement 接口是所有 HTML 元素的基本接口，而 SVGElement 接口是所有 SVG 元素的基础。大多数功能是在这个类的更深层级（hierarchy）的接口中被进一步制定的。

在这一点上(特别是对于初学者)，document 和 window 之间可能有些混淆。window 指的是浏览器，而 document 指的是当前的 HTML 页面。window 是一个全局对象，可以从浏览器中运行的任何 JS 代码直接访问它。它不是 JS 的“原生”对象，而是由浏览器本身公开的。window 有很多属性和方法，如下所示：

window.alert('Hello world'); // Shows an alert
window.setTimeout(callback, 3000); // Delays execution
window.fetch(someUrl); // makes XHR requests
window.open(); // Opens a new tab
window.location; // Browser location
window.history; // Browser history
window.navigator; // The actual device
window.document; // The current page

由于这些属性是全局属性，因此也可以省略 window：

alert('Hello world'); // Shows an alert
setTimeout(callback, 3000); // Delays execution
fetch(someUrl); // makes XHR requests
open(); // Opens a new tab
location; // Browser location
history; // Browser history
navigator; // The actual device
document; // The current page

你应该已经熟悉其中的一些方法，例如 setTimeout()或 window.navigator，它可以获取当前浏览器使用的语言：

if (window.navigator) {
 var lang = window.navigator.language;
 if (lang === "en-US") {
 // show something
 }
 if (lang === "it-IT") {
 // show something else
 }
}

要了解更多 window 上的方法，请查看MDN文档。在下一节中，咱们深入地研究一下 DOM。

节点、元素和DOM 操作

document 接口有许多实用的方法，比如 querySelector()，它是用于选择当前 HTML 页面内的任何 HTML 元素：

document.querySelector('h1');

window 表示当前窗口的浏览器，下面的指令与上面的相同：

window.document.querySelector('h1');

不管怎样，下面的语法更常见，在下一节中咱们将大量使用这种形式：

document.methodName();

除了 querySelector() 用于选择 HTML 元素之外，还有很多更有用的方法

// 返回单个元素
document.getElementById('testimonials'); 
// 返回一个 HTMLCollection
document.getElementsByTagName('p'); 
// 返回一个节点列表
document.querySelectorAll('p');

咱们不仅可以选择HTML 元素，还可以交互和修改它们的内部状态。例如，希望读取或更改给定元素的内部内容：

// Read or write
document.querySelector('h1').innerHtml; // Read
document.querySelector('h1').innerHtml = ''; // Write! Ouch!

DOM 中的每个 HTML 元素也是一个“节点”，实际上咱们可以像这样检查节点类型：

document.querySelector('h1').nodeType;

上述结果返回 1，表示是 Element 类型的节点的标识符。咱们还可以检查节点名：

document.querySelector('h1').nodeName;
"H1"

这里，节点名以大写形式返回。通常我们处理 DOM 中的四种类型的节点

document: 根节点(nodeType 9)
类型为Element的节点：实际的HTML标签（nodeType 1）,例如 <p> 和 <div>
类型属性的节点：每个HTML元素的属性（属性）
Text 类型的节点:元素的实际文本内容(nodeType 3)

由于元素是节点，节点可以有属性(properties )(也称为attributes)，咱们可以检查和操作这些属性：

// 返回 true 或者 false
document.querySelector('a').hasAttribute('href');
// 返回属性文本内容，或 null
document.querySelector('a').getAttribute('href');
// 设置给定的属性
document.querySelector('a').setAttribute('href', 'someLink');

前面我们说过 DOM 是一个类似于树的结构。这种特性也反映在 HTML 元素上。每个元素都可能有父元素和子元素，我们可以通过检查元素的某些属性来查看它们:

// 返回一个 HTMLCollection
document.children;
// 返回一个节点列表
document.childNodes;
// 返回一个节点
document.querySelector('a').parentNode;
// 返回HTML元素
document.querySelector('a').parentElement;

了解了如何选择和查询 HTML 元素。那创建元素又是怎么样?为了创建 Element 类型的新节点，原生 DOM API 提供了 createElement 方法：

var heading = document.createElement('h1');

使用 createTextNode 创建文本节点：

var text = document.createTextNode('Hello world');

通过将 text 附加到新的 HTML 元素中，可以将这两个节点组合在一起。最后，还可以将heading元素附加到根文档中:

var heading = document.createElement('h1');
var text = document.createTextNode('Hello world');
heading.appendChild(text);
document.body.appendChild(heading);

还可以使用 remove() 方法从 DOM 中删除节点。在元素上调用方法，该节点将从页面中消失：

document.querySelector('h1').remove();

这些是咱们开始在浏览器中使用 JS 操作 DOM 所需要知道的全部内容。在下一节中，咱们将灵活地使用 DOM，但首先要绕个弯，因为咱们还需要讨论“DOM事件”。

DOM 和事件

DOM 元素是很智能的。它们不仅可以包含文本和其他 HTML 元素，还可以“发出”和响应“事件”。浏览任何网站并打开浏览器控制台。使用以下命令选择一个元素：

document.querySelector('p')

看看这个属性

document.querySelector('p').onclick

它是什么类型:

typeof document.querySelector('p').onclick // "object"

"object"! 为什么它被称为“onclick”? 凭一点直觉我们可以想象它是元素上的某种神奇属性，能够对点击做出反应? 完全正确。

如果你感兴趣，可以查看任何 HTML 元素的原型链。会发现每个元素也是一个 Element，而元素又是一个节点，而节点又是一个EventTarget。可以使用 instanceof 来验证这一点。

document.querySelector('p') instanceof EventTarget // true

我很乐意称 EventTarget 为所有 HTML 元素之父，但在JS中没有真正的继承，它更像是任何 HTML 元素都可以看到另一个连接对象的属性。因此，任何 HTML 元素都具有与 EventTarget相同的特性:发布事件的能力。

但事件到底是什么呢?以 HTML 按钮为例。如果你点击它，那就是一个事件。有了这个.onclick对象，咱们可以注册事件，只要元素被点击，它就会运行。传递给事件的函数称为“事件监听器”或“事件句柄”。

事件和监听

在 DOM 中注册事件监听器有三种方法。第一种形式比较陈旧，应该避免，因为它耦合了逻辑操作和标签

<!-- 不好的方式 -->
<button onclick="console.log('clicked')">喜欢，就点点我</button>

第二个选项依赖于以事件命名的对象。例如，咱们可以通过在对象.onclick上注册一个函数来监听click事件：

document.querySelector("button").onclick = handleClick;
function handleClick() {
 console.log("Clicked!");
}

此语法更加简洁，是内联处理程序的不错替代方案。还有另一种基于addEventListener的现代形式：

document.querySelector("button").addEventListener("click", handleClick);
function handleClick() {
 console.log("Clicked!");
}

就我个人而言，我更喜欢这种形式，但如果想争取最大限度的浏览器兼容性，请使用 .on 方式。现在咱们已经有了一个 HTML 元素和一个事件监听器，接着进一步研究一下 DOM 事件。

事件对象、事件默认值和事件冒泡

作为事件处理程序传递的每个函数默认接收一个名为“event”的对象

var button = document.querySelector("button");
button.addEventListener("click", handleClick);
function handleClick() {
 console.log(event);
}

它可以直接在函数体中使用，但是在我的代码中，我更喜欢将它显式地声明为参数：

function handleClick(event) {
 console.log(event);
}

事件对象是“必须要有的”，因为咱们可以通过调用事件上的一些方法来控制事件的行为。事件实际上有特定的特征，尤其是“默认”和“冒泡”。考虑一个HTML 链接。使用以下标签创建一个名为click-event.html的新HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Click event</title>
</head>
<body>
<div>
 <a href="/404.html">click me!</a>
</div>
</body>
<script src="click-event.js"></script>
</html>

在浏览器中运行该文件并尝试单击链接。它将跳转到一个404的界面。链接上单击事件的默认行为是转到href属性中指定的实际页面。但如果我告诉你有办法阻止默认值呢?输入preventDefault()，该方法可用于事件对象。使用以下代码创建一个名为click-event.js的新文件：

var button = document.querySelector("a");
button.addEventListener("click", handleClick);
function handleClick(event) {
 event.preventDefault();
}

在浏览器中刷新页面并尝试现在单击链接:它不会跳转了。因为咱们阻止了浏览器的“事件默认” 链接不是默认操作的惟一HTML 元素，表单具有相同的特性。

当 HTML 元素嵌套在另一个元素中时，还会出现另一个有趣的特性。考虑以下 HTML

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Nested events</title>
</head>
<body>
<div id="outer">
 I am the outer div
 <div id="inner">
 I am the inner div
 </div>
</div>
</body>
<script src="nested-events.js"></script>
</html>

和下面的 JS 代码：

// nested-events.js
var outer = document.getElementById('inner');
var inner = document.getElementById('outer');
function handleClick(event){
 console.log(event);
}
inner.addEventListener('click', handleClick);
outer.addEventListener('click', handleClick);

有两个事件监听器，一个用于外部 div，一个用于内部 div。准确地点击内部div，你会看到：

两个事件对象被打印。这就是事件冒泡在起作用。它看起来像是浏览器行为中的一个 bug，使用 stopPropagation() 方法可以禁用，这也是在事件对象上调用的

//
function handleClick(event) {
 event.stopPropagation();
 console.log(event);
}
///

尽管看起来实现效果很差，但在注册过多事件监听器确实对性能不利的情况下，冒泡还是会让人眼前一亮。考虑以下示例：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Event bubbling</title>
</head>
<body>
<ul>
 <li>one</li>
 <li>two</li>
 <li>three</li>
 <li>four</li>
 <li>five</li>
</ul>
</body>
<script src="event-bubbling.js"></script>
</html>

如果要兼听列表的点击事件，需要在列表中注册多少事件监听器?答案是:一个。只需要一个在ul上注册的侦听器就可以截获任何li上的所有单击:

// event-bubbling.js
var ul = document.getElementsByTagName("ul")[0];
function handleClick(event) {
 console.log(event);
}
ul.addEventListener("click", handleClick);

可以看到，事件冒泡是提高性能的一种实用方法。实际上，对浏览器来说，注册事件监听器是一项昂贵的操作，而且在出现大量元素列表的情况下，可能会导致性能损失。

用 JS 生成表格

现在咱们开始编码。给定一个对象数组，希望动态生成一个HTML 表格。HTML 表格由 <table> 元素表示。每个表也可以有一个头部，由 <thead> 元素表示。头部可以有一个或多个行 <tr>，每个行都有一个单元格，由一个 <th>元素表示。如下所示：

<table>
 <thead>
 <tr>
 <th>name</th>
 <th>height</th>
 <th>place</th>
 </tr>
 </thead>
 <!-- more stuff here! -->
</table>

不止这样，大多数情况下，每个表都有一个主体，由 <tbody> 定义，而 <tbody> 又包含一组行<tr>。每一行都可以有包含实际数据的单元格。表单元格由<td>定义。完整如下所示：

<table>
 <thead>
 <tr>
 <th>name</th>
 <th>height</th>
 <th>place</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>Monte Falco</td>
 <td>1658</td>
 <td>Parco Foreste Casentinesi</td>
 </tr>
 <tr>
 <td>Monte Falterona</td>
 <td>1654</td>
 <td>Parco Foreste Casentinesi</td>
 </tr>
 </tbody>
</table>

现在的任务是从 JS 对象数组开始生成表格。首先，创建一个名为build-table.html的新文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Build a table</title>
</head>
<body>
<table>
<!-- here goes our data! -->
</table>
</body>
<script src="build-table.js"></script>
</html>

在相同的文件夹中创建另一个名为build-table.js的文件，并使用以下数组开始：

"use strict";
var mountains = [
 { name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" },
 { name: "Monte Falterona", height: 1654, place: "Parco Foreste Casentinesi" },
 { name: "Poggio Scali", height: 1520, place: "Parco Foreste Casentinesi" },
 { name: "Pratomagno", height: 1592, place: "Parco Foreste Casentinesi" },
 { name: "Monte Amiata", height: 1738, place: "Siena" }
];

考虑这个表格。首先，咱们需要一个 <thead>：

document.createElement('thead')

这没有错，但是仔细查看MDN的表格文档会发现一个有趣的细节。<table> 是一个 HTMLTableElement，它还包含有趣方法。其中最有用的是HTMLTableElement.createTHead()，它可以帮助创建咱们需要的 <thead>。

首先，编写一个生成 thead 标签的函数 generateTableHead

function generateTableHead(table) {
 var thead = table.createTHead();
}

该函数接受一个选择器并在给定的表上创建一个 <thead>:

function generateTableHead(table) {
 var thead = table.createTHead();
}
var table = document.querySelector("table");
generateTableHead(table);

在浏览器中打开 build-table.html:什么都没有.但是，如果打开浏览器控制台，可以看到一个新的 <thead> 附加到表。

接着填充 header 内容。首先要在里面创建一行。还有另一个方法可以提供帮助:HTMLTableElement.insertRow()。有了这个，咱们就可以扩展方法了：

function generateTableHead (table) {
 var thead = table,createThead();
 var row = thead.insertRow();
}

此时，我们可以生成我们的行。通过查看源数组，可以看到其中的任何对象都有咱们需要信息：

var mountains = [
 { name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" },
 { name: "Monte Falterona", height: 1654, place: "Parco Foreste Casentinesi" },
 { name: "Poggio Scali", height: 1520, place: "Parco Foreste Casentinesi" },
 { name: "Pratomagno", height: 1592, place: "Parco Foreste Casentinesi" },
 { name: "Monte Amiata", height: 1738, place: "Siena" }
];

这意味着咱们可以将另一个参数传递给我们的函数:一个遍历以生成标题单元格的数组：

function generateTableHead(table, data) {
 var thead = table.createTHead();
 var row = thead.insertRow();
 for (var i = 0; i < data.length; i++) {
 var th = document.createElement("th");
 var text = document.createTextNode(data[i]);
 th.appendChild(text);
 row.appendChild(th);
 }
}

不幸的是，没有创建单元格的原生方法，因此求助于document.createElement("th")。同样值得注意的是，document.createTextNode(data[i])用于创建文本节点，appendChild()用于向每个标记添加新元素。

当以这种方式创建和操作元素时，我们称之为“命令式” DOM 操作。现代前端库通过支持“声明式”方法来解决这个问题。我们可以声明需要哪些 HTML 元素，而不是一步一步地命令浏览器，其余的由库处理。

回到我们的代码，可以像下面这样使用第一个函数

var table = document.querySelector("table");
var data = Object.keys(mountains[0]);
generateTableHead(table, data);

现在我们可以进一步生成实际表的数据。下一个函数将实现一个类似于generateTableHead的逻辑，但这一次咱们需要两个嵌套的for循环。在最内层的循环中，使用另一种原生方法来创建一系列td。方法是HTMLTableRowElement.insertCell()。在前面创建的文件中添加另一个名为generateTable的函数

function generateTable(table, data) {
 for (var i = 0; i < data.length; i++) {
 var row = table.insertRow();
 for (var key in data[i]) {
 var cell = row.insertCell();
 var text = document.createTextNode(data[i][key]);
 cell.appendChild(text);
 }
 }
}

调用上面的函数，将 HTML表和对象数组作为参数传递：

generateTable(table, mountains);

咱们深入研究一下 generateTable 的逻辑。参数 data 是一个与 mountains 相对应的数组。最外层的 for 循环遍历数组并为每个元素创建一行：

function generateTable(table, data) {
 for (var i = 0; i < data.length; i++) {
 var row = table.insertRow();
 // omitted for brevity
 }
}

最内层的循环遍历任何给定对象的每个键，并为每个对象创建一个包含键值的文本节点

function generateTable(table, data) {
 for (var i = 0; i < data.length; i++) {
 var row = table.insertRow();
 for (var key in data[i]) {
 // inner loop
 var cell = row.insertCell();
 var text = document.createTextNode(data[i][key]);
 cell.appendChild(text);
 }
 }
}

最终代码：

var mountains = [
 { name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" },
 { name: "Monte Falterona", height: 1654, place: "Parco Foreste Casentinesi" },
 { name: "Poggio Scali", height: 1520, place: "Parco Foreste Casentinesi" },
 { name: "Pratomagno", height: 1592, place: "Parco Foreste Casentinesi" },
 { name: "Monte Amiata", height: 1738, place: "Siena" }
];
function generateTableHead(table, data) {
 var thead = table.createTHead();
 var row = thead.insertRow();
 for (var i = 0; i < data.length; i++) {
 var th = document.createElement("th");
 var text = document.createTextNode(data[i]);
 th.appendChild(text);
 row.appendChild(th);
 }
}
function generateTable(table, data) {
 for (var i = 0; i < data.length; i++) {
 var row = table.insertRow();
 for (var key in data[i]) {
 var cell = row.insertCell();
 var text = document.createTextNode(data[i][key]);
 cell.appendChild(text);
 }
 }
}

其中调用：

var table = document.querySelector("table");
var data = Object.keys(mountains[0]);
generateTable(table, mountains);
generateTableHead(table, data);

执行结果：

当然，咱们的方法还可以该进，下个章节将介绍。

总结

DOM 是 web 浏览器保存在内存中的 web 页面的虚拟副本。DOM 操作是指从 DOM 中创建、修改和删除 HTML 元素的操作。在过去，咱们常常依赖 jQuery 来完成更简单的任务，但现在原生 API 已经足够成熟，可以让 jQuery 过时了。另一方面，jQuery 不会很快消失，但是每个 JS 开发人员都必须知道如何使用原生 API 操作 DOM。

这样做的理由有很多，额外的库增加了加载时间和 JS 应用程序的大小。更不用说 DOM 操作在面试中经常出现。

DOM 中每个可用的 HTML 元素都有一个接口，该接口公开一定数量的属性和方法。当你对使用何种方法有疑问时，参考MDN文档。操作 DOM 最常用的方法是 document.createElement()用于创建新的 HTML 元素，document.createTextNode() 用于在 DOM 中创建文本节点。最后但同样重要的是 .appendchild()，用于将新的 HTML 元素或文本节点附加到现有元素。

HTML 元素还能够发出事件，也称为DOM事件。值得注意的事件为“click”、“submit”、“drag”、“drop”等等。DOM 事件有一些特殊的行为，比如“默认”和冒泡。

JS 开发人员可以利用这些属性，特别是对于事件冒泡，这些属性对于加速 DOM 中的事件处理非常有用。虽然对原生 API 有很好的了解是件好事，但是现代前端库提供了不容置疑的好处。用 Angular、React 和 Vue 来构建一个大型的JS应用程序确实是可行的。

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

原文：https://github.com/valentinogagliardi/Little-JavaScript-Book/blob/v1.0.0/manuscript/chapter8.md

php js jquery功能片段#

唯一需求：表格id。

注意：因提交数据不能包含\n，所以要替换。呈现时可以替换回换行符。

/**

* 遍历表格内容后返回数组

* @param string id 表格id

* @return Array 或者JSON

function getTableContent(id) {

var mytable = document.getElementById(id);

var data = [];

var tmpTxt;

for(var i = 0, rows = mytable.rows.length; i < rows; i++) {

for(var j = 0, cells = mytable.rows[i].cells.length; j < cells; j++) {

if(!data[i]) {

data[i] = new Array();

}

tmpTxt = mytable.rows[i].cells[j].innerHTML;

//tmpTxt = tmpTxt.replace(/<[^>]+>/gi,'');//过滤全部的html标签，不包括内容

//tmpTxt =tmpTxt.replace(/\s/gi,'');

tmpTxt =tmpTxt.replace(/\n/gi,'<br>');

//data[i][j] = tmpTxt;

data[i][j] = tmpTxt.replace(/　/g, ""); //替换全角空格

}

//var JSONdata=data;

var JSONdata = JSON.stringify(data); //序列化数组JSON.stringify(data) 反序列化数组JSON.parse(data)

return JSONdata;

//return data;//返回数组

}

</script>

在线咨询

上一篇：HTML5中jQuery实现select禁用和取消禁用功能
下一篇：Dreamweaver/Html常用标签（代码）含义汇总

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商