DOM & BOM – 大杂烩

Document.scrollingElement

参考:

why to use 'html, body' for scrollTop instead of just 'html'

MDN

使用document.scrollingElement控制窗体滚动高度

有时候 body scrollTop 和 html scrollTop 傻傻分不清楚的时候可以用这个.

(document.scrollingElement ?? document.documentElement).scrollTop

Mobile scroll hide address bar & scroll event

手机 scroll 的时候会自动把 address bar 隐藏起来. 但有一个前提条件.

那就是需要用 body / document scroll

如果套了一层 container, 并让 container 负责 scroll, 那么这个 address bar 就不会隐藏了.

如果设置 html or body scroll 的效果和没有设置其实是一样的. address bar 依然会隐藏

顺便说一下 scroll event

document.addEventListener("scroll", (e) => {
  console.log("document", e.target);
});
document.documentElement.addEventListener("scroll", (e) => {
  console.log("documentElement", e.target);
});
document.body.addEventListener("scroll", (e) => {
  console.log("body", e.target);
});
console.log(document.scrollingElement === document.documentElement); // true

如果 .container 负责 scroll, 那么没有 scroll event 会触发. 只有 .container 元素监听 scroll 才会触发.

如果 body 设置或没有设置 scroll, 那么在 chrome 游览器, document 触发 scroll event.

同时 scrollingElement 是 document.documentElemenet

获取 transform translate

参考: Stack Overflow – How to get value translateX by javascript

CSS Style

transform: translateX(-10%) translateY(-55px);

JavaScript

export function getTranslate(element: Element): { translateX: number; translateY: number } {
  const currentTransform = window.getComputedStyle(element).transform;
  const matrix = new WebKitCSSMatrix(currentTransform);
  return {
    translateX: matrix.m41,
    translateY: matrix.m42,
  };
}

先通过 computedStyle 拿到 matrix, 然后用 CSSMatrix parse. m41, m42 分别是 translateX, Y.  还有其它属性比如 translateZ, scale, rotate 等.

value 是计算后的 number.

注意: 如果使用了 CSS variables 就拿不到了. 结果总是返回 zero.

--translate-x: calc(var(--spacing-4) * -1);
--translate-y: calc(var(--spacing-4) * -1);
transform: translateX(var(--translate-x)) translateY(var(--translate-y));

通常, 如果想用 JS 控制 transform. 用 CSS Variables 是不错的方式. 参考: How to Use CSS Variables for Animation

还有一个比较 modern 的方法是不要使用 transform, 而是直接写 scale, translate, rotate 等 CSS 属性 (但目前支持度还比较低)

keyCode 废弃, 请用 key

已经废弃很多年了, 之前 Angular 为了支持 IE 很多地方还是用 keyCode, 害得我老是混乱...

MDN – KeyboardEvent.keyCode Deprecated

MDN – KeyboardEvent.keyCode

除了 IE 其它都支持.

Attribute 和 Property 的区别

参考: Stack Overflow – What is the difference between properties and attributes in HTML?

attribute 是声明在 element 上的. 游览器创建 element 对象后会把 attribute 的值过户到 property 里面.

它不总是一一对应的, 而且中间还可能会做点手脚, 比如 input type="abc" 最终 property type 会是 text. 因为 abc 不是合法的 type.

另外它们不总是同步的. 比如 input.id = 'new', 那么 attribute 也会变成 new. 但是 input.value = 'new', attribute 并不会变成 new.

所以要小心使用. 通常我们只用到 property. attribute 比较少会用到的.

Attribute value

三个点

1. value 只能是 string (e.g. '0', 'true' 都是 string)

<div class="target" abc="0" def="true"></div>
console.log(target.getAttribute("abc") === "0"); // true
console.log(target.getAttribute("def") === "true"); // true

2. 没有写等于, 表示 = empty string, 下面是等价的

<div class="target" abc></div>
<div class="target" abc=""></div>

3. 自定义的 attribute 不会映射到 property

console.log((target as any).abc); // undefined

4.没有 attribute 的情况下 element.getAttribute('abc') 返回 null.

Dataset

当我们想把资料记入到 element 上时就可以使用 dataset.

它和 custom attribute 差不多玩法, 只是 prefix 统一 data- 这样就不容易撞, 然后游览器会帮忙影射到 property dataset 里头

<div class="target" data-my-abc="0"></div>
console.log(target.hasAttribute("data-my-abc")); // true
console.log(target.getAttribute("data-my-abc") === "0"); // true
console.log(target.dataset.myAbc === "0"); // true

四点

1. 和 attribute 一样 value 只能是 string

2. dataset.myAbc 用的是 camelCase. 所以它是从 kebab-case 转成 camelCase 哦.

3. dataset.myAbc 如果没有 attribute 的话, 会返回 undefined (和 getAttribute 不同哦, 后者是返回 null)

4. set property dataset.myAbc = 'new value' 会同步到 attrbute 哦.

tabindex

div by default 是不可以被 focus 的.

button by default 就可以被 focus

要想 focus div, 我们可以写 tabindex = -1

这个表示可以 focus 但是不可以 tab

如果要可以 tab 那么是 tabindex = 0

tabindex 的号码可以用来表示 focusable 和 tabable

还有顺序功能. 游览器会从 1 开始 tab to next 然后越来越大, 数字重复就用 parent -> child -> sibling 的顺序 (所以对于一个区块只要分配一个值就可以了) . 最后才去 tabindex 0.

所以修改后的顺序就是

1,1,2,2,2,2,3,4,5,0,0,0.... 这种

display none 和 visibility: hidden 是不可以 focus 的. 然后和 element 被 remove 一样 focus 也是会跳去 body

当从 a element focus to b element 的时候, a 的 blur 会触发, 而这个时候 document.activeElement 是 body 哦.

document.click() 这种模拟 click 的话, 是不会 focus 的哦, 可以再调用 .focus() 就可以了

HTML 常用 encode

online convert tool: HTML Encode Online

  用来实现 multiple space.


 new line 参考: Stack Overflow – Insert line break inside placeholder attribute of a textarea?

" double quote "