2021-04-14js中的DOM查询+图片切换案例

最新推荐文章于 2023-04-01 21:30:19 发布

到处是知识盲区~

最新推荐文章于 2023-04-01 21:30:19 发布

阅读量216

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_55679349/article/details/115701649

版权

4.14.2021
DOM简介：
文档节点：整个HTML文档
元素节点：html文档中的html标签
属性节点：元素的属性
文本节点：html标签中的文本内容
在这里插入图片描述

1. 事件：就是浏览器和用户之间的交互行为，比如点击按钮，鼠标移动，关闭窗口……
在这里插入图片描述

2. dom查询
获取元素节点：1）getElementById（）通过id属性获取一个元素节点对象
2）getElementsByTagName（）通过标签名获取一组元素节点对象
3）getElementsByName（）通过name属性获取一组元素节点对象
在这里插入图片描述

innerHTML用于获取元素内部的html代码块的
对于自结束没有作用如：若需要读取元素节点属性：直接使用元素.属性名
注意：class不能采用这种方式，读取class需要用className
在这里插入图片描述

图片切换案例：

在这里插入图片描述

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    #box{
        width: 500px;
        padding: 10px;
        background-color: #0925ff;
        margin: 0 auto;
        text-align: center;
    }
    img{
        width: 500px;
        height: 500px;
    }
</style>
<body>
<div id="box">
    <p id="info"></p>
    <img src="img/1.jpg" alt=""/>
    <button id="prev">上一张</button>
    <button id="next">下一张</button>
</div>
<script>
    var next = document.getElementById("next");
    var prev = document.getElementById("prev");
    var img = document.getElementsByTagName("img")[0];
    var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"];
    var index=2;
    var info = document.getElementById("info");
    info.innerHTML="一共有"+imgArr.length+"张图片，这是"+"第"+(index+1)+"张图片";
    next.onclick = function (){
        index++;
        if(index>imgArr.length-1){
            index = 0;
        }
        img.src = imgArr[index];
        info.innerHTML="一共有"+imgArr.length+"张图片，这是"+"第"+(index+1)+"张图片";
    }
    prev.onclick = function (){
        index--;
        if(index<0){
            index = 3;
        }
        img.src = imgArr[index];
        info.innerHTML="一共有"+imgArr.length+"张图片，这是"+"第"+(index+1)+"张图片";
    }
</script>
</body>
</html>

获取元素节点的子节点：
通过具体的元素节点调用getElementByTagName( )方法，返回当前节点的指定标签名后代节点
1） childNodes属性，表示当前节点的所有子节点
2） firstChild 属性，表示当前节点的第一个子节点
3） lastChild 属性，表示当前节点的最后一个子节点

获取父节点和兄弟节点：
1） parentNode，表示当前节点的父节点
2） previousSibling，表示当前节点的前一个兄弟节点
3） nextSibling，表示当前节点的后一个兄弟节点
定义一个函数，专门用来为指定的元素绑定单击响应函数
参数：idStr要绑定单击响应函数的对象的id属性值
fun事件的回调函数，当单击元素时，该函数会被触发
innerText该属性可以获取到元素内部的文本内容，和innerHTML类似，不同的是它会自动将html标签去除

到处是知识盲区~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
2021-04-14js中的DOM查询+图片切换案例

4.14.2021DOM简介：文档节点：整个HTML文档元素节点：html文档中的html标签属性节点：元素的属性文本节点：html标签中的文本内容1. 事件：就是浏览器和用户之间的交互行为，比如点击按钮，鼠标移动，关闭窗口……2. dom查询获取元素节点：1）getElementById（）通过id属性获取一个元素节点对象2）getElementsByTagName（）通过标签名获取一组元素节点对象3）getElementsByName（）通过name属性获取一组元素节点对象
复制链接

扫一扫