Web基础关键_007_JavaScript 的 DOM

发布于：2025-07-05 ⋅ 阅读:(22) ⋅ 点赞:(0)

目  录

一、概述

二、对象

1.Document 对象

2.Element 对象

三、标签体内容操作

四、元素关系操作

五、插入节点

六、删除节点

七、表单操作

八、事件

1.说明

2.点击事件

3.焦点事件

4.改变事件

5.鼠标移动事件

6.页面加载事件

7.表单事件

一、概述

  1. Document Object Model，文档对象模型；
  2. 文档会加载进内存，形成一棵文档树。然后将文档各部分封装为对象，通过操作这些对象，可以实现对文档各节点的增、删、改、查操作；
  3. 对象：
    1. Document：整个文档对象；
    2. Element：元素对象；
    3. Attribute：属性对象；
    4. Text：文本对象；
    5. Comment：注释对象。

二、对象

1.Document 对象

  1. getElementById：根据 id 值获取，返回单个 Element 对象；
  2. getElementsByTagName：根据标签名称获取，返回 Element 对象数组；
  3. getElementsByClassName：根据 class 值获取，返回 Element 对象数组；
  4. getElementsByName：根据 name 值获取，返回 Element 对象数组。
<html>

<head>
    <title>Test Javascript</title>
</head>

<body>
    <div id="i" class="c">I Love You!</div>
    <div class="c">If you don't completely forget me.</div>
    <p name="p">And occasionally think of me.</p>
    <p name="p">Then my heart will be tortured by you.</p>
    <p name="p">Abandoning everything and indulging with you.</p>

    <script>
        var e1 = document.getElementById("i");
        var e2 = document.getElementsByClassName("c");
        var e3 = document.getElementsByTagName("div");
        var e4 = document.getElementsByName("p");

        console.log(e1);
        console.log(e2);
        console.log(e3);
        console.log(e4);
    </script>
</body>

</html>

2.Element 对象

  1. getAttribute：获取属性值；
  2. hasAttribute：判断属性是否存在；
  3. setAttribute：设置或添加属性；
  4. removeAttribute：移除属性。
<html>

<head>
    <title>Test Javascript</title>
</head>

<body>
    <div id="i" class="c">I Love You!</div>
    <div class="c">If you don't completely forget me.</div>
    <p name="p">And occasionally think of me.</p>
    <p name="p">Then my heart will be tortured by you.</p>
    <p name="p">Abandoning everything and indulging with you.</p>

    <script>
        var e1 = document.getElementById("i");
        var a1 = e1.getAttribute("class");
        var a2 = e1.hasAttribute("class");

        // 设置属性
        // var a3 = e1.setAttribute("name", "n");

        // 修改属性
        // var a4 = e1.setAttribute("name", "name");

        // 删除属性
        // var a5 = e1.removeAttribute("name");

        console.log(a1);    // c
        console.log(a2);    // true
    </script>
</body>

</html>

三、标签体内容操作

  1. innerHTML：获取元素内容，包括标签；
  2. innerText：获取元素内容，不包括标签。
<html>

<head>
    <title>Test Javascript</title>
</head>

<body>
    <div id="d">
        <span id="s" class="c">I Love You!</span>
        <span class="c">If you don't completely forget me.</span>
        <p name="p">And occasionally think of me.</p>
        <p name="p">Then my heart will be tortured by you.</p>
        <p name="p">Abandoning everything and indulging with you.</p>
    </div>

    <script>
        var e1 = document.getElementById("d");
        var inHTML = e1.innerHTML;
        var inText = e1.innerText;
        console.log(inHTML); 
        console.log(inText);    
    </script>
</body>

</html>

四、元素关系操作

<html>

<head>
    <title>Test Javascript</title>
</head>

<body>
    <div id="d">
        <span id="s" class="c">I Love You!</span>
        <span class="c">If you don't completely forget me.</span>
        <p name="p">And occasionally think of me.</p>
        <p name="p">Then my heart will be tortured by you.</p>
        <p name="p">Abandoning everything and indulging with you.</p>
    </div>

    <script>
        // 获取父元素
        var e1 = document.getElementById("s");
        var parent = e1.parentNode;

        // 获取子元素
        var e2 = document.getElementById("d");
        var child = e2.children;

        console.log(parent);
        console.log(child);
    </script>
</body>

</html>

五、插入节点

<html>

<head>
    <title>Test Javascript</title>
</head>

<body>
    <div id="d">
        <h3 id="h">插入节点</h3>
    </div>

    <script>
        // 创建节点
        var e1 = document.createElement("p1");
        e1.innerHTML = "这是插入的节点1";
        var e2 = document.createElement("p2");
        e2.innerHTML = "这是插入的节点2";

        // 获取节点
        var e3 = document.getElementById("d");
        var e4 = document.getElementById("h");

        // 向父节点内插入子节点
        e3.appendChild(e1);

        // 向父节点内指定位置插入子节点 
        e3.insertBefore(e2, e4);
    </script>
</body>

</html>

六、删除节点

<html>

<head>
    <title>Test Javascript</title>
</head>

<body>
    <div id="d">
        <h3 id="h">删除节点</h3>
        <p id="p">让不让删呢？</p>
        <span id="s1">需要通过父容器删除，演示1</span>
        <span id="s2">需要通过父容器删除，演示2</span>
    </div>

    <script>
        // 删除节点第一种写法
        var e1 = document.getElementById("d");
        var e2 = document.getElementById("s1");
        e1.removeChild(e2);

        // 删除节点第二种写法
        var e3 = document.getElementById("s2");
        e3.parentNode.removeChild(e3);
    </script>
</body>

</html>

七、表单操作

<html>

<head>
    <title>Test Javascript</title>
</head>

<body>
    <form action="#" method="get">
        姓名：<input type="text" name="name" id="name"><br>
        性别：男<input type="radio" name="gender" value="man" id="1">
        女<input type="radio" name="gender" value="woman" id="2"><br>
        城市：<select name="city" id="city">
            <option id="beijing">北京</option>
            <option id="shanghai">上海</option>
            <option id="guangzhou">广州</option>
            <option id="shenzhen">深圳</option>
            <option id="hangzhou">杭州</option>
            <option id="wuhan">武汉</option>
        </select>
    </form>

    <script>
        // 获取或设置表单 value 属性
        var e1 = document.getElementById("name");
        e1.value = "张筱筱";
        console.log(e1.value);

        // 获取或设置单选框选中状态
        var e2 = document.getElementById("2");
        e2.checked = true;

        // 设置下拉框
        var e3 = document.getElementById("hangzhou");
        e3.selected = true;

        // 设置禁用效果
        var e4 = document.getElementById("1");
        e4.disabled = true;
    </script>
</body>

</html>

八、事件

1.说明

  1. 事件是前端触发的一些行为，当这些行为触发时，可以执行对应的代码；
  2. 三要素：
    1. 事件源：事件在哪里发生；
    2. 事件：在该事件源上发生了什么事情；
    3. 事件驱动程序：触发哪些代码，实现什么效果。
  3. 可以参考【HTML DOM 事件】，以下部分内容摘录于此。
事件

描述

属于
abort

媒体加载中止时发生该事件。

UiEvent

Event
afterprint 当页面开始打印时，或者关闭打印对话框时，发生此事件。 Event
animationend CSS 动画完成时发生此事件。 AnimationEvent
animationiteration 重复 CSS 动画时发生此事件。 AnimationEvent
animationstart CSS 动画开始时发生此事件。 AnimationEvent
beforeprint 即将打印页面时发生此事件。 Event
beforeunload

在文档即将被卸载之前发生此事件。

UiEvent

Event
blur 当元素失去焦点时发生此事件。 FocusEvent
canplay 当浏览器可以开始播放媒体时，发生此事件。 Event
canplaythrough 当浏览器可以在不停止缓冲的情况下播放媒体时发生此事件。 Event
change 当form元素的内容、选择的内容或选中的状态发生改变时，发生此事件 Event
click 当用户单击元素时发生此事件。 MouseEvent
contextmenu 当用户右键单击某个元素以打开上下文菜单时，发生此事件。 MouseEvent
copy 当用户复制元素的内容时发生此事件。 ClipboardEvent
cut 当用户剪切元素的内容时发生此事件。 ClipboardEvent
dblclick 当用户双击元素时发生此事件。 MouseEvent
drag 拖动元素时发生此事件。 DragEvent
dragend 当用户完成拖动元素后，发生此事件。 DragEvent
dragenter 当拖动的元素进入放置目标时，发生此事件。 DragEvent
dragleave 当拖动的元素离开放置目标时，发生此事件。 DragEvent
dragover 当拖动的元素位于放置目标之上时，发生此事件。 DragEvent
dragstart 当用户开始拖动元素时发生此事件。 DragEvent
drop 当将拖动的元素放置在放置目标上时，发生此事件。 DragEvent
durationchange 媒体时长改变时发生此事件。 Event
ended 在媒体播放到尽头时发生此事件。 Event
error 当加载外部文件时发生错误后，发生此事件。

ProgressEvent

UiEvent

Event
focus 在元素获得焦点时发生此事件。 FocusEvent
focusin 在元素即将获得焦点时发生此事件。 FocusEvent
focusout 在元素即将失去焦点时发生此事件。 FocusEvent
fullscreenchange 当元素以全屏模式显示时，发生此事件。 Event
fullscreenerror 当元素无法在全屏模式下显示时，发生此事件。 Event
hashchange 当 URL 的锚部分发生改变时，发生此事件。 HashChangeEvent
input 当元素获得用户输入时，发生此事件。

InputEvent

Event
invalid 当元素无效时，发生此事件。 Event
keydown 当用户正在按下键时，发生此事件。 KeyboardEvent
keypress 当用户按下键时，发生此事件。 KeyboardEvent
keyup 当用户松开键时，发生此事件。 KeyboardEvent
load 在对象已加载时，发生此事件。

UiEvent

Event
loadeddata 媒体数据加载后，发生此事件。 Event
loadedmetadata 加载元数据（比如尺寸和持续时间）时，发生此事件。 Event
loadstart 当浏览器开始查找指定的媒体时，发生此事件。 ProgressEvent
message 在通过此事件源接收消息时，发生此事件。 Event
mousedown 当用户在元素上按下鼠标按钮时，发生此事件。 MouseEvent
mouseenter 当指针移动到元素上时，发生此事件。 MouseEvent
mouseleave 当指针从元素上移出时，发生此事件。 MouseEvent
mousemove 当指针在元素上方移动时，发生此事件。 MouseEvent
mouseout 当用户将鼠标指针移出元素或其中的子元素时，发生此事件。 MouseEvent
mouseover 当指针移动到元素或其中的子元素上时，发生此事件。 MouseEvent
mouseup 当用户在元素上释放鼠标按钮时，发生此事件。 MouseEvent
mousewheel 不推荐使用。请改用 wheel 事件。 WheelEvent
offline 当浏览器开始脱机工作时，发生此事件。 Event
online 当浏览器开始在线工作时，发生此事件。 Event
open 当打开与事件源的连接时，发生此事件。 Event
pagehide 当用户离开某张网页进行导航时，发生此事件。 PageTransitionEvent
pageshow 在用户导航到某张网页时，发生此事件。 PageTransitionEvent
paste 当用户将一些内容粘贴到元素中时，发生此事件。 ClipboardEvent
pause 当媒体被用户暂停或以编程方式暂停时，发生此事件。 Event
play 当媒体已启动或不再暂停时，发生此事件。 Event
playing 在媒体被暂停或停止以缓冲后播放时，发生此事件。 Event
popstate 窗口的历史记录改变时，发生此事件。 PopStateEvent
progress 当浏览器正处于获得媒体数据的过程中时，发生此事件。 Event
ratechange 媒体播放速度改变时发生此事件。 Event
reset 重置表单时发生此事件。 Event
resize 调整文档视图的大小时发生此事件。

UiEvent

Event
scroll 滚动元素的滚动条时发生此事件。

UiEvent

Event
search 当用户在搜索字段中输入内容时，发生此事件。 Event
seeked 当用户完成移动/跳到媒体中的新位置时，发生该事件。 Event
seeking 当用户开始移动/跳到媒体中的新位置时，发生该事件。 Event
select 用户选择文本后（对于<input>和<textarea>）发生此事件

UiEvent

Event
show 当 <menu> 元素显示为上下文菜单时，发生此事件。 Event
stalled 当浏览器尝试获取媒体数据但数据不可用时，发生此事件。 Event
storage Web 存储区域更新时发生此事件。 StorageEvent
submit 在提交表单时发生此事件。 Event
suspend 当浏览器有意不获取媒体数据时，发生此事件。 Event
timeupdate 当播放位置更改时发生此事件。 Event
toggle 当用户打开或关闭 <details> 元素时，发生此事件。 Event
touchcancel 在触摸被中断时，发生此事件。 TouchEvent
touchend 当手指从触摸屏上移开时，发生此事件。 TouchEvent
touchmove 当手指在屏幕上拖动时，发生此事件。 TouchEvent
touchstart 当手指放在触摸屏上时，发生此事件。 TouchEvent
transitionend CSS 转换完成时，发生此事件。 TransitionEvent
unload 页面卸载后（对于 <body>），发生此事件。

UiEvent

Event
volumechange 当媒体的音量已更改时，发生此事件。 Event
waiting 当媒体已暂停但预期会恢复时，发生此事件。 Event
wheel 当鼠标滚轮在元素向上或向下滚动时，发生此事件。 WheelEvent

2.点击事件

<html>

<head>
    <title>Test Javascript</title>
</head>

<body>
    <p id="p">I Love You!</p>
    <input type="button" id="btn" value="click me">

    <script>
        var btn = document.getElementById("btn");
        btn.onclick = function () {
            var p = document.getElementById("p");
            p.innerText = "我爱你！";
        }
    </script>
</body>

</html>

3.焦点事件

<html>

<head>
    <title>Test Javascript</title>
</head>

<body>
    电话：<input type="tel" id="phone"><span id="phone_msg"></span>

    <script>
        var phone = document.getElementById("phone");
        phone.onclick = function () {
            var phone_msg = document.getElementById("phone_msg");
            phone_msg.innerHTML = "请输入手机号码";
        }

        phone.onblur = function () {
            var phone_msg = document.getElementById("phone_msg");
            var reg_tel = /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/;
            var flag = reg_tel.test(phone.value);
            if (flag) {
                phone_msg.innerHTML = "手机号码合法";
            } else {
                phone_msg.innerHTML = "手机号码不合法";
            }
        }
    </script>
</body>

</html>

4.改变事件

<html>

<head>
    <title>Test Javascript</title>
</head>

<body>
    爱好：<select id="hobby">
        <option value="">请选择爱好</option>
        <option value="1">旅行</option>
        <option value="2">写作</option>
        <option value="3">游泳</option>
        <option value="4">电影</option>
        <option value="5">音乐</option>
        <option value="6">摄影</option>
    </select>

    <script>
        var e1 = document.getElementById("hobby");
        e1.onchange = function () {
            alert("爱好是：" + this.value);

        }
    </script>
</body>

</html>

5.鼠标移动事件

<html>

<head>
    <title>Test Javascript</title>
    <style>
        .blue {
            color: blue;
        }

        .pink {
            color: pink;
        }
    </style>
</head>

<body>
    <div id="d" class="blue">鼠标移动事件，看我变颜色！</div>
    <script>
        var d = document.getElementById("d");

        d.onmouseover = function () {
            d.className = "pink";
        }

        d.onmouseout = function () {
            d.className = "blue";
        }
    </script>
</body>

</html>

6.页面加载事件

<html>

<head>
    <title>Test Javascript</title>
    <script>
        window.onload = function () {
            var e = document.getElementById("d");
            console.log(e);
        }
    </script>
</head>

<body>
    <div id="d">页面加载事件</div>
</body>

</html>

7.表单事件

<html>

<head>
    <title>Test Javascript</title>
</head>

<body>
    <form action="#" id="f">
        账户：<input type="text" id="name"><br>
        密码：<input type="password" id="password">
    </form>
    <button id="submit">提交</button>
    <button id="reset">重置</button>

    <script>
        var e1 = document.getElementById("f");

        var e2 = document.getElementById("submit");
        e2.onclick = function () {
            f.submit();
        };

        var e3 = document.getElementById("reset");
        e3.onclick = function () {
            f.reset();
        };
    </script>
</body>

</html>

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布