HTML 前端学习（8）—— JavaScript 学习之 DOM 操作

最新推荐文章于 2024-10-09 16:49:35 发布

世界的隐喻

最新推荐文章于 2024-10-09 16:49:35 发布

阅读量1.1k

点赞数 1

分类专栏： HTML 前端开发学习文章标签： HTML 学习 javascript html 前端

本文链接：https://blog.csdn.net/shijiedeyinyu/article/details/124524680

版权

HTML 前端开发学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

HTML 前端学习（8）—— JavaScript 学习之 DOM 操作

DOM 简单介绍
查找标签
节点操作，创建标签
- img 标签
- a 标签
innerText 和 innerHTML 的区别
获取值操作
class 操作
CSS 操作
事件

DOM 简单介绍

DOM
    文档对象模型 Document Object Model
       JS 代码操作标签

DOM 树的概念

所有的标签都可以称之为是节点

Javascript 可以通过 DOM 创建动态的 HTML

Javascript 能够改变页面中的所有 HTML 元素
Javascript 能够改变页面中的所有 HTML 属性
Javascript 能够改变页面中的所有 CSS 样式
Javascript 能够改变页面中的所有事件作出反应

DOM 操作需要 document 起手

查找标签

命名规范

命名规范——当你用变量名指代标签对象的时候，一般情况下推荐写成 xxxEle

直接查找

	// id 查找
    document.getElementById("d2");
    // 类 查找
    document.getElementsByClassName("c1"); // HTMLCollection?[p.c1];
    // 标签查找
    document.getElementsByTagName("p"); // HTMLCollection(2)?[p.c1, p];
    
    // 注意由于一个 HTML 文件的 id 值是唯一的，所以 id 查找的结果是标签本身，而 类和标签 是可以重复且多个的，所以使用类查找和标签查找返回的是一个数组

间接查找

let divEle = document.getElementById("d2");
divEle.parentElement; // 父标签
divEle.children; // 所有儿子标签 HTMLCollection(3)?[div, p.c1, p]
divEle.firstChild; // 第一个子标签，相当于 divEle.children[0];
divEle.lastChild; // 最后一个子标签
divEle.nextElementSibling; // 同级别下面的一个标签
divEle.previousElementSibling; // 同级别上面的第一个标签

节点操作，创建标签

img 标签

let divEle2 = document.getElementById("d2");
let imgEle = document.createElement("img");
imgEle.src = "04-奥特曼.jpg";
imgEle.alt = "奥特曼";
// 采用 .属性 只能对本身存在的属性进行赋值，如果要自创属性，需要使用另一个方法
imgEle.setAttribute("name", "aoteman");
// 这个方法也可以对标签原本就有的属性赋值
divEle2.appendChild(imgEle); // 添加到 div 标签尾部

请添加图片描述

a 标签

let divEle3 = document.getElementById("d2");
let aEle = document.createElement("a");
aEle.setAttribute("href", "https://www.baidu.com")
aEle.innerText = "点我"; // 标签内部文字，相当于 <a href="">点我</a>
divEle3.appendChild(aEle);

请添加图片描述

innerText 和 innerHTML 的区别

// innerText 和 innerHTML 都可以添加标签内部文字，不同的是 innerHTML 识别 HTML语言
let divEle4 = document.getElementById("d2");
let pEle1 = document.createElement("p");
pEle1.innerText = "<h1>奥特曼</h1>";
divEle4.appendChild(pEle1);
let pEle2 = document.createElement("p");
pEle2.innerHTML = "<h1>奥特曼</h1>";
divEle4.appendChild(pEle2);

请添加图片描述

获取值操作

let inputEle = document.getElementById("i1");
inputEle.value; // 123
let fileEle = document.getElementById("i2");
fileEle.value; // 只能获取上传文件路径  'C:\\fakepath\\exercise2.doc'
fileEle.files[0]; // File?{name: 'exercise2.doc', lastModified: 1651119519156, lastModifiedDate: Thu Apr 28 2022 12:18:39 GMT+0800 (中国标准时间), webkitRelativePath: '', size: 2878464,?…}

class 操作

let divEle5 = document.getElementById("d1")
divEle5.classList; // 查看标签的类
divEle5.classList.remove("bt_red") // 移除属性
divEle5.classList.add("bt_red");
divEle5.classList.contains("c1"); // 判断是否有某种属性
divEle5.classList.toggle("bt_red"); // 有则移除该属性，没有就添加

CSS 操作

let pEle3 = document.getElementsByTagName("p")[0];
pEle3.style.fontSize = "48px";
pEle3.style.color = "red";

请添加图片描述

事件

两种绑定方式

第一种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <button onclick="func1()">点我！！</button>

    <script>
            function func1() {
            	alert("123");
            }
    </script>
</body>
</html>

第二种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <button>点我！！</button>

    <script>
        let btnEle = document.getElementsByTagName("button")[0];
        btnEle.onclick = function () {
            alert("asd");
        }
    </script>
</body>
</html>

请添加图片描述

开关灯案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            border-radius: 50%;
        }
        .bt_red {
            background-color: red;
        }
        .bt_green {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="bt_red bt_green"></div>
    <button>开关灯</button>

    <script>
        let divEle = document.getElementsByTagName("div")[0];
        let btnEle = document.getElementsByTagName("button")[0];
        btnEle.onclick = function func1() {
            divEle.classList.toggle("bt_green");
        }
    </script>
</body>
</html>

请添加图片描述

input 框获取、失去焦点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" value="输入用户名" id="d1">

<script>
    let inputEle1 = document.getElementById("d1");
    inputEle1.onfocus = function () {
        inputEle1.value = "";
    }
    inputEle1.onblur = function () {
        inputEle1.value = "输入用户名";
    }
</script>
</body>
</html>

请添加图片描述

实时展示当地时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        button {
            margin-top: 10px;
        }
        #btn1 {
            margin-right: 20px;
        }
    </style>
</head>
<body>
<input type="text" value="">
<br>
<button id="btn1">开始</button>
<button id="btn2">停止</button>

<script>
    let inputEle = document.getElementsByTagName("input")[0];
    let btnEle1 = document.getElementById("btn1");
    let btnEle2 = document.getElementById("btn2");
    let t = null

    function showTime() {
        inputEle.value = new Date().toLocaleString();
    }

    btnEle1.onclick = function func1() {
        if (!t) {
            t = setInterval(showTime, 1000);
        }
    }

    btnEle2.onclick = function () {
        clearInterval(t);
        t = null;
    }
</script>
</body>
</html>

请添加图片描述

省市联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<select name="province" id="s1">
    <!--  disabled 表示无法选中  -->
    <option value="" disabled selected>--请选择省份--</option>
</select>

<select name="city" id="s2">
    <option value="" disabled selected>--请选择省份--</option>
</select>

<script>
    let provinceEle = document.getElementById("s1");
    let cityEle = document.getElementById("s2");

    // 模拟省市数据
    data = {
        "河北省":["廊坊","邯郸","唐山"],
        "北京":["朝阳区","海淀区", "昌平区"],
        "山东":["威海市","烟台市","日照"],
        "上海":["浦东新区", "静安区","黄浦区"],
        "深圳":["南山区","宝安区","福田区"]
    };

    for (let key in data) {
        let optEle = document.createElement("option");
        optEle.value = key;
        optEle.innerText = key;
        provinceEle.appendChild(optEle);
    }

    provinceEle.onchange = function () {
        let province = provinceEle.value;
        cityEle.innerHTML = "";
        for (let cityNum in data[province]) {
            let optEle = document.createElement("option");
            optEle.value = data[province][cityNum];
            optEle.innerText = data[province][cityNum];
            cityEle.appendChild(optEle);
        }
    }    
</script>
</body>
</html>