DOM对象

最新推荐文章于 2021-07-28 08:59:53 发布

ZziQon

最新推荐文章于 2021-07-28 08:59:53 发布

阅读量1.4k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/ZziQon/article/details/117038715

版权

概念
Document Object Model：文档对象模型，将标记语言文档的各个部分封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作（核心DOM、XML DOM、HTML DOM）
Document：文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
comment：注释对象
Node：节点对象，其他5个的父对象
Document对象
创建：在HTML DOM模型中可以使用window对象来获取
方法：
getElementById()：查找具有指定的唯一 ID 的元素。
getElementsByTagName()：返回所有具有指定名称的元素节点，返回值是一个数组。
getElementsByClassName()：根据class的属性值来获取元素对象们。返回值是一个数组
getElementsByName()：根据类属性值来获取元素对象们。也是返回数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
    <input type="text" name="username">
    <script>
        //元素名字
        var divs = document.getElementsByTagName("div");
        alert(divs.length);//3
        //Class属性值
        var div_cls = document.getElementsByClassName("div2");
        alert(div_cls.length);//1
        //name属性值
        var names = document.getElementsByName("username");
        alert(names.length);//1
    </script>
</body>
</html>

创建其他DOM对象
createAttribute(name)：创建拥有指定名称的属性节点，并返回新的 Attr 对象。
createComment()：创建注释节点。
createElement()：创建元素节点。
createTextNode()：创建文本节点。

var table = document.createElement("table");

NODE对象
所有DOM对象都可以称为一个节点
方法：
appendChild() 向节点的子节点列表的结尾添加新的子节点。
removeChild() 删除（并返回）当前节点的指定子节点。
replaceChild() 用新节点替换一个子节点。
属性：
parentNode 返回节点的父节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            border: 1px solid red;
        }
        #div1{
            width: 200px;
            height: 200px;
        }
        #div2{
            width: 100px;
            height: 100px;
        }
        #div3{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">div2</div>
        div1
    </div>
    <a href="javascript:void(0)" id="del">删除子节点</a>
    <a href="javascript:void(0)" id="add">添加子节点</a>
<!--    <input type="button" value="删除子节点" id="del">-->
    <script>
        //删除子节点
        var element_a = document.getElementById("del");
        element_a.onclick = function (){
            var div1 = document.getElementById("div1");
            var div2 = document.getElementById("div2");
            div1.removeChild(div2);
        }
        //添加子节点
        var e_add = document.getElementById("add");
        e_add.onclick = function (){
            var div1 = document.getElementById("div1");
            var div3 = document.createElement("div");
            div3.setAttribute("id","div3");
            div1.appendChild(div3);
        }

        var div2 = document.getElementById("div2");
        var div1 = div2.parentNode;
        alert(div1)
        //超链接功能：
        //1.可以被点击：样式
        //2.点击后跳转到href指定的url
    </script>
</body>
</html>

ZziQon

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM对象

概念Document Object Model：文档对象模型，将标记语言文档的各个部分封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作（核心DOM、XML DOM、HTML DOM）Document：文档对象Element：元素对象Attribute：属性对象Text：文本对象comment：注释对象Node：节点对象，其他5个的父对象Document对象创建：在HTML DOM模型中可以使用window对象来获取方法：getElementById()：查找具有指定.
复制链接

扫一扫