DOM（Document）模型

最新推荐文章于 2024-05-21 12:45:25 发布

武晓忆

最新推荐文章于 2024-05-21 12:45:25 发布

阅读量130

点赞数

文章标签：前端 javascript servlet

本文链接：https://blog.csdn.net/weixin_72786602/article/details/126306315

版权

DOM模型

概述

DOM 全称是 Document Object Model 文档对象模型
就是把文档中的标签，属性，文本，转换成为对象来管理。

Document 对象

<html>
    <head>
        <title>Title</title>
    </head>
    <body>
        <a href="https://www.bilibili.com/">一个链接</a>
        <h1>一个标题</h1>
    </body>
</html>

Document 对象的理解

1.Document 它管理了所有的 HTML 文档内容。
2.document 它是一种树结构的文档。有层级关系。
3.它让我们把所有的标签都对象化
4.我们可以通过 document 访问所有的标签对象。

如何将html标签对象化

<body> 
	<div id="div">div</div>
</body>

模拟对象化，相当于：

class Dom{
private String id; // id 属性
private String tagName; //表示标签名
private Dom parentNode; //父
private List < Dom > children; // 子结点
private String innerHTML; // 起始标签和结束标签中间的内容
}

Document 对象中的方法

document.getElementById(elementId)
通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值

document.getElementsByName(elementName)
通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值

document.getElementsByTagName(tagname)
通过标签名查找标签 dom 对象。tagname 是标签名

document.createElement( tagName)
方法，通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名

document 对象的三个查询方法使用选择

1.document 对象的三个查询方法，如果有 id 属性，优先使用 getElementById 方法来进行查询
2.如果没有 id 属性，则优先使用 getElementsByName 方法来进行查询
3.如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName

以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。

document.getElementById(elementId)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*
            需求：当用户点击了校验按钮，要获取输出框中的内容，然后验证其是否合法
            验证的规则是：必须由字母，数字，下划线组成，并且长度是5到12位
         */
        function onclickFun() {
            // 1 当我们要操作一个标签的时候，一定要先获取这个标签对象
            var usernameObj = document.getElementById("username");
            //[object HTMLInputElement] 它就是dom对象
            var usernameText = usernameObj.value;
            //如何验证字符串，符合某个规则，需要使用正则表达式技术
            var patt = /^\w{5,12}$/;
            /*
                test()方法用于测试某个字符串，是不是匹配我的规则
                匹配就返回true,不匹配就返回false
             */

            var usernameSpanObj=document.getElementById("usernameSpan");
            //innerHTML 表示起始标签和结束标签中的内容
            //innerHTML 这个属性可读，可写
            usernameSpanObj.innerHTML="满醉花堂三千客";
            // alert(usernameSpanObj.innerHTML);
            if (patt.test(usernameText)) {
                // alert("用户名合法");
                // usernameSpanObj.innerHTML="用户名合法";
                usernameSpanObj.innerHTML="<img src=\"right.png\" width=\"18\" height=\"18\">";
            } else {
                // alert("用户名不合法");
                // usernameSpanObj.innerHTML="用户名不合法";
                usernameSpanObj.innerHTML="<img src='wrong.png' width=\"18\" height=\"18\">";
            }
        }
    </script>
</head>
<body>
用户名：<input type="text" id="username" value="asd"/>
<span id="usernameSpan" style="color: red;">

</span>
<button onclick="onclickFun()">校验</button>
</body>
</html>

document.getElementsByName(elementName)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //全选
        function checkAll() {
            //让所有复选框都选中
            //document.getElementsByName();是根据指定的name属性查询返回多个标签对象集合
            //这个集合的操作跟数组一样
            //集合中每个元素都是dom对象
            //这个集合中的元素顺序是他们在html页面中从上到下的顺序
            var hobbies = document.getElementsByName("hobby");
            //checked表示复选框的选中状态，如果选中的是true，不选中是false
            //checked这个属性可读，可写
            for (var i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = true;
            }
        }

        //全不选
        function checkNo() {
            var hobbies = document.getElementsByName("hobby");
            //checked表示复选框的选中状态，如果选中的是true，不选中是false
            //checked这个属性可读，可写
            for (var i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = false;
            }
        }

        //反选
        function checkReverse() {
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = !hobbies[i].checked;
                //     if (hobbies[i].checked) {
                //         hobbies[i].checked = false;
                //     } else {
                //         hobbies[i].checked = true;
                //     }
            }
        }
    </script>
</head>
<body>
兴趣爱好：
<input type="checkbox" name="hobby" value="cpp" checked="checked">C++
<input type="checkbox" name="hobby" value="java">Java
<input type="checkbox" name="hobby" value="js">JavaScript
<br/>
<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全不选</button>
<button onclick="checkReverse()">反选</button>
</body>
</html>

document.getElementsByTagName(tagname)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload=function () {
            // alert(document.getElementById("btn01"));
        }
        //全选
        function checkAll() {
            alert(document.getElementById("btn01"));
            //document.getElementsByTagName("input");
            // 是按照指定标签名来进行查找并返回集合
            //这个集合的操作跟数组一样
            //集合中都是dom对象
            //集合中元素顺序是他们在html页面中从上到下的顺序
            var inputs = document.getElementsByTagName("input");
            // alert(inputs);
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].checked = true;
            }
        }

    </script>
</head>
<body>
兴趣爱好：
<input type="checkbox" value="cpp" checked="checked">C++
<input type="checkbox" value="java">Java
<input type="checkbox" value="js">JavaScript
<br/>
<button id="btn01" onclick="checkAll()">全选</button>

</body>
</html>

document.createElement( tagName)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload=function () {
            //现在需要我们使用js代码来创建html标签，并显示在页面上
            //标签的内容就是：<div>云想霓裳花想容</div>
            var divObj = document.createElement("div");//在内存中<div></div>

            var textNodeObj = document.createTextNode("云想霓裳花想容");//有一个文本节点对象#

            divObj.appendChild(textNodeObj);//<div>云想霓裳花想容</div>

            // divObj.innerHTML="云想霓裳花想容";//<div>云想霓裳花想容</div>，但还只是在内存中
            // body对象.appendChild(divObj);
            //添加子元素
            document.body.appendChild(divObj);
        }

    </script>
</head>
<body>

</body>
</html>

节点（标签对象）的常用属性和方法

节点就是标签对象

方法

通过具体的元素节点调用

getElementsByTagName()
获取当前节点的指定标签名子节点

appendChild( oChildNode )
可以添加一个子节点，oChildNode 是要添加的子节点

属性

childNodes 属性，获取当前节点的所有子节点
firstChild 属性，获取当前节点的第一个子节点
lastChild 属性，获取当前节点的最后一个子节点
parentNode 属性，获取当前节点的父节点
nextSibling 属性，获取当前节点的下一个节点
previousSibling 属性，获取当前节点的上一个节点
className 用于获取或设置标签的 class 属性值
innerHTML 属性，表示获取/设置起始标签和结束标签中的内容 innerText 属性，表示获取/设置起始标签和结束标签中的文本

DOM案例：

DOM查询

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>dom查询</title>
    <link rel="stylesheet" type="text/css" href="style/css.css"/>
    <script type="text/javascript">
        window.onload = function () {
            //1.查找#bj节点
            document.getElementById("btn01").onclick = function () {
                var bjObj = document.getElementById("bj");
                alert(bjObj.innerHTML);
            }
            //2.查找所有li节点
            var btn02Ele = document.getElementById("btn02");
            btn02Ele.onclick = function () {
                var lis = document.getElementsByTagName("li");
                alert(lis.length);
            };
            //3.查找name=gender的所有节点
            var btn03Ele = document.getElementById("btn03");
            btn03Ele.onclick = function () {
                var genders = document.getElementsByName("gender");
                alert(genders.length);
            };
            //4.查找#city下所有li节点
            var btn04Ele = document.getElementById("btn04");
            btn04Ele.onclick = function () {
                //1.获取id为city的节点
                //2.通过city节点.ggetElementsByTagName按标签名查子节点
                var lis = document.getElementById("city").getElementsByTagName("li");
                alert(lis.length);
            };
            //5.返回#city的所有子节点
            var btn05Ele = document.getElementById("btn05");
            btn05Ele.onclick = function () {
                //1.获取id为city的节点
                //2.通过city获取所有子节点
                alert(document.getElementById("city").childNodes.length);
            };
            //6.返回#phone的第一个子节点
            var btn06Ele = document.getElementById("btn06");
            btn06Ele.onclick = function () {
                //查询id为phone的节点
                alert(document.getElementById("phone").firstElementChild.innerHTML);
            };
            //7.返回#bj的父节点
            var btn07Ele = document.getElementById("btn07");
            btn07Ele.onclick = function () {
                //1.查询id为bj的节点
                var bjObj = document.getElementById("bj");
                //2.bj节点获取父节点
                alert(bjObj.parentNode.innerHTML);
            };
            //8.返回#android的前一个兄弟节点
            var btn08Ele = document.getElementById("btn08");
            btn08Ele.onclick = function () {
                //获取id为android的节点
                //通过android节点获取前面兄弟节点
                alert(document.getElementById("android").previousElementSibling.innerHTML);
            };
            //9.读取#username的value属性值
            var btn09Ele = document.getElementById("btn09");
            btn09Ele.onclick = function () {
                alert(document.getElementById("username").value);
            };
            //10.设置#username的value属性值
            var btn10Ele = document.getElementById("btn10");
            btn10Ele.onclick = function () {
                document.getElementById("username").value = "张三";
            };
            //11.返回#bj的文本值
            var btn11Ele = document.getElementById("btn11");
            btn11Ele.onclick = function () {
                // alert(document.getElementById("bj").innerHTML);//内容
                alert(document.getElementById("bj").innerText);//文本
            };
        };
    </script>
</head>
<body>
<div id="total">
    <div class="inner">
        <p>
            你喜欢哪个城市?
        </p>

        <ul id="city">
            <li id="bj">北京</li>
            <li>上海</li>
            <li>成都</li>
            <li>南京</li>
        </ul>

        <br>
        <br>

        <p>
            你喜欢哪款游戏?
        </p>

        <ul id="game">
            <li id="rl">LOL</li>
            <li>OverWitch</li>
            <li>APEX</li>
            <li>GTA</li>
        </ul>

        <br/>
        <br/>

        <p>
            你手机的操作系统是?
        </p>

        <ul id="phone">
            <li>IOS</li>
            <li id="android">Android</li>
            <li>Windows Phone</li>
        </ul>
    </div>

    <div class="inner">
        gender:
        <input type="radio" name="gender" value="male"/>
        Male
        <input type="radio" name="gender" value="female"/>
        Female
        <br>
        <br>
        name:
        <input type="text" name="name" id="username" value="abcde"/>
    </div>
</div>
<div id="btnList">
    <div>
        <button id="btn01">查找#bj节点</button>
    </div>
    <div>
        <button id="btn02">查找所有li节点</button>
    </div>
    <div>
        <button id="btn03">查找name=gender的所有节点</button>
    </div>
    <div>
        <button id="btn04">查找#city下所有li节点</button>
    </div>
    <div>
        <button id="btn05">返回#city的所有子节点</button>
    </div>
    <div>
        <button id="btn06">返回#phone的第一个子节点</button>
    </div>
    <div>
        <button id="btn07">返回#bj的父节点</button>
    </div>
    <div>
        <button id="btn08">返回#android的前一个兄弟节点</button>
    </div>
    <div>
        <button id="btn09">返回#username的value属性值</button>
    </div>
    <div>
        <button id="btn10">设置#username的value属性值</button>
    </div>
    <div>
        <button id="btn11">返回#bj的文本值</button>
    </div>
</div>
</body>
</html>

CSS文件：

@CHARSET "UTF-8";

body {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
}

button {
	width: 300px;
	margin-bottom: 10px;
}

#btnList {
	float:left;
}

#total{
	width: 450px;
	float:left;
}

ul{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

.inner li{
	border-style: solid;
	border-width: 1px;
	padding: 5px;
	margin: 5px;
	background-color: #99ff99;
	float:left;
}

.inner{
	width:400px;
	border-style: solid;
	border-width: 1px;
	margin-bottom: 10px;
	padding: 10px;
	float: left;
}