JavaScript基础(2)
文章目录
- 1 DOM对象(文档对象模型：Document Object Model)
- 1.1 模型图解
- 1.2 节点（node）：构成HTML最基本的单元，我们把常用节点分为4类
- （1）文档节点：指HTML文档
- （2）元素节点：指HTML中标签
- （3）属性节点：指元素的属性
- （4）文本节点：HTML中文本内容
- 2 事件
- 2.1 常用事件
- 2.2 常见问题
- 2.3 获取元素节点
- 案例
- 2.4 获取元素节点的相关节点
JavaScript对象：自定义对象、宿主对象、内建对象
内建对象: 由ES标准中定义的对象，在所有ES实现中都可以使用[Math、String、Number…]
**宿主对象：**由js环境提供的对象，如[BOM、DOM]
**自定义对象：**程序员自定义
:::
1 DOM对象(文档对象模型：Document Object Model)
1.1 模型图解
1.2 节点（node）：构成HTML最基本的单元，我们把常用节点分为4类
（1）文档节点：指HTML文档
（2）元素节点：指HTML中标签
（3）属性节点：指元素的属性
（4）文本节点：HTML中文本内容
2 事件
2.1 常用事件
2.2 常见问题
js绑定节点后发现值是null，无法进行相应的事件操作
如下：
原因: 代码执行顺序所导致的，因为js位置在页面代码之前加载，此时页面还未加载，所以找不到节点元素，无法进行其他操作
解决方案： 为window绑定一个onload事件，使得页面先加载
案例：
//windows绑定onload事件，使得js代码在页面加载完之后执行
window.onload = function (){
// 获取button对象
var buttonT = document.getElementById("btn2");
// button绑定点击事件
buttonT.onclick = function(){
// 更换button文本内容
buttonT.innerHTML = "buttonTest";
}
}
2.3 获取元素节点
需要通过document对象获取元素节点
| 方法名 | 说明 |
|---|---|
| getElementById() | 通过id获取元素节点对象 |
| getElementsByTagName() | 通过标签名获取一组，元素节点对象 |
| getElementsByName() | 通过name属性获取一组，元素节点对象 |
案例
需求：做一个图片展示页面，
条件：①有提示语:共多少张图片，此时展示第几张
②通过按钮实现图片切换，当图片到最后一张时再点击下一张跳回第一张，第一张的上一张跳回最后一张
代码：
HTML页面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM模型学习</title>
<script type="text/javascript" src="js/test2.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#outer{
width: 600px;
margin: 60px auto;
padding: 6px;
background-color: skyblue;
text-align: center;
}
img{
width: 600px;
}
</style>
</head>
<body>
<div id="outer">
<span>图片展示：共5张，第1张</span>
<img src="../JavaScript/img/1.jpg" alt="图片">
<button id="prev"> 上一张</button> <button id="next">下一张 </button>
</div>
</body>
</html>
js代码
window.onload = function(){
// 通过id获取元素对象
var pre = document.getElementById("prev");
var nex = document.getElementById("next");
// 定义数组存放图片路径
var arrayImg = ["../JavaScript/img/1.jpg","../JavaScript/img/2.jpg","../JavaScript/img/3.jpg","../JavaScript/img/4.jpg","../JavaScript/img/5.jpg"];
// 通过标签获取img元素对象
var imgTest = document.getElementsByTagName("img")[0];
var textT = document.getElementsByTagName("span")[0];
var index = 0;
nex.onclick = function(){
index ++;
if(index>4){
index = 0;
}
imgTest.src = arrayImg[index];
textT.innerHTML = "图片展示：共"+arrayImg.length+"张，第"+(index+1)+"张";
}
pre.onclick = function(){
index --;
if(index<0){
index = 4;
}
imgTest.src = arrayImg[index];
textT.innerHTML = "图片展示：共"+arrayImg.length+"张，第"+(index+1)+"张";
}
}
2.4 获取元素节点的相关节点
| 方法\属性 | 说明 |
|---|---|
| 获取子节点 | |
| getElementsByTagName() | 方法，通过标签获取节点的子节点 |
| childNodes | 属性，获取节点的所有子节点（会获取到空字符） |
| firstChild | 属性，获取节点第一个节点（会获取到空字符） |
| lastChild | 属性，获取节点最后一个节点（会获取到空字符） |
| 获取父节点和兄弟节点 | |
| parentNode | 属性，获取当前节点父节点 |
| previousSibling | 属性，当前节点的前一个兄弟元素（不包含空字符，IE8以下不支持） |
| nextSibling | 属性，当前节点的后一个兄弟节点 |