JavaWeb系列四: DOM 上

~ 小团子

已于 2024-08-29 09:17:19 修改

阅读量460

点赞数 11

分类专栏： JavaWeb 文章标签： javascript 前端 ajax

于 2024-08-29 09:14:36 首次发布

本文链接：https://blog.csdn.net/qq_18817831/article/details/141189463

版权

JavaWeb 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

DOM

官方文档
基本介绍
HTML DOM(文档对象模型)
document对象
- 基本说明
- document对象方法一览
应用实例1: 点击文本, 弹出窗口
应用实例2: 多选框案例
应用示例3: 图片切换案例
应用案例4: 添加小猫图片案例

官方文档

地址: https://www.w3school.com.cn/js/js_htmldom.asp

离线文档: W3School离线手册(2017.03.11版)

基本介绍

1.DOM 全称是 Document Object Model 文档对象模型;

2.就是将文档中的标签, 属性, 文本转换成对象来管理;
在这里插入图片描述

HTML DOM(文档对象模型)

1.当网页被加载时, 浏览器会创建页面的文档对象模型(Document Object Model).

2.HTML DOM 树对象[属性, 方法/函数].

在这里插入图片描述

document对象

基本说明

1.document 它管理了所有的HTML 文档内容;

2.document 它是一种树结构的文档;

3.有层级关系, 在 dom中把所有的标签都对象化;

4.通过document 可以访问所有的标签对象;

document对象方法一览

文档地址: https://www.w3school.com.cn/js/js_htmldom_document.asp

在这里插入图片描述

应用实例1: 点击文本, 弹出窗口

1.创建dom/getElementById.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementById的使用</title>
    <script type="text/javascript">
        var myH1 = function () {
            //通过id获取h1标签的dom对象, 对dom对象进行操作
            var myHeader = document.getElementById("myHeader");
            alert(myHeader);//[object HTMLHeadingElement]
            alert(myHeader.textContent);//hello, world
            alert(myHeader.innerText);//hello, world
            alert(myHeader.innerHTML);//<div>hello, world</div>
        }
        window.onload = function () {
            //通过id获取p标签的dom对象, 对dom对象进行操作
            var p1 = document.getElementById("p1");
            p1.onclick = function () {
                alert(p1);//[object HTMLParagraphElement]
                alert(p1.textContent)//hello, world
                alert(p1.innerText);//hello, world
                alert(p1.innerHTML);//<a>hello, world</a>
            }
        }
    </script>
</head>
<body>
<!--静态注册-->
<h1 id="myHeader" onclick="myH1()"><div>hello, world</div></h1>
<!--动态注册-->
<p id="p1"><a>hello, world</a></p>
</body>
</html>

应用实例2: 多选框案例

1应用实例创建dom/getElementsByName.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementsByName的使用</title>
    <script type="text/javascript">
        function selectAll() {
            //读取animations复选框的所有值
            var animations = document.getElementsByName("animations");
            //[object NodeList],是一个 NodeList 集合
            for(var i = 0; i < animations.length; i++) {
                animations[i].checked = true;
            }
        }
        function selectNone() {
            //读取animations复选框的所有值
            var animations = document.getElementsByName("animations");
            for(var i = 0; i < animations.length; i++) {
                animations[i].checked = false;
            }
        }

        function selectReverse() {
            var animations = document.getElementsByName("animations");
            for(var i = 0; i < animations.length; i++) {
                animations[i].checked = !animations[i].checked;
            }
        }
    </script>
</head>
<body>
你喜欢的动漫电影
<input type="checkbox" name="animations" value="刀剑神域">刀剑神域
<input type="checkbox" name="animations" value="一拳超人">一拳超人
<input type="checkbox" name="animations" value="鬼灭之刃">鬼灭之刃
<button onclick="selectAll()">全选</button>
<button onclick="selectNone()">全不选</button>
<button onclick="selectReverse()">反选</button>
</body>
</html>

应用示例3: 图片切换案例

1.应用案例创建dom/getElementsByTagName.html, 做到猫狗图片切换.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementsByTagName的使用</title>
    <script type="text/javascript">
        function reverseDogAndCat() {
            //[object HTMLCollection]
            var imgs = document.getElementsByTagName("img");
            var input1 = document.getElementById("input1");
            if (input1.value == "看看有多少只小猫, 切换成小狗") {
                for (var i = 0; i < imgs.length; i++) {
                    imgs[i].src = "../img/" + (i + 4) + ".png";
                }
                input1.value = "看看有多少只小狗, 切换成小猫";
            } else if (input1.value == "看看有多少只小狗, 切换成小猫") {
                for (var i = 0; i < imgs.length; i++) {
                    imgs[i].src = "../img/" + (i + 1) + ".png";
                }
                input1.value = "看看有多少只小猫, 切换成小狗";
            }
        }
    </script>
</head>
<body>
<img src="../img/1.png" width="200">
<img src="../img/2.png" width="200">
<img src="../img/3.png" width="200"><br/><br/>
<input type="button" id="input1" onclick="reverseDogAndCat()" value="看看有多少只小猫, 切换成小狗">
</body>
</html>

应用案例4: 添加小猫图片案例

1.应用案例创建dom/createElements.html,创建一只小猫, 展示在页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>createElements的使用</title>
    <script type="text/javascript">
        function addImg() {
            //[object HTMLImageElement]
            //1.在浏览器内存中 创建<img></img>, 并拿到dom对象
            var img = document.createElement("img");
            img.width = 200;//这里不要加px后缀
            img.src = "../img/1.png";
            //2.展示, 添加到 document.body
            document.body.appendChild(img);
        }
    </script>
</head>
<body>
<input type="button" onclick="addImg()" value="点击创建一个小猫咪"/>
</body>
</html>