JavaScript学习笔记：DOM模型

最新推荐文章于 2022-07-06 23:52:07 发布

Serein_Pt

最新推荐文章于 2022-07-06 23:52:07 发布

阅读量185

点赞数

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

本文链接：https://blog.csdn.net/qq_49019244/article/details/121990948

版权

JavaWeb 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

学习内容：DOM模型

文章目录

学习内容：DOM模型

DOM 全称是 Document Object Model 文档对象模型
就是把文档中的标签，属性，文本，转换成为对象来管理。
那么 它们是如何实现把标签，属性，文本转换成为对象来管理呢。

1. Document 对象的理解

第一点：Document 它管理了所有的 HTML 文档内容。
第二点：document 它是一种树结构的文档。有层级关系。
第三点：它让我们把所有的标签都对象化
第四点：我们可以通过 document 访问所有的标签对象
在这里插入图片描述

2. 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 对象的三个查询方法，如果有 id 属性，优先使用 getElementById 方法来进行查询
如果没有 id 属性，则优先使用 getElementsByName 方法来进行查询
如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName
以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。

那么 html 标签要对象化怎么办？
在这里插入图片描述
模拟对象化，相当于：

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

3. getElementById(elementId)

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" >
        /*
        * 需求：当用户点击了较验按钮，要获取输出框中的内容。然后验证其是否合法。<br/>
        * 验证的规则是：必须由字母，数字。下划线组成。并且长度是5到12位。
        * */
        function onclickFun() {
            //获取这个标签对象。
            var usernameObj = document.getElementById("username");
            //alert(usernameObj);// [object HTMLInputElement] 它就是dom对象
            //获取usernameObj对象的value值
            var usernameText = usernameObj.value;
            
            //规定用户名格式
            // 必须由字母，数字。下划线组成。并且长度是5到12位。（正则表达式）
            var patt = /^\w{5,12}$/;
            /*
            *  test()方法用于测试某个字符串，是不是匹配我的规则 ，
            *  匹配就返回true。不匹配就返回false.
            * */
            var usernameSpanObj = document.getElementById("usernameSpan");
            // innerHTML 这个属性可读，可写
            if (patt.test(usernameText)) {
                 usernameSpanObj.innerHTML = "用户名合法！";
            } else {
                 usernameSpanObj.innerHTML = "用户名不合法！";
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username" value="wzg"/>
    <span id="usernameSpan" style="color:red;"></span>
    <button onclick="onclickFun()">较验</button>
</body>
</html>

在这里插入图片描述

4. getElementsByName(elementName)

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

<!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");
            //java里面的int i=0，但是js里面不能这样写
            for (var i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = !hobbies[i].checked;
            }
        }
    </script>
</head>
<body>
    兴趣爱好：
    <input type="checkbox" name="hobby" value="cpp">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>

在这里插入图片描述

5. getElementsByTagName(tagname)

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

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

6. createElement( tagName)

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            // 现在需要我们使用js代码来创建html标签，并显示在页面上
            // 标签的内容就是：<div>Serein</div>
            var divObj = document.createElement("div"); // 在内存中 <div></div>
            var textNodeObj = document.createTextNode("Serein"); // 有一个文本节点对象 #Serein
            divObj.appendChild(textNodeObj); // <div>Serein</div>
            // divObj.innerHTML = "Serein"; // <div>Serein</div>,但，还只是在内存中
            // 添加子元素
            document.body.appendChild(divObj);
        }
    </script>
</head>
<body>
</body>
</html>

Serein_Pt

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记：DOM模型

学习内容：DOM模型DOM 全称是 Document Object Model 文档对象模型就是把文档中的标签，属性，文本，转换成为对象来管理。那么它们是如何实现把标签，属性，文本转换成为对象来管理呢。1. Document 对象的理解第一点：Document 它管理了所有的 HTML 文档内容。第二点：document 它是一种树结构的文档。有层级关系。第三点：它让我们把所有的标签都对象化第四点：我们可以通过 document 访问所有的标签对象2. Document 对象中的
复制链接

扫一扫