这是我参与「第五届青训营」伴学笔记创作活动的第 6 天

0 前面的话

今天就写点JavaScript的知识吧！知识点内容可能比较散，仅记录一下而已。这里的学习参考了部分菜鸟教程内容，如有需要，链接： www.runoob.com/js/js-class…

1 正文

JavaScript的getter 和 setter

getter 是一种获得属性值的方法，setter是一种设置属性值的方法
getter负责查询值，它不带任何参数，setter则负责设置键值，值是以参数的形式传递，在他的函数体中，一切的return都是无效的
get/set访问器不是对象的属性，而是属性的特性，特性只有内部才用，因此在javaScript中不能直接访问他们，为了表示特性是内部值用两队中括号括起来表示如[[Value]]
即使 getter 是一个方法，当想获取属性值时也不要使用括号。
getter/setter 方法的名称不能与属性的名称相同，在本例中属名为 sitename。
很多开发者在属性名称前使用下划线字符 _ 将 getter/setter 与实际属性分开：
以下实例使用下划线 _ 来设置属性，并创建对应的 getter/setter 方法：

class Runoob { 
    constructor(name) { 
        this._sitename = name; 
    } 
    get sitename() {
        return this._sitename; 
    } 
    set sitename(x) { 
        this._sitename = x; 
    } 
} 
let noob = new Runoob("菜鸟教程"); 
document.getElementById("demo").innerHTML = noob.sitename;

要使用 setter，请使用与设置属性值时相同的语法，虽然 set 是一个方法，但需要不带括号：

class Runoob { 
    constructor(name) { 
        this._sitename = name; 
    } 
    set sitename(x) { 
        this._sitename = x; 
    } 
    get sitename() { 
        return this._sitename; 
    } 
} 
let noob = new Runoob("菜鸟教程"); 
noob.sitename = "RUNOOB"; 
document.getElementById("demo").innerHTML = noob.sitename;

函数声明和类声明之间的一个重要区别在于, 函数声明会提升，类声明不会。也就是说，必须先声明类，然后再使用。

HTML DOM

DOM 文档对象模型（Document Object Model）

插一嘴，选择器的优先级依次是：内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器

改变 HTML 内容

<p id="p1">Hello World!</p>
// document.getElementById(id).innerHTML = 新的 HTML
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>

<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");  
element.innerHTML="新标题";
</script>

<img id="image" src="smiley.gif">
// document.getElementById(id).attribute = 新属性值
<script>
document.getElementById("image").src="landscape.jpg";
</script>

改变 HTML 属性

// document.getElementById(id).attribute = 新属性值
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>

改变 HTML 样式

<p id="p2">Hello World!</p>
<script> 
document.getElementById("p2").style.color="blue"; 
document.getElementById("p2").style.fontFamily="Arial"; 
document.getElementById("p2").style.fontSize="larger"; 
</script>

onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

<body onload="checkCookies()">

字节青训营前端青训营笔记「6」 | 青训营笔记