好家伙,这波是工作室培训
1.javascript简介
JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
如何在页面中使用JavaScript?
通过<script>标签来放入JavaScript
外部JS文件可以通过<link>标签引入,如果位于同一文件夹内,则可以使用<script>标签的src属性进行引入
在页面的body和head中写JS,有什么区别呢?
由于浏览器是按照从上到下的顺序执行代码的,因此当你要在head中写JS时,需要用window.onload进行承载,onload表示在页面加载完毕后,再执行onload所承载的JS代码
在body中,虽然不用写window.onload,但最好写在HTML代码的下面,也就是整个页面的最底部。
2.JavaScript 关键字
var
var关键字告诉浏览器创建一个新的变量
var x = 2;
除var以外,定义变量的关键字有let,定义常量的关键字有const,但此次培训我们就不讲这两个关键字,之后的深入学习就会学到
3.DOM操作
我们可以将整个网页视为一个文档,因此当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model),简称DOM,
在加载过程中,浏览器会创建一个DOM树,JavaScript可以操作这个DOM树上的任何东西
(杨武的生动比喻:在树上摘我想要的苹果)
如何找到HTML元素?
上面也说过可以将网页视为文档,因此浏览器提供了一个document对象来进行操作
4.查找 HTML 元素
4.1.通过 id 找到 HTML 元素
-document.getElementById(‘id’);
4.2.通过标签名找到 HTML 元素
-document.getElementsByTagName(‘标签名’),
TagName返回的是一个类数组(集合),因此在使用某个标签时,需要在后面加上中括号[ ]
4.3.通过类名找到 HTML 元素
-document.getElementsByClassName("类名");
getElementsByClassName() 方法返回文档中所有指定类名的元素集合,作为 NodeList 对象。
5.改变 HTML 内容
修改 HTML 内容的最简单的方法是使用 innerHTML 属性。
-document.getElementById(id).innerHTML=(新的 HTML
6.DOM CSS
如何通过DOM修改CSS?
-document.getElementById(id).style.property=新样式
-document.getElementById('id1').style.color='red'
That's all