文章目录
📖博主介绍
个人主页: Zinksl
编程社区: Zinksl编程酒馆
个人格言: 想法落实的最佳时机就是现在!🏄
如果你 喜欢交流或热爱分享,欢迎加入编程社区或交流群 大家一起学习技术,交流心得,共同进步🚅
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 | 属性,当前节点的后一个兄弟节点 |
结尾彩蛋
认真分享技术,记录学习点滴若内容对你有用可以鼓励一下🍻方式如下
点赞:👍 留言:✍收藏:⭐️
如有疑问欢迎评论区留言,或加入技术交流群:1002743802
关注我订阅专栏,会持续体系化更新哦👈