JavaScript 事件，Dom查询，图片切换和全选反选例子

最新推荐文章于 2020-10-08 09:18:19 发布

吃不胖的猫o(=^ェ^=)m

最新推荐文章于 2020-10-08 09:18:19 发布

阅读量159

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Yueqin0512/article/details/108750106

版权

本文介绍了JavaScript如何通过DOM来操作HTML文档，包括节点的概念，如文档节点、元素节点、属性节点和文本节点。详细讲解了事件处理，如按钮点击事件，并探讨了DOM查询方法，如通过ID、标签名、属性获取元素。此外，还涉及了图片切换和全选、反选的功能实现，以及在全选全不选操作中可能遇到的bug处理技巧。

摘要由CSDN通过智能技术生成

DOM（Document Object Model）

JS通过DOM来对HTML文档进行操作

文档：整个HTML网页文档
对象：讲网页中的每一个部分都转化为一个对象
模型：使用模型来表示对象之间的关系，方便获取对象

节点：Node——构成HTML文档最基本的单元

文档节点：整个HTML文档
元素节点：HTML文档中HTML标签
属性节点：元素的属性
文本节点：HTML标签中的文本内容

事件：用户和浏览器之间的交互行为

在这里插入图片描述
例如：按钮点击事件

<script>
   //事件，用户和浏览器之间额交互行为
    //可以为按钮的对应事件绑定处理函数的形式来响应事件
    //绑定一个单击事件
    function dianji(){
   
        document.getElementById("btn").innerHTML = "猪头";
    }
</script>
<body>
    <button id="btn" onclick="dianji()">我是一个按钮</button>
</body>

Dom查询

通过document对象调用

getElementById()通过id属性获取一个元素节点的对象
grtElementsByTagName()通过标签名获取一组元素节点的现象
可以通过for循环遍历
getElementsByName()通过属性获取一组元素节点的对象

获取元素节点的子节点：通过具体的元素节点调用
4. getElementsByTagName()方法，返回当前节点的指定标签名后代节点
5. childNodes属性，表示当前节点的所有子节点、
6. firstChild属性，表示当前节点的第一个子节点
7. lastChild属性，表示当前节点的最后一个子节点
获取父节点和兄弟节点，通过具体的节点调用
8. parentNode，属性，获取当前节点的父节点
9. previousSibling，属性，表示当前节点的前一个兄弟节点
10.nextSibling，属性，表示当前节点的后一个兄弟节点
11. getElementsByClassName，根据calss属性值获取一组元素节点（不支持ie8以下浏览器）

图片切换练习

    <style>
        #outer{
   
            width: 980px;
            margin: 50px auto;
            padding: 10px;
            background-color: khaki;
            text-align: center;
        }
    </style>
    <script>
        // 创建一个数组保存图片的路径
        var imgArr = ["img/1.png", "img/3.png", "img/4.jpg", "img/5.png"]
        var index = 0;

        function prev(){
   
            ///切换到上一张，索引自减
            index--;
            if(index == 0){
   
                index = 3;