HTMLElement.hidden; CSS Attr Selectors的用处; DOM的className方法; ::before和::after伪元素

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidden

https://codepen.io/pen/

<element hidden>

hidden是一个全局属性。boolean。

浏览器不会显示属性是hidden的元素。

注意：在XHTML, hidden属性需要这么写： <element hidden="hidden">

---

https://developer.mozilla.org/en-US/docs/Web/API/Document/hidden

var boolean = document.hidden

一个只读的特性，暗示一个网页是否隐藏。简单理解：当前网页窗口都不是隐藏的。

---

代码：要在可维护，速度块，可以改变逻辑之间找到平衡。

---

CSS Attr Selectors的一种用处：javascript中的定位。

data-*可以自定义attributes。

DOM使用document.querySelector()可以查询有这个selector的元素。

因此CSS属性选择器，搭配data-*和DOM的查找方法就可以定位一个元素。

例子：

chatroom_id = document.querySelector("div[data-chatroom-id]").getAttribute("data-chatroom-id")

a[attribute] { ... }

也可以通过具体的属性值，查找到具体某元素：

a[attribute='值'] { ... }

还有模糊查找～=，开头关键字^=，结尾关键字$=，任意关键字*=等查询方式

---

DOM 的 className方法

document.getElementById("myDIV").className = "mystyle"

注意：⚠️ "类名"不加点"."

---

::before和::after选择器，伪类／元素：

在选中的元素的文本前插入一些东东。

使用content: "..." 来指定插入的内容

例子：

.strike > span:before,  .strike > span:after {

　　content: "";
　　position: absolute;
　　top: 50%;
　　width: 9999px;
　　height: 1px;
}

在有strike类的元素内的span元素的内容前后插入一条线，高是1px;

全部代码：插入一条红线，中间写文字：

.strike {
display: block;
text-align: center;
overflow: hidden;
white-space: nowrap;
}

.strike > span {
position: relative;
display: inline-block;
}

.strike > span:before,
.strike > span:after {
　　content: "";
　　position: absolute;
　　top: 50%;
　　width: 9999px;
　　height: 1px;
　　background: red;
}

.strike > span:before {
　　right: 100%;
　　margin-right: 15px;
}

.strike > span:after {
　　left: 100%;
　　margin-left: 15px;
}

---

使用反斜杠，\' ，这样代表'本身也是一个字符。

例子：

document.querySelector("div[data-chatroom-id=\'#{data.chatroom_id}\']")

解释：

data.chatroom_id是一个变量，因此用ruby语法#{},

HTML DOM的类选择器，需要使用querySelector("任意类")的格式。

而，属性选择器的格式是： div[attr="value"]的格式，

一起使用就造成了3层""嵌套，所以必须使用\反斜杠，后面跟'引号：证明这是一个必须输出的字符符号。

---