DOM模型

文章目录

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

就是把文档中的标签,属性,文本,转型成为对象来管理

Document对象

JavaScript-04DOM模型_css

Document对象的理解

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

HTML标签要对象化

<body>
  <div id="div01">div01</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 对象的三个查询方法,有id,优先使用getElementById 方法来进行查询

没有 id 属性，则优先使用 getElementsByName 方法来进行查询

最后使用按标签名查 getElementsByTagName

一定要在页面加载完成之后执行,才能查询到标签对象

getElementById 方法示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*
        需求: 当用户点击校验按钮时.要获取输出框中的类容,然后验证其是否合法
        验证的规则是: 必须由字母 数字 下划线组成   并且长度为5 到 12 位
         */
        function onclickFun() {
            //1. 当我们操作一个标签的时候, 一定要先获取这个标签对象
            let usernameObj = document.getElementById("username");
            //[object HTMLInputElement]   为dom对象
            var usernameText = usernameObj.value;

            // 验证的规则是: 必须由字母 数字 下划线组成   并且长度为5 到 12 位
            var patt = /^\w{5,12}$/;

            let usernameSpanObj = document.getElementById("usernameSpan");
            //innerHtml 表示起始标签和结束标签中 的内容
            // innerHTML 这个属可读 可写
            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>

<!--value="wzg"  初始内容-->
用户名:<input type="text" id="username" value="wzg">
<span id="usernameSpan" style="...">

</span>

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

</body>
</html>

getElementsByName 方法示例代码,全选,全不选,反选

<!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 elementsByName = document.getElementsByName("hobby");
            for (var i = 0; i < elementsByName.length; i++) {
                elementsByName[i].checked = true;
            }
        }

        //全不选
        function checkNo() {
            var elementsByName = document.getElementsByName("hobby");
            for (var i = 0; i < elementsByName.length; i++) {
                elementsByName[i].checked = false;
            }
        }


        //反选
        function checkReverse() {
            var elementsByName = document.getElementsByName("hobby");
            for (var i = 0; i < elementsByName.length; i++) {
                elementsByName[i].checked = !elementsByName[i].checked;
            }
        }

    </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>

getElementsByTagName方法示例代码：

<!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 elementsByTagName = document.getElementsByTagName("input");
            for (var i = 0; i <elementsByTagName.length ; i++) {
                elementsByTagName[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>

createElement方法示例代码

<!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>,
            // 添加子元素
            document.body.appendChild(divObj)
        }
    </script>
</head>
<body>

</body>
</html>