DOM学习总结

lanzha

已于 2022-08-26 12:09:28 修改

阅读量392

点赞数 1

分类专栏： html javascript 文章标签： html5 javascript

于 2022-08-26 12:05:38 首次发布

本文链接：https://blog.csdn.net/lanzha/article/details/126534040

版权

html 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

javascript

1 篇文章 0 订阅

订阅专栏

y提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

学习目标

一、DOM树

文档对象模型DOM

二、创建、增、删、改、查、以及属性与事件的操作

1.熟悉DOM树

2.使用DOM中的接口实现：创建、增、删、改、查、以及属性与事件的操作

一、DOM树

文档对象模型DOM

首先 DOM 称为：文档对象模型 （document object Model 简称DOM）通过在内存中表示文档的结构（如表示网页的 HTML），将网页连接到脚本或编程语言。通常它指的是JavaScript，即使将HTML，SVG或XML文档建模为对象不是核心JavaScript语言的一部分。

其次要清楚几个关键词：

1.文档：一个页就是一个文档，Dom中使用 document来表示;

2.元素：页面中的所有标签都是元素，DOM中使用element来表示

3.节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node来表示

下面用一个图来展示：

最核心的一点是DOM将以上的内容都看成是一个对象可以对内容样式一些列进行操作。

二、创建、增、删、改、查、以及属性与事件的操作

1.创建：

1.document.write()

document.write() 是直接将内容写入页面的内部，但是文档执行完毕，会导致页面全部重置，就好比你事儿都干完了（页面加载完毕），结果document。write()以来说，滚犊子，用我这个；所以不建议使用；

<body>
    <div>篮战</div>
    <button>点他</button>
//js开始
   <script>
        //获取页面中的button元素
        var dt = document.querySelector('button');
        //设置一个点击事件，当点击之后页面的内容会被write()里的内容覆盖，妥妥的恶霸
        dt.onclick = function () {
            document.write('菜的一皮');

        }

    </script>
//js开始结束
</body>

2.innerHTML

如下：前提div里没有内容，否则div里的内容会被覆盖，特点在创建100条元素时采用拼接字符串的时候运行效率是四位数（毫秒），但采用数组的方式，则效率是个位数（毫秒），使用数组的时候结构稍微复杂一些总结一句话：这个有点东西，厉害，推荐使用

<body>
    <div></div>
    <script>
        // 首先获取上面创建的div元素
        var div = document.querySelector('div');
        //往div里添加元素
        div.innerHTML = '<a href="javascrept:;">德玛西亚</a>'
    </script>
</body>

3.createElement

创建多个元素时，在创建100条元素时，createElemet的时间是2位（毫秒），虽然比不上上面的innerHTML，但咱结构简单啊对吧，简单点说话的方式简单点~。

   <script>
        //获取div元素
        var div = document.querySelector('div');
        //1创建元素
        var a = document.createElement('a')
        //2往a里添加内容
        a.innerHTML = '太帅了';
        //3.为div追加孩子a标签
        div.appendChild(a);
    </script>

创建小结：

1.document.write()

会导致页面的覆盖重置，不推荐使用

2.innerHTML()

可以标签与内容一起追加，在创建大量的元素节点时，效率高，缺点就是结构有些复杂

3.createElement()

结构简单，效率中规中矩，缺点是需要先创建后元素后，在使用innerHTML来追加元素，在通过appenChild（）来追加元素，有点麻烦。

2.追加

appendChild()

父元素的后面追加；

insertBefore()

在指定的父元素的孩子的前面追加，写法 node.insertBefore(追加的元素,父节点的孩子）；

<body>
    <ul></ul>
    <script>
        // 获取页面ul元素
        var ul = document.querySelector('ul');
        // 创建li元素
        var li = document.createElement('li');
        var li1 = document.createElement('li');
        //追加内容
        li.innerHTML = '1';
        li1.innerHTML = '2';
        // 为了效果我们将1添加到后面，将2添加到前面
        ul.appendChild(li); //追加到父元素的最后面
        ul.insertBefore(li1, ul.children[0]); //在指定的父元素的孩子的前面追加
    </script>
</body>

3.删除

removeChild()

直译就是删除孩子，写法node.removeChild(node.childer);

例子ul.removeChild(ul.children[i]);

这是个有趣的例子~

<body>
    <input type="text" placeholder="命运只能选择一次">
    <button>毁灭吧</button>
    <ul>
        <li>0.你</li>
        <li>1.我</li>
        <li>2.桃之助</li>
    </ul>
    <script>
        //获取元素按钮元素，并添加单击事件
        var bttn = document.querySelector('button');
        // 获取input元素，用于接收用户输入
        var inp = document.querySelector('input');
        //获取页面的ul元素
        var ul = document.querySelector('ul');
        // 命运只能选择一次 否则就会出bug（手动狗头）
        //删一次，li的数量就会发生变化，对应俗称li的下标值也会发送变化。懒得改了
        //出bug F5刷新一下就好了
        bttn.onclick = function () {
            // 获取用户输入的变化
            var i = inp.value;
            if (i == 0 || i == 1 || i == 2) {
                ul.removeChild(ul.children[i]);
            }
            else {
                alert('毁灭吧世界');
            }
        }
    </script>
</body>

4.修改

主要体现在以下几点：

1.修改元素的属性：src、href、title 可直接通过赋值的方式修改

2.修改普通元素的内容：innerHTML、innerText

3.修改表单元素：value、type、disabled等

4.修改元素样式:style、className style修改单个属性，className通过类属性选择器来修改属性

5.查

1.DOM提供的API

getElementByid ()返回一个匹配特定 ID的元素。由于元素的 ID 在大部分情况下要求是独一无二的，这个方法自然而然地成为了一个高效查找特定元素的方法。

语法

getElementsByTagName(）返回一个包括所有给定标签名称的元素的 HTML 集合HTMLCollection。整个文件结构都会被搜索，包括根节点。返回的是动态的，意味着它可以自动更新自己来保持和 DOM 树的同步而不用再次调用。HTML 集合document.getElementsByTagName()

语法：var elements = document.getElementsByTagName(name);

2.H5提供的方法

querySelecter(获取一个元素),querySelectorALL(获取全部)

3.利用节点操作获取元素

parentNode,childern,previousElementSlibing(兄弟)，netElementSibing(下一个兄弟节点)

6.属性的操作

1.setAttrbute

设置指定元素上的属性值。如果属性已存在，则更新该值;否则，将添加具有指定名称和值的新属性。语法 node.setAttrbute(属性名，属性值);

2.getattrbute

获取指定元素上的属性值，语法 node.getAttrbute(属性名称);

3.removeAttrbute

设置指定元素上的属性值，语法node.removeAttrbute(属性名称)；

<body>
    <div id="div1">Hi Champ!</div>
    <script>
        //获取元素
        const div1 = document.getElementById('div1');

        // 设置指定元素的属性值
        const name = div1.setAttribute('name', '张三');

        //获取指定元素的属性值
        const exampleAttr = div1.getAttribute('id');

        //删除指定元素的属性值
        const remove = div1.removeAttribute('id');
    </script>
</body>