【javascript系列】史上最全javascript系列教程（一）-阿里云开发者社区

【javascript系列】史上最全javascript系列教程（一）

2021-12-10 151

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【javascript系列】史上最全javascript系列教程（一）

JS到底是什么？

JS的组成

开始第一个JS脚本的编写

获取到标签元素并进行操作

document.getElementById('ID名') 返回这个id名的元素（常用，id是整个界面唯一的）

document.getElementsByTagName('标签名') 返回所有这个标签名的元素的集合

document.getElementsByClassName('class名') 返回所有这个class的元素的集合

document.querySelector("css任意选择器") 返回第⼀个

document.querySelectorAll("css任意选择器") 返回符合的所有

document.documentElement 获取HTML元素

document.body 获取body元素

JS编写的合适位置

JS的输出

浏览器窗口输出

持续更新中......

JS到底是什么？

JavaScript⼀种直译式脚本语⾔，是⼀种动态类型、弱类型、基于原型的语⾔，内置⽀持类型Javascript是当今最流⾏的脚本语⾔，我们⽣活中看到的⽹⻚和基于html5的app⾥⾯的交互逻辑都是由javascript驱动的⼀句话概括就是javascript是⼀种运⾏在浏览器中的解释型的编程语⾔

JS的组成

ECMAScript : 解释器、翻译者 (描述了该语⾔的语法和基本对象) 它是javascript的标准，就是平时说的es5，es6

DOM : Document Object Model ⽂档对象模型 W3C是DOM的标准

BOM : Browser Object Model 浏览器对象模型缺乏标准

开始第一个JS脚本的编写

实现效果，鼠标移入div背景颜色变成红色，移出变成白色

第⼀步：我们要知道⿏标移⼊事件和⿏标移出事件

⿏标移⼊事件 onmouseover

⿏标移出事件 onmouseout

第⼆步：我们要找到需要改变的div元素，我们通过id就可以找到我们要改变的div

实现效果：鼠标移入空白方块变红，移出红色变成白色。

获取到标签元素并进行操作

document.getElementById(‘ID名’) 返回这个id名的元素（常用，id是整个界面唯一的）

document.getElementsByTagName(‘标签名’) 返回所有这个标签名的元素的集合

document.getElementsByClassName(‘class名’) 返回所有这个class的元素的集合

document.querySelector(“css任意选择器”) 返回第⼀个

document.querySelectorAll(“css任意选择器”) 返回符合的所有

document.documentElement 获取HTML元素

document.body 获取body元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取标签元素</title>
    <style type="text/css">
     #tim{
        width:200px;
        height:200px;
        border: 1px solid black;
        /* 下面这一行设置居中 */
        margin: 0 auto;
    }
    </style>
</head>
<body>
    <div id="tim" class="xiaod"></div>
    <script type="text/javascript">
     //document.getElemenById('tim').style.background='red' 这里背景变成红色
     //document.getElementsByTagName('div')[0].style.background='black'  获取第一个div，背景变成黑色，因为返回的是一个集合，所以加上[0]
     //document.getElementsByClassName('xiaod')[0].style.background='yellow'  也是加上[0]背景变成黄色
     //document.querySelector("#tim").style.background='black'   css选择器，返回第一个，背景变成黑色#tim改成.xiaod也可以
     //document.querySelector("div")这样也可以，是css的选择器就可以，因为是返回第一个，所以不需要[0]
     document.querySelectorAll("div")[0].style.background='yellow'
     </script>
</body>
</html>