嘘~ 正在从服务器偷取页面 . . .

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

HTML 前端 JavaScript
前端
发布日期:   2022-11-28
更新日期:   2022-11-28
文章字数:   1.3k
阅读时长:   6 分
阅读次数:  

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>

文章作者: New Ass
文章链接: https://New-Ass.github.io/2022/11/28/html-qian-duan-xue-xi-8-javascript-xue-xi-zhi-dom-cao-zuo/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 New Ass !
HTML 前端 JavaScript
赏
  目录