WebApi编程（一）-DOM

最新推荐文章于 2024-03-27 08:30:14 发布

原创最新推荐文章于 2024-03-27 08:30:14 发布 · 185 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

js 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了JavaScript的基本DOM操作，包括通过ID、标签、类名获取元素，以及事件基础和事件处理程序。同时展示了如何改变元素内容、属性、样式，以及操作元素样式的多种方法。此外，还提供了文本框聚焦和失焦时的文本显示与恢复的实例，帮助读者深入理解JavaScript在页面交互中的应用。

1.js组成
基本语法掌握后，我们要学习DOM和BOM,页面交互功能在这里插入图片描述
API: 就是一个接口，一些预定义的函数。
2.DOM（文档对象模型）
文档：一个页面就是一个文档，document
元素：网页中的标签都是元素，element
节点：网页中的内容就是节点，node
①获取网页元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id='xiaodi'>小邸</div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul id="nav">
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>0</li>
    </ul>

    <div class="hezi">盒子1</div>
    <div class="hezi">盒子2</div>

    <!--此处的js需要写在下面，因为页面加载从上往下-->
    <script>
        // 1.通过Id获取
        var byid = document.getElementById('xiaodi');
        console.dir(byid);
        // 2.通过标签获取
        // byelement是存放所有标签的数组，获取直接遍历
        var byelement = document.getElementsByTagName('li');
        // 这样操作会获得所有的li标签，我只想获取上边的怎么办呢


        // 可以先通过id来获取
        var nav = document.getElementById('nav');
        var nav_li = nav.getElementsByTagName('li');
        console.log(nav_li[0]);

        // 3.html5新增，支持ie9以上的类名获取
        var byclass = document.getElementsByClassName('hezi');
        console.log(byclass);
        // 4.querySelector返回第一个元素,任何选择器
        var first = querySelector('.hezi');
        var first1 = querySelector('#id');
        // 或者使用querySelectorAll()全部获取

        // 特殊元素html和body
        var bodyele = document.body;
        var htmlele = document.documentElement;
    </script>
</body>
</html>

②事件基础
出发响应机制，分为三个部分，分别为事件源，事件类型，事件处理程序。
事件源就是谁触发事件，类型就是什么样的事件，处理程序就是干什么。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">点击弹出对话框</button>
    <div id="nav">你中奖了！</div>
    <script>
        // 获取事件源
        var btn = document.getElementById('btn');
        // 触发事件包括点击，鼠标经过，键盘，滚轮等等
        btn.onclick = function() {
            alert('出来了');
        }
        var nav = document.getElementById('nav');
        nav.onclick = function() {
            alert('中了');
        }
    </script>
</body>
</html>

③操作元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">点击</button>
    <div id="box">点击按钮出时间</div>
    <p>不点也能获取</p>
    <div id="box1"></div>
    <script>
        // 1.改变元素内容innerText,不识别html标签
        var btn = document.querySelector('#btn');
        btn.onclick = function() {
            var box = document.querySelector('#box');
            // 改变内容
            box.innerText = getTime();
        }
        // 不要点击刷新直接得到时间
        var p = document.querySelector('p');
        p.innerText = getTime();


        function getTime() {
            var date1 = new Date();
            var date2 = date1.getFullYear() + '年' + (date1.getMonth() + 1) + '月' + date1.getDate() + '日' + date1.getHours() + '时' + date1.getMinutes() + '分' + date1.getSeconds() + '秒' + ' 星期' + date1.getDay();
            return date2;
        }

        // 2.innerHtml识别html标签
        var box1 = document.querySelector('#box1');
        // box1.innerText = '<strong>加粗文字</strong>'; // 不好使，不识别
        box1.innerHTML = '<strong>加粗文字</strong>';

        // 两种操作元素的方法都可以获得元素内容和修改元素


        // 
    </script>
</body>
</html>

④改变元素属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="xi">喜羊羊</button>
    <button id="lan">懒洋洋</button>
    <div>
        <img src="C:\java-script_learning\image\xi.jpg" title="喜羊羊">
    </div>
    <button id="btn">获取</button>
    <input type="text" value="输入内容">
    <script>
        // 切换图片
        var xi = document.querySelector('#xi');
        var lan = document.querySelector('#lan');
        var image = document.querySelector('img');
        lan.onclick = function() {
            image.src = 'C:\\java-script_learning\\image\\lan.jpg';
            image.title = '懒洋洋';        }
        xi.onclick = function() {
            image.src = 'C:\\java-script_learning\\image\\xi.jpg';
            image.title = '懒洋洋';
        }
        
        // 改变文本框内容
        var btn = document.querySelector('#btn');
        var input = document.querySelector('input');
        btn.onclick = function() {
            input.value = '别输入';
            btn.disabled = true;
        }
        
    </script>
</body>
</html>

简单得密码隐藏和显示例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }
        .box input {
            width: 370px;
            height: 30px;
            border: 0;
            outline: 0;
        }
        .box img {
            width: 20px;
            height: 20px;
            top: 25px;
            right: 2px;
            position: absolute;
        }
    </style>
</head>
<body>
        <div class="box">
            用户名<input type="text" id="name"><br>
        </div>
        <div class="box">
            <label for="">
                <img src="C:\java-script_learning\image\yanj1.jpg" alt="">
            </label>
            密码<input type="password" id="pass">
        </div>
        <script>
            var pass = document.querySelector('#pass');
            var btn = document.querySelector('button');
            var image = document.querySelector('img');
            flag = 0;
            image.onclick = function() {
                if(flag == 0) {
                    pass.type = 'text';
                    image.src = 'C:\\java-script_learning\\image\\yanj2.jpg';
                    flag = 1;
                }else {
                    pass.type = 'password';
                    image.src = 'C:\\java-script_learning\\image\\yanj1.jpg';
                    flag = 0;
                }
            }

        </script>
</body>
</html>

⑤操作元素样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        // 点击盒子变颜色，操作样式
        var box = document.querySelector('div');
        box.onclick = function() {
            box.style.backgroundColor = '#ccc';
        }
    </script>
</body>
</html>

或者

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .change {
            background-color: aqua;
            color: brown;
            font-size: large;
        }
    </style>
</head>
<body>
    <div>
        哈哈
    </div>
    <script>
        var box = document.querySelector('div');
        box.onclick = function() {
            // 增加类名给样式
            this.className = 'change';
        }
    </script>
</body>
</html>

文本消失复原案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" value="手机">
    <script>
        var te = document.querySelector('input');
        // onfocus获取焦点
        te.onfocus = function() {
            if(te.value === '手机') {
                te.value = '';
            }else {
                te.value = te.value;
            }
        }
        // onblur失去焦点
        te.onblur = function() {
            if(te.value === '') {
                te.value = '手机';
            }
        }
    </script>
</body>
</html>

总结
在这里插入图片描述