这篇博客介绍了JavaScript的基础知识，包括API与WebApis的概念，DOM的定义、DOM树及获取元素的方法，如通过ID和标签获取。还详细讲解了事件基础，如事件三要素和常见鼠标事件。此外，讨论了DOM中的元素操作、节点操作，以及BOM的窗口对象事件，如页面加载和窗口大小调整。最后，阐述了定时器的使用，如setTimeout和setInterval。
目录
1.APl与WebApis
1.1APl
APl ( Application Programming Interface）,应用程序编程接口)是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
简单理解︰API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。
比如手机充电的接口︰ 
要实现充电这个功能︰ 我们不关心手机内部变压器；内部怎 么存储电等 ；我们不关心这个充电线怎么制作的；我们只需要知道，我们拿着充电线插进充电接口就可以充电 这个充电接口就是一个API
1.2WebApis
Web API是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)。
Web API主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。
Web API一般都有输入和输出（函数的传参和返回值)，WebAPI很多都是方法（函数)
比如我们想要浏览器弹出一个警示框，直接使用alert(‘弹出’) 。
2.DOM
2.1什么是DOM
文档对象模型( Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标记语言（HTML或者XML)的标准编程接口。
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。
2.2DOM树
文档:一个页面就是一个文档，DOM中使用document表示
元素:页面中的所有标签都是元素，DOM中使用element表示
节点∶网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示
DOM把以上内容都看做是对象
2.3获取元素
2.3.1根据ID获取
使用getElementByld()方法可以获取带有ID的元素对象。
<body>
<div id="time">2022-11-11</div>
<script>
// 1．因为我们文档页面从上往下加载，所以先得有标签所以我们script写到标签的下面
// 2. get 获得element元素by 通过驼峰命名法
// 3．参数id是大小写敏感的字符串
// 4.返回的是一个元素对象
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
// 5. console.dir打印我们返回的元素对象更好的查看里面的属性和方法
console.dir(timer);
</script>
</body>2.3.2根据标签获取
使用getElementsByTagName)方法可以返回带有指定标签名的对象的集合。
document.getElementsByTagName ('标签名');
注意∶
1.因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
2.得到元素对象是动态的
<body>
<ul>
<li>君不见黄河之水天上来</li>
<li>君不见黄河之水天上来</li>
<li>君不见黄河之水天上来</li>
<li>君不见黄河之水天上来</li>
<li>君不见黄河之水天上来</li>
</ul>
<script>
//1.getElementsByTagName()返回的是获取过来元素对象的集合以伪数组的形式存储的
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
//2.依次打印
for (let i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
//3．如果页面中只有一个li返回的还是伪数组的形式
//4．如果页面中没有li 返回的是一个空的伪数组
</script>
</body>还可以获取某个元素(父元素)内部所有指定标签名的子元素.
element.getElementsByTagName ( '标签名') ;
注意∶父元素必须是单个对象(必须指明是哪一个元素对象).获取的时候不包括父元素自己。
<ul>
<li>君不见黄河之水天上来</li>
<li>君不见黄河之水天上来</li>
<li>君不见黄河之水天上来</li>
<li>君不见黄河之水天上来</li>
<li>君不见黄河之水天上来</li>
</ul>
<ol>
<li>奔流到海不复回</li>
<li>奔流到海不复回</li>
<li>奔流到海不复回</li>
<li>奔流到海不复回</li>
<li>奔流到海不复回</li>
</ol>
<ol>
<li>不复回</li>
<li>不复回</li>
<li>不复回</li>
<li>不复回</li>
<li>不复回</li>
</ol>
<script>
//getElementsByTagName(标签名)
var ol = document.getElementsByTagName('ol');
console.log(ol[0].getElementsByTagName('li'));
console.log(ol[1].getElementsByTagName('li'));
</script>2.3.3根据H5新增方法获取
<body>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
//1.document.getElementsByClassName() 根据类名返回元素对象集合
var boxs = document.getElementsByClassName('box');
console.log(boxs);
//2. document.querySelector()根据指定选择器返回第一个元素对象
var firstBox = document.querySelector('.box');
console.log(firstBox);
var nav = document.querySelector('#nav');
console.log(nav);
var li = document.querySelector('li');//首页
console.log(li);
//3.document.querySelectorAll();返回指定选择器的所有元素对象集合
var all = document.querySelectorAll('.box');
console.log(all);
var lis = document.querySelectorAll('li');
console.log(lis);
</script>
</body>2.3.4获取特殊元素
<script>
//1.获取body元素 document.body
var Body = document.body;
console.log(Body);
console.dir(Body);
//2.获取html元素 document.documentElement
var Html = document.documentElement;
console.log(Html);
console.dir(Html);
</script>2.4事件基础
2.4.1事件概述
JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。
简单理解︰触发---响应机制。
网页中的每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。
2.4.2事件三要素
事件是有三部分组成 事件源 事件类型 事件处理程序
(1）事件源 事件被触发的对象 谁，按钮
(2) 事件类型如何触发，什么事件 比如鼠标点击(onclick) 鼠标经过 键盘按下
(3）事件处理程序通过一个函数赋值的方式完成
2.4.3执行事件的步骤
1.获取事件源
2 注册事件（绑定事件)
3.添加事件处理程序(采取函数赋值形式)
<body>
<button id="btn">喜羊羊</button>
<script>
//点击一个按钮，弹出对话框
//事件三要素
// 1．事件是有三部分组成 事件源 事件类型 事件处理程序
//(1）事件源事件被触发的对象谁按钮
var btn = document.getElementById('btn');
//(2)事件类型如何触发什么事件比如鼠标点击(onclick) 鼠标经过 键盘按下
//(3）事件处理程序通过一个函数赋值的方式完成
btn.onclick = function(){
alert('灰太狼');
}
</script>
</body>
2.4.4常见鼠标事件
2.5操作元素
2.5.1改变元素内容
1.element.innerText
从起始位置到终止位置的内容,但它不识别html标签（非标准），同时空格和换行也会去掉
2.element.innerHTML
起始位置到终止位置的全部内容，包括html标签（W3C标准），同时保留空格和换行
二者皆是可读写的
<body>
<button>显示当前系统时间</button>
<div>显示时间</div>
<span></span>
<script>
//当我们点击按钮 div里面的文字会发生变化
//1.获取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
//2.注册事件
btn.onclick = function () {
div.innerText = getDate();
}
function getDate() {
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth();
var dates=date.getDate();
var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var day=date.getDay();
return '今天是'+year+'年'+month+'月'+dates+'日'+arr[day];
}
//不添加注册事件
var p = document.querySelector('p');
p.innerText = getDate();
//可识别HTML标签
var span = document.querySelector('span');
span.innerHTML = '<strong>我要加粗</strong> 2022'
</script>
</body>2.5.2修改元素属性
<body>
<button id="xh">小黑</button>
<button id="xb">小白</button>
<img src="https://www.2008php.com/2015_Website_appreciate/2015-10-22/20151022000609YvpJRYvpJR.jpg" alt="">
<script>
//修改元素属性
//1.获取元素
var xh = document.getElementById('xh');
var xb = document.getElementById('xb');
var img = document.querySelector('img');
//2.注册事件 处理程序
xb.onclick = function(){
img.src = 'https://ts1.cn.mm.bing.net/th/id/R-C.aed85ce23420f63238a2c20a9ff639fc?rik=6zupIfYUQ%2fswrg&riu=http%3a%2f%2fwww.netbian.com%2fd%2ffile%2f20120226%2f630aa6d748d1a0c40dd825df9868fdf0.jpg&ehk=RoJ6MeELeVE%2b62NN52psmVY7XuXClRmuZ2XqVBLfGRw%3d&risl=&pid=ImgRaw&r=0'
img.title="我是小白";
}
xh.onclick = function(){
img.src = 'https://www.2008php.com/2015_Website_appreciate/2015-10-22/20151022000609YvpJRYvpJR.jpg'
img.title="我是小黑";
}
</script>
</body>案例 不同时间段显示不同内容
<body>
<img src="https://tu.cnnuu
最低0.47元/天 解锁文章
扫一扫
2989
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
