2021-11-17 JS DOM模型

最新推荐文章于 2024-07-05 16:41:23 发布

kkzz1x

最新推荐文章于 2024-07-05 16:41:23 发布

阅读量229

点赞数

分类专栏： web 文章标签： javascript

本文链接：https://blog.csdn.net/qq_39679772/article/details/121375907

版权

web 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、DOM模型

全称是document object model 文档对象模型

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

请添加图片描述
Document对象的理解

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

二、获取document对象的方法

document. …

getElementById 返回对拥有指定id的第一个对象的引用
getElementByName 返回带有指定名称的对象集合
getElementByTagName 返回带有指定标签名的对象集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementByIdTest</title>
    <script type="text/javascript">
        /**
         * 当用户点击校验按钮，要获取输出框中的内容，然后验证其是否合法
         * 规则：字母、数字、下划线组成，长度5-12
         * **/
        function onclickFun() {
            var usernameObj=document.getElementById("username");
            //alert(usernameObj.value)
            var valueText=usernameObj.value;
            var patt=/^\w{5,12}$/;
            var usernameSpan=document.getElementById("usernmeSpan");
            //test()方法用于测试某个字符串，是否匹配规则，匹配就返回true
            if(patt.test(valueText))
            {
                usernameSpan.innerText="合法";
                alert("用户名合法");
            }
            else
            {
                //usernameSpan.innerText="不合法";
                alert("用户名不合法");
                usernameSpan.innerHTML="<img src=\"wrong.png\" width=\"18\" height=\"18\">";//不合法时显示的图片
            }



        }

    </script>
</head>
<body>
用户名: <input type="text" id="username" value="123"/>
<span id="usernmeSpan" style="color: red;">
    <img src="1.png" width="12" height="12">
</span>
<button onclick="onclickFun()">校验</button>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementByNameTest</title>
    <script type="text/javascript">
        function checkAll() {
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = true;


            }
        }

        function checkNo() {
            var hobbies=document.getElementsByName("hobby");
            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++)
            {
                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="c#"/> c#
<br/>
<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全不选</button>
<button onclick="checkReverse()">反选</button>
</body>
</html>

三、对象查询注意事项

查询对象的位置

window.onload=function () {
            alert(document.getElementById("btn01"));

        }
        
        //alert(document.getElementById("btn01")) 单这样不行，因为代码是按照顺序执行的

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

dom还可以创建html标签，并显示在页面上

var divObj=document.createElement("div");
divObj.innerHTML="内容";
document.body.appendChild(divObj);

或者这样

var divObj=document.createElement("div");
var textNodeObj=document.createTextNode("文本内容");
divObj.appendChild(textNodeObj);

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

获取了一个object，这个object有方法和属性
方法
getElementByTagName() 获取当前节点的指定标签名孩子结点

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

属性

childNode 获取当前节点所有子节点
firstChild
lastChild
nextSibling
innerHTML 获取/设置起始标签和结束标签中的内容
innerText 获取/设置起始标签和结束标签中的文本

kkzz1x

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-11-17 JS DOM模型

一、DOM模型全称是document object model 文档对象模型就是将文档中的标签，属性，文本转换成为对象来管理。Document对象的理解Document它管理了所有的html文档内容document它是一种树结构的文档，有层级关系它让我们把所有的标签都对象化我们可以通过document访问所有的标签对象二、获取document对象的方法document. …getElementById 返回对拥有指定id的第一个对象的引用getElementByName 返回带
复制链接

扫一扫