CodeVault文档站
  • 前端
  • JavaScript
Yyzop
2023-07-14
目录

JavaScript DOM的基本使用

# JavaScript HTML DOM

通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。

# 1. DOM的介绍

# 1.1 HTML DOM

HTML DOM（文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被结构化为对象树：

对象的 HTML DOM 树

DOM HTML 树

通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：

  • JavaScript 能改变页面中的所有 HTML 元素
  • JavaScript 能改变页面中的所有 HTML 属性
  • JavaScript 能改变页面中的所有 CSS 样式
  • JavaScript 能删除已有的 HTML 元素和属性
  • JavaScript 能添加新的 HTML 元素和属性
  • JavaScript 能对页面中所有已有的 HTML 事件作出反应
  • JavaScript 能在页面中创建新的 HTML 事件

# 1.2 什么是DOM？

DOM 是一项 W3C (World Wide Web Consortium) 标准。

DOM 定义了访问文档的标准：

“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分：

  • Core DOM - 所有文档类型的标准模型
  • XML DOM - XML 文档的标准模型
  • HTML DOM - HTML 文档的标准模型

# 1.3 什么是HTML DOM？

HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：

  • 作为对象的 HTML 元素
  • 所有 HTML 元素的属性
  • 访问所有 HTML 元素的方法
  • 所有 HTML 元素的事件

换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

# 2. DOM的详细使用

HTML DOM Document 对象

文档对象代表您的网页。

如果您希望访问 HTML 页面中的任何元素，那么您总是从访问 document 对象开始。

下面是一些如何使用 document 对象来访问和操作 HTML 的实例。

# 2.1 DOM常用方法

通常，通过 JavaScript，您需要操作 HTML 元素。

为了达成此目的，您需要首先找到这些元素。有好几种完成此任务的方法：

  • 通过 id 查找 HTML 元素
  • 通过标签名查找 HTML 元素
  • 通过类名查找 HTML 元素
  • 通过 CSS 选择器查找 HTML 元素
  • 通过 HTML 对象集合查找 HTML 元素

# 1.getElementById

通过元素 id 来查找元素，访问 HTML 元素最常用的方法是使用元素的 id。

在上面的例子中，getElementById 方法使用 id="div1" 来查找元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div1">这是div1</div>
<div class="div2">这是div2</div>
<p id="p1">这是段落</p>

<ul>
    <li>床前明月光</li>
    <li>床前明月光</li>
    <li>床前明月光</li>
</ul>

<ol>
    <li>疑是地上霜</li>
    <li>疑是地上霜</li>
    <li>疑是地上霜</li>
</ol>
    
<script>
    // 从id获取元素  这个id就是每个HTML元素指定的id
    var div1 = document.getElementById('div1');
    var p1 = document.getElementById('p1');

    // 直接获取Class的名字
    var div2 = document.getElementsByClassName('div2');

    console.log(div1);
    console.log(div2);
    console.log(p1);

</script>

</body>
</html>

# 2.innerHTML

获取元素内容最简单的方法是使用 innerHTML 属性。

innerHTML 属性可用于获取或替换 HTML 元素的内容。

innerHTML 属性可用于获取或改变任何 HTML 元素，包括 <html> 和 <body>。

注意： innerText和innerHTML的区别就是，Text只是文本，HTML是支持网页元素。

<p id="p2"></p>

<script>
	document.getElementById('p2').innerText = "这是段落2的内容";
    document.getElementById('p2').innerHTML = "<strong>这是段落2的内容<strong>";
</script>

# 3.getElementsByTagName

通过标签名来查找元素，想要获取某一个标签的,比如想要获得无序列表中的列表，可以直接查询li的标签即可。

<ul>
    <li>床前明月光</li>
    <li>床前明月光</li>
    <li>床前明月光</li>
</ul>

<script>
	var Tagli = document.getElementsByTagName('li');
    console.log(Tagli);
</script>

# 4.document.body

查找HTML对象的body部分，直接使用文档document操作，调用body的对象就可以。

<script>	
    // 获取body的元素
	var body = document.body;
    console.log(body);

    // 获取html的元素
    var html = document.documentElement;
    console.log(html);

</script>

# 5.onclick

向 onclick 事件添加事件处理程序，设置一个按钮，按钮经过的时候，会发生什么事件。

事件的三大部分分别是：

  • 事件源
  • 事件状态
  • 事件的处理机制

语法：

document.getElementById(id).onclick = function(){code}

使用的方式：

<button id="btn">提交</button>
<p id="p"></p>


<script>
	var btn = document.getElementById('btn');
    var p = document.getElementById('p');
    btn.onclick = function(){
        p.innerHTML = "这里是一个新的段落";
	}
</script>

# 6.CSS选择器

如果您需要查找匹配指定 CSS 选择器（id、类名、类型、属性、属性值等等）的所有 HTML 元素，请使用 querySelectorAll() 方法。

有两个选择器：

  • document.querySelector()
  • document.querySelectorAll()
<ul>
    <li>床前明月光</li>
    <li>床前明月光</li>
    <li>床前明月光</li>
</ul>

<ol>
    <li>疑是地上霜</li>
    <li>疑是地上霜</li>
    <li>疑是地上霜</li>
</ol>

<script>
    // 把li的第一个元素拿出来
    var all = document.querySelector('li');
    console.log(all);
    
    // 查找li的所有html元素
    var all = document.querySelectorAll('li');
    console.log(all);
    // 直接遍历把所有的元素拿出来
    for (let i = 0; i < all.length; i++) {
        console.log(all[i]);
    }
</script>

# 7.添加和删除元素

方法 描述
document.createElement(element) 创建 HTML 元素
document.removeChild(element) 删除 HTML 元素
document.appendChild(element) 添加 HTML 元素
document.replaceChild(element) 替换 HTML 元素
document.write(text) 写入 HTML 输出流

# 8.改变 HTML 样式

如需更改 HTML 元素的样式，请使用此语法：

document.getElementById(id).style.property = new style

注意：

  1. JS里面的样式采用驼峰命名法，比如 fontSize、backgroundColor
  2. JS修改style样式操作，产生的是行内的样式 ，CSS权重比较高

示例：

<html>
<body>

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color = "blue";
</script>

<p>上面的段落已被脚本改变。</p>

</body>
</html>

# 9.样式属性的修改

通过JS修改元素的大小，颜色，位置等样式

  • element.style 行内样式操作
  • element.className 类名样式操作

如果需要的是大批量的修改样式的话，我们需要再定义一个CSS样式的class名称。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1 {
            width: 50px;
            height: 50px;
            background: pink;
        }

        .change {
            width: 100px;
            height: 100px;
            background: red;
            margin-top: 100px;
        }
    </style>
</head>
<body>

<div class="div1">
文本
</div>

<script>
    var div = document.querySelector('div');
    // 注册事件
    div.onclick = function (){
        this.className = "change";
        // 如果想要保 留 就添加两个
        this.className = "div1  change";
    }
</script>
</body>
</html>

综合案例1：

要求输入密码的时候，可以点击眼睛查看文明密码和加密密码，可以来回切换。

image-20220826112938633

<div>
    <input type="password" placeholder="password" id="pwd">
    <!--假设这里是使用的图片-->
    <button id="eye" type="button">👁</button>
</div>
<script>
    var eye = document.getElementById('eye');
    var pwd = document.getElementById('pwd');

    try {
        pwd.onclick = function () {
            console.log("在输入密码中");
        }
        // 0 和 1 控制变量的算法
        var flag = 0;
        eye.onclick = function () {
            if (flag == 0) {
                pwd.type = "text";
                /* eye.src = " " */
                flag = 1;
                console.log("切换成查看密码的方式");
            } else if (flag == 1) {
                pwd.type = "password";
                /* eye.src = " " */
                console.log("切换成查看不明文密码的方式");
                flag = 0;
            }
        }
    } catch (e) {
    }

</script>

综合案例2：

点击按钮随机切换图片

image-20220826113152354

<button id="ldh">刘德华</button>
<button id="zxy">张学友</button>
<img id="img" src="../image/img_3.png" alt="" title="刘德华">

<script>
    var ldh = document.getElementById('ldh');
    var zxy = document.getElementById('zxy');
    var img = document.getElementById('img');

    ldh.onclick = function (){
        img.src = "../image/img_4.png";
        img.title = "刘德华";
    }

    zxy.onclick = function (){
        img.src = "../image/img_3.png";
        img.title = "张学友";
    }
</script>

# 2.3 DOM事件

# 1. 理解什么是事件

HTML DOM 允许 JavaScript 对 HTML 事件作出反应：

image-20220826131907524

对事件作出反应

JavaScript 能够在事件发生时执行，比如当用户点击某个 HTML 元素时。

为了在用户点击元素时执行代码，请向 HTML 事件属性添加 JavaScript 代码：

HTML 事件的例子：

  • 当用户点击鼠标时
  • 当网页加载后
  • 当图像加载后
  • 当鼠标移至元素上时
  • 当输入字段被改变时
  • 当 HTML 表单被提交时
  • 当用户敲击按键时

# 2.onclick

onclick事件是鼠标经过点击后的事件。可以使用在button的按钮上。

<!DOCTYPE html>
<html>
<body>

<h1 onclick="this.innerHTML = 'Hello!'">点击此文本！</h1>

</body>
</html> 

<!DOCTYPE html>
<html>
<body>

<h1 onclick="changeText(this)">点击此文本！</h1>

<script>
function changeText(id) { 
    id.innerHTML = "Hello:)";
}
</script>

</body>
</html>

# 3.onload和onunload

当用户进入后及离开页面时，会触发 onload 和 onunload 事件。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，然后基于该信息加载网页的恰当版本。

onload 和 onunload 事件可用于处理 cookie。

处理加载页面的内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body onload="checkCookies()">
<p id="demo" ></p>
</body>

<script>
    function checkCookies(){
        var text = "";
        if (navigator.cookieEnabled == true) {
            text = "Cookie 已启用";
        } else {
            text = "Cookie 未启用";
        }
        document.getElementById('demo').innerHTML = text;
    }
</script>
</html>

# 4.onfocus和onblur

onfocus是获得焦点，onblur是失去焦点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #search {
            color: grey;
        }
        .div1 {
            width: 50px;
            height: 50px;
            background: pink;
        }

        .change {
            width: 100px;
            height: 100px;
            background: red;
            margin-top: 100px;
        }
    </style>
</head>
<body>
<input id="search" type="text" value="手机">
<script>
    var search = document.getElementById('search');
    search.onfocus = function (){
        if (this.value == "手机"){
            this.value = "";
        }
        this.style.color = "#333";
    }

    search.onblur = function (){
        if (this.value === ""){
            this.value = "手机";
        }
        this.style.color = "grey";
    }
</script>
</body>
</html>

# 5. 排他思想

image-20220826143639682

如果有一组元素，我们想要某有个元素实现某种样式，需要用到循环的排他算法：

  1. 所有元素全部清除样式（干掉其他人）
  2. 给当前元素设置样式（留下我自己）
  3. 注意顺序不能颠倒，首先干掉其他人，再设置自己
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
</body>

<script>
    var btn = document.getElementsByTagName('button');

    for (var i = 0; i < btn.length; i++) {
        btn[i].onclick = function (){
            for (var i = 0; i < btn.length; i++) {
                btn[i].style.backgroundColor = "";
            }
            this.style.backgroundColor = "pink";
        }
    }
</script>
</html>

综合案例1：

image-20220826142901425

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            /*border: 2px red solid;*/
            width: 100%;
            height: 400px;
            background-color: #8BC6EC;
            background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
        }

        .pwd {
            /*background: red;*/
            width: 250px;
            height: 30px;
            font-size: 20px;
            float: left;
            margin-top: 50px;
        }
        .message {
            /*background: blue;*/
            font-size: 18px;
            float: left;
            padding-left: 20px;
            margin-top: 53px;
        }
        .wrong {
            color: red;
        }
        .success {
            color: green;
        }
    </style>
</head>
<body>
<div>
    <input type="password" placeholder="password" class="pwd">
    <p class="message">👀请输入6-16位密码</p>
</div>
</body>

<script>
    var pwd = document.querySelector('.pwd');
    var message = document.querySelector('.message');

    pwd.onfocus = function (){
        console.log("正在输入密码");
        message.innerHTML = "正在输入密码";
        message.className = "message";
    }

    pwd.onblur = function (){
        if (this.value.length < 6 || this.value.length > 16){
            message.className = "message wrong";
            message.innerHTML = "🔴密码格式有误，请重新输入6-16位密码";
        }else {
            message.className = "message wrong success";
            message.innerHTML = "✔";
        }
    }
</script>
</html>

# 6. 鼠标经过和离开

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于当用户将鼠标移至 HTML 元素上或移出时触发某个函数：

image-20220826211803370

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            /*background-color: red;*/
            width: 500px;
            height: 120px;
        }

        li {
            list-style: none;
            background-color: #a6c1ee;
            line-height: 30px;
            text-align: center;
            border: 1px grey solid;
        }

        .bg {
            background-color: dodgerblue;
        }
    </style>
</head>
<body>

<div>
    <ul class="list">
        <li>这是一只股票</li>
        <li>这是一只股票</li>
        <li>这是一只股票</li>
        <li>这是一只股票</li>
    </ul>
</div>

<script>
    var listAll = document.querySelector('.list').querySelectorAll('li');
    for (let i = 0; i < listAll.length; i++) {
        listAll[i].onmouseover = function (){
            this.className = "bg";
        }
        listAll[i].onmouseout = function (){
            this.className = "";

        }
    }

</script>
</body>
</html>
上次更新: 2023/11/28, 22:03:59
JavaScript面向对象
JQuery的基本使用

← JQuery的基本使用→

最近更新
01
学习文档
11-28
02
如何成为FISCO社区的MVP 总结篇
11-28
03
一文搞懂Truffle测试
11-28
更多文章>
Theme by Vdoing | Copyright © 2023-2023 YYzop & Hior | MIT License