DOM 介绍

DOM（Document Object Model，文档对象模型）是一种以树形结构表示 HTML 或 XML 文档的方式。通过 DOM，开发者可以使用 JavaScript 来操作文档的内容、样式和结构。

JS 的三个部分

ECMAScript：JS 的基本语法，包含基本语法和数据类型。
DOM：Document Object Model，文档对象模型，一套操作页面元素的 API 。
BOM：Browser Object Model，浏览器对象模型，一套操作浏览器功能的 API 。

文档对象模型

文档(document)：一个页面就是一个文档。
元素(element)：html 页面中的每个标签都是一个元素，每个元素都可以看成一个对象，html 为根元素。
节点(node)：页面的所有的内容都是节点，标签、属性、文本都是节点。
树状图(DOM 树)：文档及文档中所有的元素组成的一个树形结构图。

JS 的写法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>JS 的写法</title>
</head>
<body>
	<!-- 点击按钮，出现弹框 -->
	<!-- 这种写法不好，因为 js 代码混入到了 html 代码中 -->
	<input type="button" value="弹框" onclick="alert('哈哈，我又变帅了')">
 
	<!-- 这种方法虽然将点击触发的事件放在函数里了，但是仍然没有做到 html 代码和 js 完全分离 -->
	<input type="button" value="弹框" onclick="f1()">
	<script>
		function f1(){
			alert("我是弹出的内容");
		}
	</script>
   
	<!-- 最好将 js 代码单独写道 script 标签中，做到两者分离 -->
	<script type="text/javascript">
		console.log("在这里写 JS 代码");
	</script>
	
	<!-- 或者引入外部 JS 文件 -->
	<script src="bjbcode.js"></script>
</body>

Bjb Code

DOM 介绍

JS 的三个部分

文档对象模型

JS 的写法