JavaScript学习笔记（四）DOM

最新推荐文章于 2024-10-07 21:15:54 发布

asdasd1fdsyrt

最新推荐文章于 2024-10-07 21:15:54 发布

阅读量127

点赞数

分类专栏： # H5 & JS 前端

本文链接：https://blog.csdn.net/asdasd1fdsyrt/article/details/117325815

版权

H5 & JS 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

前端

8 篇文章 0 订阅

订阅专栏

JavaScript基础用法

一.DOM对象

DOM对象：Document　Object Model 文档对象模型、作用、通过DOM对象可以访问和操作html文件的每个标签

html文档加载到浏览器的内存中后、我们认为形成了一颗DOM树、而任何一个html签、标签属性和文本都是这个树上的节点元素。
在这里插入图片描述
树结构

在浏览器把html文件加载完成之后，标签被称作标签对象（元素节点），标签中的文件称为文本节点（文本对象），标签的属性称为属性节点（属性对象）。

1. 获取元素节点对象

① document.getElementById(“id名”);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取节点</title>
</head>
<body>
    <input type="submit" value="点击" id="btn" />
</body>
<script>
    window.onload = function () {
        var btn = document.getElementById("btn");
        btn.onclick = function () {
            alert("获取成功!");
        }
    }
</script>
</html>

在这里插入图片描述
② document.getElementsByName(“name名”); 返回指定name值的对象集合
③ document.getElementsByClassName(“class名”); 返回指定class名的对象集合
④ document.getElementsByTagName(“标签名”); 返回指定标签名的对象集合

2. 获取标签内容

element.innerHTML; 获取标签内部的所有内容
element.innerText; 获取标签内部的文本内容

3. 节点/元素的操作

3.1、判断是否有子节点

hasChildNodes(); 判断是否含有子节点，返回true或false

<body>
<div id="go">
    来不来。
    <h1  id = "come">一起吃饭去！</h1>
</div>
<div id = "empty"></div>
</body>
<script>
    window.onload = function () {
        // hasChildNodes 是否包含子节点
        var go = document.getElementById("go");
        alert(go.hasChildNodes());          // true
        var come = document.getElementById("come");
        alert(come.hasChildNodes());        // true
        var empty = document.getElementById("empty");
        alert(empty.hasChildNodes());       // false
    }
</script>

3.2、删除节点

remove(); 删除当前标签对象，等同于自杀
removeChild(childElement); 通过父标签对象删除子标签对象
parentElement 父标签对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除节点</title>
</head>
<body>
    <ul id="pinpai">
        <li id="ft">丰田</li>
        <li id="bt">本田</li>
        <li id="sx">松下</li>
    </ul>
</body>
<script>
    window.onload = function () {
        //直接删除remove();
        var ft = document.getElementById("ft");
        ft.remove();
        //removeChild 删除子节点
        var pinpai = document.getElementById("pinpai");
        var bt = document.getElementById("bt");
        pinpai.removeChild(bt);
        //自杀
        var sx = document.getElementById("sx");
        sx.parentElement.removeChild(sx);
    }
</script>
</html>

3.3、替换节点

replaceChild(newChild,oldChild); 替换父节点下的子节点父节点对象调用该方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>替换节点</title>
</head>
<body>
    你喜欢的城市 : <br />
    <ul id="city">
        <li id="bj">北京</li>
    </ul>
    你喜欢的游戏 : <br />
    <ul>
        <li id="fk" value="fankong">反恐精英</li>
        <li id="wz" value="wangzhe">王者荣耀</li>
    </ul>
</body>
<script>
    window.onload = function () {
        // 1. 获取标签对象
        var city = document.getElementById("city");
        var bj = document.getElementById("bj");
        var fk = document.getElementById("fk");
        // 2. 调用方法
        bj.onclick = function () {
            city.replaceChild(fk, bj);
        }
    }
</script>
</html>

在这里插入图片描述

3.4、创建元素
document.createElement(“tagName”); 创建标签对象

// 创建节点
document.createElement("li");

3.5、新增子节点
appendChild(newChild); 向父标签内部末尾处追加子节点
insertBefore(newChild,refChild); 向父标签下指定的子节点前添加标签对象. 注意:使用父标签调用该方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>替换节点</title>
</head>
<body>
    <ul id="city">
        <li id="bj" value="beijing">北京</li>
        <li id="sh" value="shanghai">上海</li>
        <li id="cq" value="chongqing">重庆</li>
    </ul>
</body>
<script>
    window.onload = function () {
        // 创建节点
        var newLi = document.createElement("li");
        newLi.innerHTML = "天津";
        
        var city = document.getElementById("city");
        var sh = document.getElementById("sh");
        city.insertBefore(newLi, sh);
    }
</script>
</html>

在这里插入图片描述

4、标签属性的操作

4.1、获取属性
element.getAttribute(“name”) 或者 element.属性名 :获得属性的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
</head>
<body>
    <input type="text" id="txt" value="请输入用户名" class="baidu" />
</body>
<script>
    window.onload = function () {
        // 1. 获取 input 标签
        var input = document.getElementById("txt");
        // 2. 获取属性
        alert(input.value);
        alert(input.getAttribute("value"));
        alert(input.getAttribute("class"));
    }
</script>
</html>

4.2、设置属性
element.setAttribute(“name”,“value”)：设置属性的值。以直接采用element.属性名通过等号来赋值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
</head>
<body>
    <input type="text" id="txt" value="请输入用户名" class="baidu" />
</body>
<script>
    window.onload = function () {
        var input = document.getElementById("txt");
        //给input添加一个name属性   name="username"
        input.setAttribute("name", "username2");
    }
</script>
</html>

4.3、删除属性

element.removeAttribute(“name”); 删除某个属性

5、css样式的修改

obj.style.样式名获取值
obj.style.样式名=值修改值修改的值的格式必须跟css一模一样，有单位的必须加单位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
</head>
<body>
    <div id="box" style="width: 200px; height: 200px; background-color: pink;"></div>
</body>
<script>
    window.onload = function () {
        var box = document.getElementById("box");
        //设置 box 的属性值
        box.style.width = "100px";
        box.style.height = "100px";
        box.style.backgroundColor = "skyblue";
    }
</script>
</html>

在这里插入图片描述
**例1.商品全选全不选反选 **

<body>
    <table id="table" border="1" width="100%" align="center" style="text-align: center;">
        <tr>
            <td colspan="5" align="left">
                <input id="uncheckBtn" type="button" value="全不选" />
                <input id="reverseBtn" type="button" value="反选" />
            </td>
        </tr>
        <tr>
            <th>全选<input id="all" type="checkbox" /></th>
            <th>分类ID</th>
            <th>分类名称</th>
            <th>分类描述</th>
            <th>操作</th>
        </tr>
        <tr>
            <td><input type="checkbox" class="itemSelect" /></td>
            <td>1</td>
            <td>手机数码</td>
            <td>手机数码类商品</td>
            <td><a href="javascript:;">修改</a>|<a href="javascript:;">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="itemSelect" /></td>
            <td>2</td>
            <td>电脑办公</td>
            <td>电脑办公类商品</td>
            <td><a href="javascript:;">修改</a>|<a href="javascript:;">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="itemSelect" /></td>
            <td>3</td>
            <td>鞋靴箱包</td>
            <td>鞋靴箱包类商品</td>
            <td><a href="javascript:;">修改</a>|<a href="javascript:;">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="itemSelect" /></td>
            <td>4</td>
            <td>家居饰品</td>
            <td>家居饰品类商品</td>
            <td><a href="javascript:;">修改</a>|<a href="javascript:;">删除</a></td>
        </tr>
    </table>
</body>

<script>
    window.onload = function () {
        //全选
        var all = document.getElementById("all");
        //获取所有的复选框 itemSelect
        var itemSelects = document.getElementsByClassName("itemSelect");

        // 全选按钮绑定单击事件
        all.onclick = function () {
            var checked = all.checked;
            for (var i = 0; i < itemSelects.length; i++) {
                itemSelects[i].checked = checked;
            }
        }
 
        //全不选 按钮
        var uncheckBtn = document.getElementById("uncheckBtn");
        uncheckBtn.onclick = function () {
            for (var i = 0; i < itemSelects.length; i++) {
                itemSelects[i].checked = false;
            }
            //全选复选框
            all.checked = false;
        }
 
        //反选 按钮
        var reverseBtn = document.getElementById("reverseBtn");
        reverseBtn.onclick = function () {
            // 定义一个 count 计算器
            var count = 0;
            // 遍历 itemSelects 数组
            for (var i = 0; i < itemSelects.length; i++) {
                if (itemSelects[i].checked == true) {
                    itemSelects[i].checked = false;
                } else {
                    itemSelects[i].checked = true;
                    // 计算为 true 的数量
                    count++;
                }
                // 方式二 : 取反
                // itemSelects[i].checked = !itemSelects[i].checked;
                // 方式三 : 让 checkbox 被点击一下. 方法: click();
                // itemSelects[i].click();
            }
            // 遍历结束后, 实现判断
            if (count == itemSelects.length) {
                all.checked = true;
            } else {
                all.checked = false;
            }
        }
    }
</script>

在这里插入图片描述
例2. 隔行换色

html代码同上

<script>
    window.onload = function () {
        //获取所有的 tr 标签
        var trs = document.getElementsByTagName("tr");
        //遍历 trs 数组  i=2 数据行开始
        for (var i = 2; i < trs.length; i++) {
            if (i % 2 == 0) {
                trs[i].style.backgroundColor = "yellow";
            } else {
                trs[i].style.backgroundColor = "skyblue";
            }
        }
    }
</script>

在这里插入图片描述

例3.鼠标移入变色, 移除还原 : onmouseover, onmouseout

<script>
    window.onload = function () {
        //获取tr
        var trs = document.getElementsByTagName("tr");
        // 定义一个 color 属性
        var color;
        //遍历trs 从数据行开始
        for (var i = 2; i < trs.length; i++) {
            if (i % 2 == 0) {
                trs[i].style.backgroundColor = "yellow";
            } else {
                trs[i].style.backgroundColor = "skyblue";
            }
            //为每一行绑定`鼠标移入onmouseover`事件
            trs[i].onmouseover = function () {
                //记录当前行颜色
                color = this.style.backgroundColor;
                //当前行实现变色
                this.style.backgroundColor = "#ccc";
            }
            //为每一行绑定一个 `鼠标移出 onmouseout` 事件
            trs[i].onmouseout = function () {
                this.style.backgroundColor = color;
            }
        }
    }
</script>

在这里插入图片描述
例4.下拉列表省市联动

<body>
    <select id="province">
        <option value="none">--请选择省--</option>
        <option value="0">北京市</option>
        <option value="1">上海市</option>
        <option value="2">广州市</option>
    </select>
    <select id="city">
        <option value="none">--请选择市--</option>
    </select>
</body>

<script>
    window.onload = function () {
        //区县的数组
        var cities = [
            ["朝阳区", "海淀区", "丰台区", "昌平区", "西城区", "东城区", "通州区", "大兴区"],
            ["浦东新区", "闵行区", "静安区", "徐汇区", "杨浦区", "嘉定区", "黄埔区"],
            ["白云区", "天河区", "花都区", "番禺区"]
        ];
        //得到`省，市`标签
        var province = document.getElementById("province");
        var city = document.getElementById("city");
        //省份更改事件
        province.onchange = function () {
            //清除 `区县`
            city.innerHTML = "<option value=\"none\">--请选择市--</option>";
            //获取省的value值
            var index = province.value;
            //遍历 cities 二维数组中对应的 `一维数组`.
            for (var i = 0; i < cities[index].length; i++) {
                city.innerHTML += "<option value=\"none\">"+ cities[index][i] +"</option>";
            }
        }
    }
</script>