【JavaScript】DOM（一）

最新推荐文章于 2024-08-27 15:59:21 发布

Listener-1379

最新推荐文章于 2024-08-27 15:59:21 发布

阅读量172

点赞数 2

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45965358/article/details/120096937

版权

JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

文章目录

1.DOM简介
2.事件

1.DOM简介

1.1什么是DOM

在这里插入图片描述

1.2模型

在这里插入图片描述

1.3节点

在这里插入图片描述

1.4节点的属性

在这里插入图片描述

1.5 实例

<body>
    <button id="btn">first button</button>
    <script type="text/javascript">
        var btn = document.getElementById("btn");
        btn.innerHTML = "second button";
    </script>
</body>

在这里插入图片描述

2.事件

2.1事件的引入

事件就是用户和浏览器的交互行为，比如点击按钮，拖动窗口等等。

<body>
    <button id="btn" onclick="alert('Hello JavaScript')">first button</button>
</body>

在这里插入图片描述
当然，上面的例子耦合度多高，所以我们一般使用下面的方法。首先获取一个按钮对象，然后为按钮对象的对应事件绑定一个函数。

<body>
    <button id="btn">first button</button>
    <script type="text/javascript">
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            alert("Hello JavaScript");
        }
    </script>
</body>

2.2文档的加载

我们的Js代码一般不会放置到<body></body>标签当中，加入我们将我们的Js代码放置到<head></head>中，它会先于我们的<body></body>先加载，会出现错误。比如下面是一个错误代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <script type="text/javascript">
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            alert("Hello JavaScript");
        }
    </script>
</head>
<body>
    <button id="btn">first button</button>
</body>
</html>

在这里插入图片描述
所以我么需要借助一个onload事件，该事件会在整个页面都加载完成之后才会执行。我们将该事件绑定在window对象上。这样可以确保在加载Js代码时，整个dom对象已经加载完毕。

    <script type="text/javascript">
        window.onload = function(){
            var btn = document.getElementById("btn");
            btn.onclick = function(){
                alert("Hello JavaScript");
            }
        }
    </script>

2.3获取元素节点

在这里插入图片描述

2.4图片切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo2</title>
    <style type="text/css">
        #outer {
            width: 300px;
            margin: 50px auto;
            padding: 10px;
            background-color: green;
        }
        div img {
            width: 300px;
            height: 200px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var prev = document.getElementById("pre");
            var nextv = document.getElementById("next");
            var index = 0;
            var img = document.getElementsByTagName("img")[0];
            var imgArr = ["image/img32.jpg", "image/img33.jpg", "image/img34.jpg", "image/img35.jpg"];
            prev.onclick = function(){
                if(index === 0) {
                    index = imgArr.length - 1;
                } else {
                    index--;
                }
                img.src = imgArr[index];
            }
            nextv.onclick = function(){
                if(index === imgArr.length - 1) {
                    index = 0;
                } else {
                    index++;
                }
                img.src = imgArr[index];
            }
        }
    </script>
</head>
<body>
    <div id="outer">
        <img src="image/img32.jpg" alt="图片无法显示"/>
        <button id="pre">上一张</button>
        <button id="next">下一张</button>
    </div>
</body>
</html>

请添加图片描述

2.5获取元素节点的子节点

在这里插入图片描述

(1)getElementsByTagName()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo3</title>
    <script type="text/javascript">
        window.onload = function(){
            var button = document.getElementById("myButton");
            button.onclick = function(){
                var father = document.getElementsByTagName("ul")[0];
                var son = father.getElementsByTagName("li");
                console.log(son.length);
            }
        }
    </script>
</head>
<body>
    <div class="container">
        <ul>
            <li>北京</li>
            <li>上海</li>
            <li>深圳</li>
            <li>广州</li>
        </ul>
        <ol>
            <li>苹果</li>
            <li>香蕉</li>
            <li>西瓜</li>
        </ol>
        <button id="myButton">点击我</button>
    </div>
</body>
</html>

在这里插入图片描述
(2)childNodes / children
<body></body>中的内容与上面的例子相同。

    <script type="text/javascript">
        window.onload = function(){
            var button = document.getElementById("myButton");
            button.onclick = function(){
                var father = document.getElementsByTagName("ul")[0];
                var son = father.childNodes;
                console.log(son.length);
            }
        }
    </script>

在这里插入图片描述
为什么是9呢，应为childNodes属性会获取包括文本节点在内的所有节点，包括DOM标签中的空白也会当成文本节点。

在这里插入图片描述

children则会获取当前元素的所有子节点，不会获取空白。

（3）firstChild / lastChild

firstChild 会获取当前元素的第一个子节点，包括空白（如果有的话）。

lastChild 会获取当前元素的最后一个子节点，包括空白（如果有的话）。

2.6获取父节点和兄弟节点

在这里插入图片描述

2.7 全选练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <script type="text/javascript">
        window.onload = function(){
            var selectAll = document.getElementById("selectAll");
            var hobby = document.getElementsByName("hobby");
            selectAll.onclick = function(){
                for(var i = 0; i < hobby.length; i++) {
                    hobby[i].checked = true;
                }
            }
            noSelectAll.onclick = function(){
                for(var i = 0; i < hobby.length; i++) {
                    hobby[i].checked = false;
                }
            }
            revSelect.onclick = function() {
                for(var i = 0; i < hobby.length; i++) {
                    hobby[i].checked = !hobby[i].checked;
                }
            }
        }
    </script>
</head>
<body>
    <form action="#">
        <label>
            你的爱好是？<br/>
            <input type="checkbox" name="hobby"/>篮球
            <input type="checkbox" name="hobby"/>足球
            <input type="checkbox" name="hobby"/>兵乓球
            <input type="checkbox" name="hobby"/>羽毛球
            <input type="checkbox" name="hobby"/>排球
            <br/>
            <input type="button" id="selectAll" value="全选"/>全选
            <input type="button" id="noSelectAll" value="全不选"/>全不选
            <input type="button" id="revSelect" value="反选"/>反选
            <input type="submit" value="提交"/>提交
        </label>
    </form>
</body>
</html>

在这里插入图片描述

作者：Beyong　　　　
出处：Beyong博客
github地址：https://github.com/beyong2019

本博客中未标明转载的文章归作者Beyong有，欢迎转载，但未经作者同意必须保留此段声明，且在文章明显位置给出原文连接，否则保留追究法律责任的权利。

Listener-1379

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
【JavaScript】DOM（一）

文章目录1.DOM简介1.1什么是DOM1.2模型1.3节点1.4节点的属性1.5 实例2.事件2.1事件的引入2.2文档的加载1.DOM简介1.1什么是DOM1.2模型1.3节点1.4节点的属性1.5 实例<body> <button id="btn">first button</button> <script type="text/javascript"> var btn = document.getE
复制链接

扫一扫

专栏目录