如何在HTML中使用JavaScript
<script>元素
<script>元素用于在HTML页面中嵌入或引入JavaScript脚本代码。该元素默认被定义在<head>元素中
1.type：该属性定义script元素包含或src引入的脚本语言，属性的值为HTML类型。
2.language：和type属性类似，这个属性定义脚本使用的语言。该属性不是标准规范
3.src：定义引入外部脚本的URI，这可以用来代替直接在文档中嵌入脚本。
引入方式
内嵌JavaScript代码
所谓内嵌JavaScript代码，与内嵌样式表的用法类似，就是将JavaScript代码通过<script>元素直接编写在HTML页面的内部。
一般不建议使用HTML页面与JavaScript代码不分离的样式。
外联JavaScrript文件
所谓外联JavaScript文件，类似于外联样式表的用法，将JavaScript代码编写在独立的JavaScript文件中，再通过HTML页面的<script>元素引入。
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>如何使用JavaScript</title>
<!--
<script></script>元素
* 作用 - 引入/嵌入脚本语言
* 属性
* type="text/javascript" - (新)表示当前使用的是JavaScript语言
* language="JavaScript" - (旧)表示当前使用的是JavaScript语言
* src属性 - 指定JavaScript文件的路径
* 注意 - HTML5允许不指定任何属性(什么语言)
-->
<script src="01.js" type="text/javascript" language="JavaScript">
// 浏览器窗口加载完毕之后，再执行指定代码
window.onload = function(){
// JavaScript代码编写在这
}
</script>
</head>
<body>
<button id="btn">按钮</button>
<!-- 将JavaScript代码编写在对应HTML元素的后面 -->
<script>
// JavaScript语言编写在HTML页面中 - 没有有效分离
console.log('这是一段JavaScript代码.');
</script>
<!--
浏览器内置集成了引擎/解释器
* HTML/CSS引擎/解释器
* JavaScript引擎/解释器
建议：
* <script></script>元素尽量少出现
* <script></script>元素编写在一起
-->
</body>
</html>引入位置
在<head>元素内部
<script>元素默认是被定义在<head>元素的内部，但是，这种方式导致浏览器窗口加载HTML页面时先加载JavaScript代码再加载HTML元素。如果JavaScript代码中包含获取或更新HTML元素的逻辑，会导致操作失败。
<head>
<script>
window.onload = function() {
var username = document.getElementById('username');
console.log(username);
}
</script>
</head>
<body>
<input type="text" id="username" value="输入你的用户名">
</body> 通过添加window.onload事件解决这个问题。
在<body>元素内部
<script>元素也可以被定义在<body>元素中。但为额保证浏览器窗口先加载HTML元素再加载JavaScript代码逻辑，一般将<script>元素顶你故意在<body>元素中的最后。
DOM是什么
DOM是什么
DOM是个缩写，全称是DocumentObjectModel，被释为文档对象模型。
1.D表示Document，就是DOM将HTML页面解析为一个文档。同时提供了document对象
2.O表示Object，就是DOM将HTML页面中每一个元素解析为一个对象。
3.M表示Modle，就是DOM中表示各个对象之间的关系。
DOM的标准
由于DOM的标准规范是由W3C组织起草并定义的，所以W3C对DOM的定义时目前最权威的解释。
DOM是一个独立于任何语言和平台的接口，允许任何语言或脚本动态地访问和更新HTML文档的内容、结构和样式。该HTML页面可以进一步处理，并且该处理的结果可以被合并到所呈现的HTML页面中。
DOM的作用
DOM被设计用于解析HTML页面文档，方便JavaScript语言通过DOM访问和操作HTML页面中的内容。
DOM是由W3C组织定义标准规范，并且由各大浏览器厂商支持。严格意义上讲，DOM并非属于JavaScript语言。
我们之前所以可以在JavaScript语言中使用DOM，是因为各大浏览器将DOM的标准规范内容封装成了JavaScript语言所支持的形式。
对DOM中的对此昂，我们只有调用的权限，没有修改的权限，也说明了这个问题。
浏览器加载并运行HTML页面后，会创建DOM结构。由于DOM中的内容被封装了JavaScript语言中的对象，所以我们可以使用JavaScript语言通过DOM结构来访问和操作哦HTML页面中的内容。
DOM树结构
DOM树结构
DOM可以访问和更新HTML页面中的内容、结构和样式，式因为DOM将HTML页面解析为一个数结构。
树结构之间的关系无非就是跟选择器的父级关系非常相似
分为三个层级关系：
祖先和后代的关系
父级与子级的关系
兄弟之间的关系（必须具有相同父级）
示例图；
节点是什么
节点（Node）原本是网络术语，表示网络中的连接点。一个网络是由一些节点构成的集合。
在DOM树结构中，节点也是很重要额一个概念。简单来说，节点作为DOM树结构中的连接点，最终构成了完整的DOM树结构。
节点之间的关系
DOM中的M标识Model（模型），也可以用来表示DOM节点树结构中节点之间的关系。
在DOM节点树结构中，主要具有以下三层关系：
1.父级与子级：如果将HTML页面中某一个袁旭作为父级的话，那包含在该元素内的第一层所有元素都可以成为该元素的子级。
2.祖先与后代：如果将HTML页面中的某一个元素作为祖先的话，那包含在该元素内的所有元素（除子级之外的）都可以成为该元素的后代。
3.兄弟关系：具有相同父级元素的两个或几个元素之间就是兄弟关系。
DOM访问和更新HTML页面中的内容，主要依靠DOM节点树结构中的以上三种节点关系完成。
扫一扫
796
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
