javaScript操作元素(9个案例+代码+效果)

目录

1.innerHTML

案例:使用innerHTML修改文本内容

1.代码

2.效果

2.innerText

案例:使用innerText修改文本

1.代码

2.效果

3.textContent

案例:使用textContent修改文本

1.代码

2.效果

4.通过style属性操作样式

案例:改变小球颜色

1.代码

2.效果

5.通过className属性操作样式

案例:改变形状

1.代码

解释

2.效果

6.通过classList属性操作样式

案例:添加/去除背景图

1.代码

2.效果

7.操作img元素的属性

案例:修改img标签图片的文本

解释:

HTML结构

CSS样式

JavaScript功能

整体效果

1.代码

2.效果

8.操作Attribute属性

修改属性值(setAttribute)

获取属性值(getAttribute)

移除属性(removeAttribute)

案例:修改我的链接地址

1.代码

解释

HTML结构

CSS样式

JavaScript功能

整体效果

2.效果

9.自定义属性data-*

案例:data属性的简单操作

1.代码

解释

HTML结构

CSS样式

JavaScript功能

整体效果

2.效果

附录

素材下载

1.innerHTML

用于获取或设置指定元素的HTML内容。
当设置时，它会将字符串解析为HTML或XML，并插入到DOM树中。
示例: element.innerHTML = "<p>这是一个段落。</p>";

`案例:使用innerHTML修改文本内容`

`1.代码`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>innerHTML操作文本内容</title>
    <style>
        #myDiv {
            background-color: #f0f0f0;
            padding: 10px;
        }
        #myButton {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
        }
        
    </style>
</head>
<body>
    <div id="myDiv">这是原始文本内容</div>
    <button id="myButton">点击修改修改文本内容</button>

    <script>
        // 获取元素
        var myDiv = document.getElementById("myDiv");
        var myButton = document.getElementById("myButton");

        // 绑定事件
        myButton.onclick = function () {
            // 修改文本内容
            myDiv.innerHTML = "<h1>这是修改后的文本内容</h1>";
        };
    </script>
    </script>
    
</body>
</html>

`2.效果`

原始状态

修改之后的状态

注：可以看到<h1></h1>被浏览器解析为了

2.innerText

用于获取或设置指定元素的“人类可读”文本内容。
它不会包含HTML标签，而是只处理纯文本。
示例: element.innerText = "你好，世界！";

`案例:使用innerText修改文本`

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用innerText修改文本</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        #myDiv {
            background-color: #aa9c9c;
            padding: 10px;
        }
        #myALterButton {
            background-color: #2cce32;
            color: rgb(221, 23, 23);
            padding: 8px 16px;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="myDiv">Hello World!</div>

    <button id="myALterButton">换成中文</button>

    <script>
        // 获取元素
        var myDiv = document.getElementById("myDiv");
        var myALterButton = document.getElementById("myALterButton");

        // 绑定事件
        myALterButton.onclick = function () {
            // 修改文本
            myDiv.innerText = "<h1>你好，世界！</h1>";
        }
    </script>

    
</body>
</html>

2.效果

修改之后

注：innerText不会解析标签

3.textContent

与innerText类似，但更标准且跨浏览器兼容性更好。
它也用于获取或设置节点及其后代的文本内容。
示例: element.textContent = "这是另一个文本。";

`案例:`使用textContent修改文本

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用textContent修改文本</title>
    <style>
        #myDiv {
            background-color: #f0f0f0;
            padding: 20px;
            text-align: center;
        }
        #myButton {
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            cursor: pointer;
        }
        
    </style>
</head>
<body>
    <div id="myDiv">Hello World!</div>
    <button id="myButton">使用textContent修改文本</button>
    
    <script>
        // 获取元素
        var myDiv = document.getElementById("myDiv");
        var myButton = document.getElementById("myButton");

        // 绑定事件
        myButton.addEventListener("click", function () {
            // 修改文本内容
            myDiv.textContent = "Hello JavaScript!";
        });
    </script>
</body>
</html>

2.效果

修改之后

4.通过style属性操作样式

background 设置/获取获取背景
background 设置/获取背景颜色
display 设置/获取元素类型
fontSize 设置/获取元素大小
height 设置获取元素的宽
left 设置/获取定位元素的坐不位置
listStyle 设置获/取列表类型
textAlign 设置或获取文本水平对其方式
textDecoration 设置获取文本修饰

element.style.backgroundColor = 'red'; // 设置背景颜色
element.style.display = 'none'; // 隐藏元素
element.style.fontSize = '16px'; // 设置字体大小
element.style.height = '100px'; // 设置高度
element.style.left = '50px'; // 设置左侧位置
element.style.listStyle = 'circle'; // 设置列表样式
element.style.textAlign = 'center'; // 设置文本对齐方式
element.style.textDecoration = 'underline'; // 设置文本装饰

案例:改变小球颜色

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>改变小球颜色</title>

</head>
<body>
    
    <div id="ballContainStyle">
        <div id="ball"></div>
    </div>
    <button id="myRedButton">红色</button>
    <button id="myBlueButton">蓝色</button>
    <button id="myGreenButton">绿色</button>
    <button id="myRandomButton">随机颜色</button>
    <script>
        //获取小球
        var ball = document.querySelector("#ball");
        //获取按钮
        var redButton = document.querySelector("#myRedButton");
        //获取蓝色按钮
        var blueButton = document.querySelector("#myBlueButton");
        //获取绿色按钮
        var greenButton = document.querySelector("#myGreenButton");
        //获取随机颜色按钮
        var randomButton = document.querySelector("#myRandomButton");
        //绑定事件
        redButton.onclick = function () {
            ball.style.backgroundColor = "red";
        }
        //绑定蓝色事件
        blueButton.onclick = function () {
            ball.style.backgroundColor = "blue";
        }
        //绑定绿色事件
        greenButton.onclick = function () {
            ball.style.backgroundColor = "green";
        }
        //绑定随机颜色事件
        randomButton.onclick = function () {
            var randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16);
            ball.style.backgroundColor = randomColor;
        }

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

2.效果

初始界面

点击蓝色按钮

点击绿色按钮

点击随机按钮

5.通过className属性操作样式

用于获取或设置元素的class名。
如果要添加多个类名，可以使用空格分隔。
示例: element.className = 'new-class another-class';

案例:改变形状

1.代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>改变形状</title>
    <style>
        #myDiv {
            width: 800px;
            height: 600px;
            background-color: rgb(204, 188, 188);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #myBall {

        }

        .myButtonStyle {
            width: 100px;
            height: 30px;
            background-color: rgb(255, 255, 255);
            border: 1px solid rgb(0, 0, 0);
            margin: 5px;
        }

        .myButtonStyle:hover {
            background-color: rgb(10, 255, 10);
            color: rgb(238, 3, 3);
        }

        /* 改变形状 */
        .mySquareShape {
            width: 200px;
            height: 200px;
            background-color: rgb(13, 103, 238);
            border-radius: 0%;
        }

        .myCircleShape {
            width: 200px;
            height: 200px;
            background-color: rgb(255, 255, 0);
            border-radius: 50%;
        }

        .myTriangleShape {
            width: 0px;
            height: 0px;
            border: 0px solid transparent;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 200px solid rgb(42, 253, 0);
        }

        .myRectangleShape {
            width: 200px;
            height: 100px;
            background-color: rgb(37, 236, 226);
            border-radius: 0%;
        }

        /* 会呼吸的球球 */
        @keyframes myBreadthBall {
            /**
            * 颜色变化多一些
            */
            0% {
                transform: scale(1);
                
            }
            50% {
                transform: scale(1.5);
                
            }
            100% {
                transform: scale(1);
               
            }
        }
    </style>
</head>

<body>
    <div id="myDiv">
        <div class="myCircleShape" id="myBall"></div>
    </div>
    <button id="square" class="myButtonStyle">方形</button>
    <button id="circle" class="myButtonStyle">圆形</button>
    <button id="triangle" class="myButtonStyle">三角形</button>
    <button id="rectangle" class="myButtonStyle">长方形</button>
    <script>
        // 获取元素
        var myDiv = document.getElementById("myDiv");

        // 获取按钮
        var square = document.getElementById("square");
        var circle = document.getElementById("circle");
        var triangle = document.getElementById("triangle");
        var rectangle = document.getElementById("rectangle");
        var myBall = document.getElementById("myBall");

        // 绑定事件
        square.onclick = function () {
            myBall.className = "mySquareShape";
            myBall.style.transform = "translate(-50%, -50%)";
        };

        circle.onclick = function () {
            myBall.className = "myCircleShape";
            myBall.style.transform = "translate(-50%, -50%)";
        };

        triangle.onclick = function () {
            myBall.className = "myTriangleShape";
            myBall.style.transform = "translate(-50%, -50%)";
        };

        rectangle.onclick = function () {
            myBall.className = "myRectangleShape";
            myBall.style.transform = "translate(-50%, -50%)";
        }

        // 确保动画正常工作
        myBall.style.animation = "myBreadthBall 1s ease-in-out infinite";
    </script>
</body>

</html>

解释

想象你有一个大画板（<div id="myDiv">），它有800像素宽和600像素高，背景是浅灰色。在这个画板的正中央，放着一个小球（<div class="myCircleShape" id="myBall"></div>）。初始时，这个小球是个黄色的圆形。

在画板下面，你有一排按钮，每个按钮都有不同的功能：

一个是方形按钮（<button id="square" class="myButtonStyle">方形</button>）。
一个是圆形按钮（<button id="circle" class="myButtonStyle">圆形</button>）。
一个是三角形按钮（<button id="triangle" class="myButtonStyle">三角形</button>）。
最后一个是长方形按钮（<button id="rectangle" class="myButtonStyle">长方形</button>）。

当你点击这些按钮时，它们会告诉小球变成相应的形状。比如，如果你点击了方形按钮，小球就会变成蓝色的方形；如果点击圆形按钮，它又会变回原来的黄色圆形；点击三角形按钮，小球会变成绿色的三角形；点击长方形按钮，它会变成青色的长方形。

有趣的是，无论小球变成了什么形状，它都会在画板中心保持居中的位置，这是因为使用了CSS的 transform: translate(-50%, -50%) 来确保它的中心点与画板的中心点对齐。

此外，这个小球还有一个特别的功能——它会“呼吸”。也就是说，即使你改变了它的形状，它也会不断地变大再变小，就像在呼吸一样。这是通过CSS动画 @keyframes myBreadthBall 实现的，动画会让小球每隔一秒就从原始大小放大到1.5倍，然后再缩小回原样，循环往复。

整个效果就像是你在玩一个互动游戏，通过点击不同的按钮来变换屏幕中间的图形，并且这个图形还会不停地“呼吸”变化。

2.效果

注:这些都是动态的，会动的

初始状态

点击方形按钮

点击三角型

点击长方形

6.通过classList属性操作样式

add(class1, class2, ..., classN)：向元素添加一个或多个类名。如果类名已经存在，则不会重复添加。
remove(class1, class2, ..., classN)：从元素中移除一个或多个类名。如果类名不存在，则什么也不做。
toggle(className, [force])：切换类名的存在状态。如果没有强制参数，那么如果类名存在则移除，如果不存在则添加。如果设置了 force 参数，当 force 为 true 时总是添加类名，为 false 时总是移除类名。
contains(className)：检查元素是否包含指定的类名。返回 true 或 false。
replace(oldClass, newClass)：用新的类名替换旧的类名。如果旧的类名不存在，则不做任何改变。
item(index)：获取位于指定索引处的类名。这可以用于遍历所有类名，因为 classList 类似于数组，但不是真正的数组，所以不能使用 forEach 方法。

案例:添加/去除背景图

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加/去除背景图</title>
    <style>
        #myBgDiv {
            width: 300px;
            height: 300px;
            background-color: #f0f0f0;
            
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
        .myButtonStyle {
            width: 100px;
            height: 30px;
            background-color: #007bff;
            color: #fff;
            border: none;
            cursor: pointer;
        }
        .addBgStyle {
            background-image: url("./aImg.png");
        }
        .removeBgStyle {
            background-image: none;
        }
    </style>
</head>
<body>
    
    <div id="myBgDiv"></div>
    <button id="myButton" class="myButtonStyle">添加背景图</button>
    <!-- 去除背景图 -->
     <button id="myRemoveButton" class="myButtonStyle">移除背景图</button>

     <script>
        // 获取元素
        var myBgDiv = document.getElementById("myBgDiv");
        var myButton = document.getElementById("myButton");
        var myRemoveButton = document.getElementById("myRemoveButton");

        // 绑定事件
        myButton.onclick = function () {
            // 添加背景图
            myBgDiv.classList.add("addBgStyle");
        };

        myRemoveButton.onclick = function () {
            // 移除背景图
            myBgDiv.classList.remove("addBgStyle");
        };
     </script>


</body>
</html>

2.效果

初始状态

添加背景图

移除背景图

7.操作img元素的属性

可以更改图像的源(src)、替代文本(alt)等属性。

案例:修改img标签图片的文本

解释:

HTML结构

有一个 <img> 标签，它最初指向一个名为 aImg.png 的图片。
页面上还有三个按钮：
- 第一个按钮（id="myOrignPic"）用于切换回原始的小女孩图片。
- 第二个按钮（id="myNewPic"）用于切换到小男孩的图片。
- 第三个按钮（id="mynewPic2"）用于切换到蓝鼠的图片。

CSS样式

按钮有一些基本的样式设置，比如宽度、高度、背景颜色、文字颜色、无边框等。这些样式使得按钮看起来更加美观和易于点击。

JavaScript功能

首先，通过 document.querySelector 方法获取了页面中的 <img> 元素以及每个按钮元素。
然后为每个按钮绑定了点击事件处理函数：
- 当点击第一个按钮时，图片源更改为 ./aImg.png，并且图片的 alt 和 title 属性都设置为“小女孩”。
- 当点击第二个按钮时，图片源更改为 ./boy.png，并且图片的 alt 和 title 属性都设置为“小男孩”。
- 当点击第三个按钮时，图片源更改为 ./aMouse.png，并且图片的 alt 和 title 属性都设置为“蓝鼠”。

整体效果

当你打开这个网页时，你会看到一张默认的小女孩图片。旁边有三个按钮，分别对应三种不同的图片。每当你点击其中一个按钮，中间显示的图片就会相应地变化，同时如果你将鼠标悬停在图片上，会显示出对应的提示文字，这对于辅助技术用户来说是非常有用的，因为它提供了关于图片内容的信息。

1.代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改img标签图片的文本</title>
    <style>
        .myButtonStyle {
            width: 100px;
            height: 30px;
            background-color: #007bff;
            color: #fff;
            border: none;
            cursor: pointer;
            margin-top: 20px;
        }
    </style>
</head>

<body style="display: flex; align-items: center; justify-content: center;">
    <img src="./aImg.png">

    <div>
        <button id="myOrignPic" class="myButtonStyle">小女孩</button>
        <br />
        <button id="myNewPic" class="myButtonStyle">小男孩</button>
        <br />
        <button id="mynewPic2" class="myButtonStyle">蓝鼠</button>
    </div>

    <script>
        // 获取元素
        var myImg = document.querySelector("img");
        var myOrignPic = document.querySelector("#myOrignPic");
        var myNewPic = document.querySelector("#myNewPic");
        var mynewPic2 = document.querySelector("#mynewPic2");

        // 绑定事件
        myOrignPic.onclick = function () {
            myImg.src = "./aImg.png";
            myImg.alt = "小女孩";
            //img鼠标悬停文字显示设置
            myImg.title = "小女孩";
        }
        myNewPic.onclick = function () {
            myImg.src = "./boy.png";
            myImg.alt = "小男孩";
            myImg.title = "小男孩";
        }
        mynewPic2.onclick = function () {
            myImg.src = "./aMouse.png";
            myImg.alt = "蓝鼠";
            myImg.title = "蓝鼠";
        }
    </script>
    </script>
</body>

</html>

2.效果

初始状态

点击小男孩

点击蓝鼠

8.操作Attribute属性

修改属性值(setAttribute)

用于设置指定元素上的属性值。
示例: element.setAttribute('href', 'http://example.com');

获取属性值(getAttribute)
用于从指定元素上获取属性值。
示例: var url = element.getAttribute('href');

移除属性(removeAttribute)
用于移除指定元素上的一个属性。
示例: element.removeAttribute('href');

案例:修改我的链接地址

1.代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改我的链接地址</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 20px;
        }

        a {
            color: #007bff;
            text-decoration: none;
            font-size: 24px;
            transition: color 0.3s ease;
        }

        a:hover {
            color: #0056b3;
        }

        button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 18px;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1><a href="https://blog.csdn.net/2301_76862031" id="myAUrlStyle">惜.己的博客</a></h1>
        <button id="myButtonStyle">修改为CSND主页</button>
    </div>

    <script>
        // 获取元素
        var myAUrlStyle = document.getElementById("myAUrlStyle");
        var myButtonStyle = document.getElementById("myButtonStyle");

        // 绑定事件
        myButtonStyle.onclick = function () {

            // 修改链接地址
            myAUrlStyle.setAttribute("target", "_blank");
            
            myAUrlStyle.setAttribute("title", "跳转到CSDN博客");
            myAUrlStyle.setAttribute("href", "https://blog.csdn.net");
            myAUrlStyle.innerHTML = "CSDN博客";
        };
    </script>
</body>

</html>

解释

HTML结构

页面中心有一个包含标题 <h1> 的容器（<div class="container">），标题内嵌套了一个超链接 <a>。
- 这个超链接初始指向一个具体的CSDN博客页面（https://blog.csdn.net/2301_76862031）。
- 链接的文本是“惜.己的博客”。
页面上还有一个按钮，用于修改链接的属性。

CSS样式

页面使用了 Arial 字体，并且背景颜色为浅灰色。
内容居中显示，并且垂直和水平都居中对齐。
标题 <h1> 文字颜色为深灰色，居中对齐。
超链接 <a> 默认为蓝色，没有下划线，并且鼠标悬停时会变为更深的蓝色。
按钮有蓝色背景、白色文字、圆角边框，并且鼠标悬停时背景色会变深。

JavaScript功能

首先，通过 document.getElementById 方法获取了页面中的超链接和按钮元素。
为按钮绑定了点击事件处理函数：
- 当点击这个按钮时，会执行以下操作：
  - 设置链接的目标窗口为新标签页（target="_blank"）。
  - 设置链接的 title 属性为“跳转到CSDN博客”，这样当鼠标悬停在链接上时会显示提示信息。
  - 修改链接的 href 属性，使其指向CSDN的主页（https://blog.csdn.net）。
  - 更改链接的文本内容为“CSDN博客”。

整体效果

当你打开这个网页时，你会看到一个居中的标题，标题内的链接指向一个特定的CSDN博客页面。下方有一个按钮，上面写着“修改为CSND主页”。

初始状态：链接文本是“惜.己的博客”，指向一个具体的博客页面。
点击按钮后：链接文本变为“CSDN博客”，并且指向CSDN的主页。此外，点击该链接会在新的标签页中打开。

2.效果

点击之后会跳转惜.己的博客

修改之后

点击会跳转CSND首页

9.自定义属性data-*

允许你在任何HTML元素上存储额外的信息。
属性名必须以data-开头，后面跟着描述性的名称。
可以使用dataset属性来访问这些自定义数据属性。

案例:data属性的简单操作

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>data的简单操作</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        div {
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 20px;
            margin-bottom: 20px;
            width: 300px;
            text-align: center;
        }

        button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            border-radius: 5px;
            margin: 10px;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div id="myDiv">这是原始文本内容</div>
    <button id="myDivButton">自定义属性设置</button>
    <button id="getMyDivButton">自定义属性的获取</button>
    <script>
        // 获取元素
        var myDiv = document.getElementById("myDiv");
        var myDivButton = document.getElementById("myDivButton");
        var getMyDivButton = document.getElementById("getMyDivButton");

        // 绑定事件
        myDivButton.onclick = function () {
            // 设置自定义属性
            myDiv.setAttribute("data-my-attr", "Hello JavaScript!");
        };

        getMyDivButton.onclick = function () {
            // 获取自定义属性
            var myAttrValue = myDiv.getAttribute("data-my-attr");
            alert(myAttrValue);
        };
    </script>
</body>
</html>

解释

HTML结构

页面包含一个 <div> 元素，初始文本为“这是原始文本内容”。
有两个按钮：
- 第一个按钮（id="myDivButton"）用于设置 <div> 的自定义属性。
- 第二个按钮（id="getMyDivButton"）用于获取并显示该自定义属性的值。

CSS样式

页面的背景颜色是浅灰色，字体使用了无衬线字体 Arial。
<div> 元素有白色的背景、边框和圆角，并且居中对齐。
按钮有蓝色的背景、白色的文字、圆角和鼠标悬停时的颜色变化效果。

JavaScript功能

首先，通过 document.getElementById 方法获取了页面中的 <div> 和两个按钮元素。
为第一个按钮绑定了点击事件处理函数：
- 当点击这个按钮时，会在 <div> 上设置一个名为 data-my-attr 的自定义属性，并将其值设为 "Hello JavaScript!"。
为第二个按钮绑定了点击事件处理函数：
- 当点击这个按钮时，会从 <div> 中获取 data-my-attr 自定义属性的值，并通过 alert 弹窗显示出来。

整体效果

当你打开这个网页时，你会看到一个带有文本“这是原始文本内容”的白色方块。下方有两个按钮：

自定义属性设置：当你点击这个按钮时，不会有任何视觉上的变化，但实际上会在 <div> 上添加一个 data-my-attr 自定义属性，其值为 "Hello JavaScript!"。
自定义属性的获取：当你点击这个按钮时，会弹出一个警告框，显示之前设置的 data-my-attr 自定义属性的值 "Hello JavaScript!"。