javaScripe的DOM模型

1.DOM模型

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

大白话，就是把文档中的标签，属性，文本，转换成为对象来管理。

Document 对象的理解：

第一点：Document 它管理了所有的 HTML 文档内容。

第二点：document 它是一种树结构的文档。有层级关系。

第三点：它让我们把所有的标签都对象化

第四点：我们可以通过 document 访问所有的标签对象。

2 . Document 对象中的方法

document.getElementById(elementId) : 通过标签的 id 属性查找标签 dom 对象 (优先使用)

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

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

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

3. 节点的常用属性和方法 (节点就是dom对象)

方法：

通过具体的元素节点调用

getElementsByTagName()

方法，获取当前节点的指定标签名孩子节点

appendChild( oChildNode )

方法，可以添加一个子节点，oChildNode 是要添加的孩子节点

属性：

childNodes

属性，获取当前节点的所有子节点

firstChild

属性，获取当前节点的第一个子节点

lastChild

属性，获取当前节点的最后一个子节点

parentNode

属性，获取当前节点的父节点

nextSibling

属性，获取当前节点的下一个节点

previousSibling

属性，获取当前节点的上一个节点

className

用于获取或设置标签的 class 属性值

innerHTML

属性，表示获取/设置起始标签和结束标签中的内容

innerText

属性，表示获取/设置起始标签和结束标签中的文本

4.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册提示</title>
    <script type="text/javascript">
        function onclickFun() {
            //1.获取对象
            var usernameObj = document.getElementById("username");
            //2.获取value
            var value = usernameObj.value;
            //正则(value只能用字母 , 数字及下划线组成 , 且5-12位
            var patt = /^\w{5,12}$/;
            var spanId = document.getElementById("spanId");
            if (patt.test(value)) {
                spanId.innerHTML = "√";
            } else {
                spanId.innerHTML = "×";
            }
        }
    </script>
</head>
<body>
用户名 : <input type="text" id="username" value="wzg"/>
<span id="spanId" style="color: red"></span>
<button onclick="onclickFun()">提交</button>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复选框</title>
    <script type="text/javascript">
        function checkAll() {
            //getElementsByName : 返回带有指定名称的对象集合。
            var hobbys = document.getElementsByName("hobby");
            for (var i = 0; i < hobbys.length; i++) {
                hobbys[i].checked = true;
            }
        }

        function checkNo() {
            //getElementsByName : 返回带有指定名称的对象集合。
            var hobbys = document.getElementsByName("hobby");
            for (var i = 0; i < hobbys.length; i++) {
                hobbys[i].checked = false;
            }
        }

        function checkReverse() {
            //getElementsByName : 返回带有指定名称的对象集合。
            var hobbys = document.getElementsByName("hobby");
            for (var i = 0; i < hobbys.length; i++) {
                hobbys[i].checked = !hobbys[i].checked;
            }
        }
    </script>
</head>
<body>
兴趣爱好 :
<input type="checkbox" name="hobby" value="C++">C++
<input type="checkbox" name="hobby" value="java">java
<input type="checkbox" name="hobby" value="js">js
<br/>

<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全不选</button>
<button onclick="checkReverse()">反选</button>

</body>
</html>

posted @ 2021-03-26 16:55 Anonymity_Zhang 阅读(76) 评论(0) 收藏举报

刷新页面返回顶部

javaScripe的DOM模型

公告