文章目录
- JavaScript语言
- JavaScript介绍
- JavaScript引入
- 数据类型
- 节点
- document方法
- Element属性
- 事件
JavaScript语言
JavaScript介绍
JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”，指的是它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序的“脚本”。
JavaScript 是一种嵌入式（embedded）语言。它本身提供的核心语法不算很多
为什么学习 JavaScript：
- 操控浏览器的能力
- 广泛的使用领域
- 易学性
JavaScript与ECMAScript的关系：
ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。
变量提升：
JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）。
JavaScript引入
嵌入到HTML文件中：
<body><script>var age = 20</script>
</body>
引入本地独立JS文件：
<body><script type="text/javascript" src="./it.js"> </script>
</body>
引入网络来源文件：
<body><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"> </script>
</body>
数据类型
JavaScript 语言的每一个值，都属于某一种数据类型。JavaScript 的数据类型，共有六种。（ES6 又新增了第七种 Symbol 类型的值和第八种 BigInt类型）
原始类型：
var age = 20;
var name = "it";
var learn = true;
合成类型：
对象：因为一个对象往往是多个原始类型的值的合成，可以看作是一个存放各种值的容器
var user = {name:"it",age:20,learn:true
}
undefined和null，一般将它们看成两个特殊值。
节点
DOM 的最小组成单位叫做节点（node）。
文档的树形结构（DOM 树），就是由各种不同类型的节点组成。
每个节点可以看作是文档树的一片叶子。
节点的类型有七种：
- Document：整个文档树的顶层节点
- DocumentType：doctype标签
- Element：网页的各种HTML标签
- Attribute：网页元素的属性（比如class=“right”）
- Text：标签之间或标签包含的文本
- Comment：注释
- DocumentFragment：文档的片段
浏览器原生提供document节点，代表整个文档
document方法
document.getElementsByTagName方法搜索 HTML 标签名，返回符合条件的元素。
它的返回值是一个类似数组对象（HTMLCollection实例），可以实时反映 HTML 文档的变化。
如果没有任何匹配的元素，就返回一个空集。
var paras = document.getElementsByTagName('p');
如果传入*，就可以返回文档中所有 HTML 元素
var allElements = document.getElementsByTagName('*');
document.getElementsByClassName方法返回一个类似数组的对象（HTMLCollection实例），包括了所有class名字符合指定条件的元素，元素的变化实时反映在返回结果中
document.getElementsByName方法用于选择拥有name属性的 HTML 元素（比如<form>、<radio>、<img>等），返回一个类似数组的的对象（NodeList实例），因为name属性相同的元素可能不止一个
document.getElementById方法返回匹配指定id属性的元素节点。如果没有发现匹配的节点，则返回null
document.createElement方法用来生成元素节点，并返回该节点
document.createTextNode方法用来生成文本节点（Text实例），并返回该节点。它的参数是文本节点的内容
Element属性
Element对象对应网页的 HTML 元素。
每一个 HTML 元素，在 DOM 树上都会转化成一个Element节点对象（以下简称元素节点）
Element.id属性返回指定元素的id属性，该属性可读写
// HTML 代码为 <p id="foo">
var p = document.querySelector('p');
p.id // "foo"
className属性用来读写当前元素节点的class属性。它的值是一个字符串，每个class之间用空格分割
// HTML 代码 <div class="one two three" id="myDiv"></div>
var div = document.getElementById('myDiv');
div.className
classList对象有下列方法
add()：增加一个 class。remove()：移除一个 class。contains()：检查当前元素是否包含某个 class。toggle()：将某个 class 移入或移出当前元素。
var div = document.getElementById('myDiv');div.classList.add('myCssClass');
div.classList.add('foo', 'bar');
div.classList.remove('myCssClass');
div.classList.toggle('myCssClass'); // 如果 myCssClass 不存在就加入，否则移除
div.classList.contains('myCssClass'); // 返回 true 或者 false
Element.innerHTML属性返回一个字符串，等同于该元素包含的所有 HTML 代码。该属性可读写，常用来设置某个节点的内容。它能改写所有元素节点的内容，包括<HTML>和<body>元素
el.innerHTML = '';
Element.innerText
innerText和innerHTML类似，不同的是innerText无法识别元素，会直接渲染成字符串
事件
鼠标事件指与鼠标相关的事件，具体的事件主要有以下一些
- click：按下鼠标时触发
- dblclick：在同一个元素上双击鼠标时触发
- mousedown：按下鼠标键时触发
- mouseup：释放按下的鼠标键时触发
- mousemove：当鼠标在节点内部移动时触发。当鼠标持续移动时，该事件会连触发。
- mouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件
- mouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件
- mouseover：鼠标进入一个节点时触发，进入子节点会再一次触发这个事件
- mouseout：鼠标离开一个节点时触发，离开父节点也会触发这个事件
- wheel：滚动鼠标的滚轮时触发
键盘事件由用户击打键盘触发，主要有keydown、keypress、keyup三个事件
- keydown：按下键盘时触发。
- keypress：按下有值的键时触发，即按下 Ctrl、Alt、Shift、Meta 这样无值的键，这个事件不会触发。对于有值的键，按下时先触发keydown事件，再触发这个事件。
- keyup：松开键盘时触发该事件
username.onkeypress = function(e){console.log("keypress事件");
}
表单事件是在使用表单元素及输入框元素可以监听的一系列事件
- input事件
- select事件
- Change事件
- reset事件
- submit事件
input事件:
input事件当<input>、<select>、<textarea>的值发生变化时触发。对于复选框（<input type=checkbox>）或单选框（<input type=radio>），用户改变选项时，也会触发这个事件
input事件的一个特点，就是会连续触发，比如用户每按下一次按键，就会触发一次input事件。
var username = document.getElementById("username");
username.oninput = function(e){console.log(e.target.value);
}
select事件:
select事件当在<input>、<textarea>里面选中文本时触发
// HTML 代码如下
// <input id="test" type="text" value="Select me!" />var elem = document.getElementById('test');
elem.addEventListener('select', function (e) {console.log(e.type); // "select"
}, false);
Change事件:
Change事件当<input>、<select>、<textarea>的值发生变化时触发。它与input事件的最大不同，就是不会连续触发，只有当全部修改完成时才会触发
var email = document.getElementById("email");
email.onchange = function(e){console.log(e.target.value);
}
reset 事件/submit 事件:
这两个事件发生在表单对象<form>上，而不是发生在表单的成员上。
reset事件当表单重置（所有表单成员变回默认值）时触发。
submit事件当表单数据向服务器提交时触发。注意，submit事件的发生对象是<form>元素，而不是<button>元素，因为提交的是表单，而不是按钮
<form id="myForm" onsubmit="submitHandle"><button onclick="resetHandle">重置数据</button><button>提交</button>
</form>
var myForm = document.getElementById("myForm")
function resetHandle(){myForm.reset();
}
function submitHandle(){console.log("提交");
}
