如何在HTML中使用JavaScript
元素
元素用于在HTML页面中嵌入或引入JavaScript脚本代码。该元素默认被定义在
元素中
1.type：该属性定义script元素包含或src引入的脚本语言，属性的值为HTML类型。
2.language：和type属性类似，这个属性定义脚本使用的语言。该属性不是标准规范
3.src：定义引入外部脚本的URI，这可以用来代替直接在文档中嵌入脚本。
引入方式
内嵌JavaScript代码
所谓内嵌JavaScript代码，与内嵌样式表的用法类似，就是将JavaScript代码通过元素直接编写在HTML页面的内部。
一般不建议使用HTML页面与JavaScript代码不分离的样式。
外联JavaScrript文件
所谓外联JavaScript文件，类似于外联样式表的用法，将JavaScript代码编写在独立的JavaScript文件中，再通过HTML页面的元素引入。
代码示例
如何使用JavaScript
// 浏览器窗口加载完毕之后，再执行指定代码
window.onload = function(){
// JavaScript代码编写在这
}
按钮
// JavaScript语言编写在HTML页面中 - 没有有效分离
console.log('这是一段JavaScript代码.');
引入位置
在
元素内部
元素默认是被定义在
元素的内部，但是，这种方式导致浏览器窗口加载HTML页面时先加载JavaScript代码再加载HTML元素。如果JavaScript代码中包含获取或更新HTML元素的逻辑，会导致操作失败。
window.onload = function() {
var username = document.getElementById('username');
console.log(username);
}
通过添加window.onload事件解决这个问题。
在
元素内部
元素也可以被定义在
元素中。但为额保证浏览器窗口先加载HTML元素再加载JavaScript代码逻辑，一般将元素顶你故意在元素中的最后。
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节点树结构中的以上三种节点关系完成。
