JS中DOM和BOM

已于 2024-11-02 21:13:15 修改
阅读量889 收藏 12
点赞数 21
CC 4.0 BY-SA版权
文章标签： javascript 开发语言 ecmascript
于 2024-10-31 21:09:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56101688/article/details/143414874

DOM

DOM（文档对象模型）是一个跨平台和语言独立的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。在网页浏览器中，DOM 通常表示 HTML 或 XML 文档的对象模型。DOM 将网页内容视为节点树，其中每个节点都是文档中的对象，例如元素、属性、文本等。

以下是 DOM 的一些关键点：

  • 文档：在 Web 浏览器中，文档通常是指网页，即 HTML 或 XML 文件。

  • 对象模型：对象模型是将文档内容表示为对象集合的一种方式，这些对象可以由程序代码进行操作。

  • 节点树：DOM 将文档结构表示为节点树，树中的每个节点代表文档的一部分。例如，HTML 文档中的每个元素、属性和文本都是节点。

  • 编程接口：DOM 提供了一组方法（函数）和属性（变量），允许开发人员通过 JavaScript（或其他支持的语言）操作文档。

 DOM中的节点类型

在 DOM（文档对象模型）中，节点类型是通过 nodeType 属性来区分的，每个节点类型都有一个对应的常量值。以下是一些主要的 DOM 节点类型及其对应的常量值：

  1. 元素节点（Element Node）

    • 常量值：Node.ELEMENT_NODE
    • 整数值：1
    • 示例：<div>, <p>, <a>

  2. 属性节点（Attribute Node）

    • 常量值：Node.ATTRIBUTE_NODE
    • 整数值：2
    • 示例：href in <a href="http://example.com">

  3. 文本节点（Text Node）

    • 常量值：Node.TEXT_NODE
    • 整数值：3
    • 示例：文本内容 “Hello, World!” in <p>Hello, World!</p>

  4. CDATA 节点（CDATASection Node）

    • 常量值：Node.CDATA_SECTION_NODE
    • 整数值：4
    • 示例：<![CDATA[...]]> in XML documents

  5. 实体引用节点（EntityReference Node）

    • 常量值：Node.ENTITY_REFERENCE_NODE
    • 整数值：5
    • 注：在 HTML DOM 中不常用

  6. 实体节点（Entity Node）

    • 常量值：Node.ENTITY_NODE
    • 整数值：6
    • 注：在 HTML DOM 中不常用

  7. 处理指令节点（ProcessingInstruction Node）

    • 常量值：Node.PROCESSING_INSTRUCTION_NODE
    • 整数值：7
    • 示例：处理指令，常用于 XML

  8. 注释节点（Comment Node）

    • 常量值：Node.COMMENT_NODE
    • 整数值：8
    • 示例：<!-- This is a comment -->

  9. 文档节点（Document Node）

    • 常量值：Node.DOCUMENT_NODE
    • 整数值：9
    • 示例：整个 HTML 或 XML 文档

  10. 文档类型节点（DocumentType Node）

    • 常量值：Node.DOCUMENT_TYPE_NODE
    • 整数值：10
    • 示例：<!DOCTYPE html>

  11. 文档片段节点（DocumentFragment Node）

    • 常量值：Node.DOCUMENT_FRAGMENT_NODE
    • 整数值：11
    • 示例：轻量级的文档对象，可以包含多个元素而不影响文档结构

  12. 符号节点（Notation Node）

    • 常量值：Node.NOTATION_NODE
    • 整数值：12
    • 注：在 HTML DOM 中不常用

一、节点的创建、移除和克隆

1.如何改变元素节点中的内容

改变元素节点中的内容可以使用两个相关属性：innerHTML、innerText。innerHTML属性能以HTML形式设置节点中的内容；innerText系统属性只能以纯文本的形式设置节点中的内容。

2.创建节点

想要两步，第一步使用document.createElement()创建节点，第二步再上树，上树有两种情况，如果是在添加在最后，那就使用appendChild()；如果不是，使用insertBefore。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box">
        <p>我是原本的段落0</p>
        <p>我是原本的段落1</p>
        <p>我是原本的段落2</p>
    </div>
    <script>
        var oBox = document.getElementById('box');
        var oPs = oBox.getElementsByTagName('p');

        // 创建孤儿节点
        var oP = document.createElement('p');
        // 设置内部文字
        oP.innerText = '我是新来的';
        
        // 上树
        // oBox.appendChild(oP);
        oBox.insertBefore(oP, oPs[0]);
    </script>
</body>

</html>

创建出一个20行12列的表格

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        td {
            width: 20px;
            height: 20px;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <table id="mytable"></table>

    <script>
        // 请动态创建出一个20行12列的表格
        var mytable = document.getElementById('mytable');

        for (var i = 0; i < 20; i++) {
            // 创建了新的tr标签
            var tr = document.createElement('tr');
            for (var j = 0; j < 12; j++) {
                // 创建了新的td标签
                var td = document.createElement('td');
                // 让tr追加td标签
                tr.appendChild(td);
            }
            // 让mytable追加tr标签
            mytable.appendChild(tr);
        }
    </script>
</body>

</html>

创建9*9乘法表

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        td {
            width: 120px;
            height: 30px;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <table id="mytable"></table>

    <script>
        // 请创建九九乘法表
        var mytable = document.getElementById('mytable');

        for (var i = 1; i <= 9; i++) {
            // 创建了新的tr标签
            var tr = document.createElement('tr');
            for (var j = 1; j <= i; j++) {
                // 创建了新的td标签
                var td = document.createElement('td');
                // 设置td内部的文字
                td.innerText = i + '乘' + j + '等于' + (i * j);
                // 让tr追加td标签
                tr.appendChild(td);
            }
            // 让mytable追加tr标签
            mytable.appendChild(tr);
        }
    </script>
</body>

</html>

 3.移动节点

如果将已经挂载到DOM树上的节点成为appendChild()或者insertBefore()的参数，这个节点将被移动。新父节点.appendChild(已经有父亲的节点)；新父节点.insertBefore(已经有父亲的节点，标杆子节点)；这意味着一个节点不能同时位于DOM树的两个位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box1">
        <p id="para">我是段落</p>
    </div>

    <div id="box2">
        <p>我是box2的原有p标签</p>
        <p>我是box2的原有p标签</p>
        <p>我是box2的原有p标签</p>
        <p>我是box2的原有p标签</p>
    </div>

    <script>
        var box1 = document.getElementById('box1');
        var box2 = document.getElementById('box2');
        var para = document.getElementById('para');
        var ps_inbox2 = box2.getElementsByTagName('p');

        // box2.appendChild(para);
        box2.insertBefore(para, ps_inbox2[0]);
    </script>
</body>
</html>

4.删除节点

removeChild()方法从DOM中删除一个字节点 父节点.removeChild(要删除子节点);子节点不能主动删除自己，必须由父节点删除它。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <p>我是p节点0</p>
        <p>我是p节点1</p>
        <p>我是p节点2</p>
    </div>

    <script>
        var box = document.getElementById('box');
        var the_first_p = box.getElementsByTagName('p')[0];

        box.removeChild(the_first_p);
    </script>
</body>
</html>

5.克隆节点

cloneNode()方法可以克隆节点，克隆出的节点上“孤儿节点”。

var 孤儿节点=老节点.cloneNode();

var 孤儿节点=老节点.cloneNode(true);

参数是一个布尔值，表示是否采用深度克隆；如果为true，则该节点的所有后代节点也都会被克隆，如果为false，则只克隆该节点本身。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box1">
        <ul>
            <li>牛奶</li>
            <li>咖啡</li>
            <li>可乐</li>
        </ul>
    </div>

    <div id="box2"></div>

    <script>
        var box1 = document.getElementById('box1');
        var box2 = document.getElementById('box2');
        var theul = box1.getElementsByTagName('ul')[0];

        // 克隆节点
        var new_ul = theul.cloneNode(true);
        box2.appendChild(new_ul);
    </script>
</body>
</html>

6.JS修改样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div class="box" id="box">
        你好
    </div>

    <script>
        var oBox = document.getElementById('box');

        // oBox.style.backgroundColor = 'rgb(100, 200, 123)';
        // oBox.style.backgroundColor = '#f80';

        // oBox.style.backgroundImage = 'url(https://www.imooc.com/static/img/index/logo-recommended.png)';
        // oBox.style.backgroundSize = 'contain';

        oBox.style.fontSize = '50px';
    </script>
</body>
</html>

 7.nodeType常用属性值

8.访问元素节点

注意：如果有多个id相同的元素 只能找到第一个。 无论id多深，都能找到。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="box1">我是盒子1</div>
    <div id="box2">我是盒子2</div>

    <script>
        
            // 得到盒子1
            var box1 = document.getElementById('box1');
            // 得到盒子2
            var box2 = document.getElementById('box2');

            console.log(box1);
            console.log(box2);
        
    </script>
</body>

</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box1">
        <p>我是段落</p>
        <p>我是段落</p>
        <p>我是段落</p>
        <p>我是段落</p>
    </div>
    <div id="box2">
        <p>我是段落</p>
        <p>我是段落</p>
        <p>我是段落</p>
        <p>我是段落</p>
    </div>
   
    <script>
        // 先得到box1
        var box1 = document.getElementById('box1');
        // 得到box1中的p标签的数组
        var ps_inbox1 = box1.getElementsByTagName('p');

        console.log(ps_inbox1);
    </script>
</body>
</html>

9.延迟运行

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 给window对象添加onload事件监听。onload表示页面都加载完毕了。
        window.onload = function () {
            // 得到盒子1
            var box1 = document.getElementById('box1');
            // 得到盒子2
            var box2 = document.getElementById('box2');

            console.log(box1);
            console.log(box2);
        };
    </script>
</head>

<body>
    <div id="box1">我是盒子1</div>
    <div id="box2">我是盒子2</div>
</body>

</html>

 10.querySelector()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <p>我是段落</p>
        <p class="spec para">我是段落</p>
        <p>我是段落</p>
    </div>
    <script>
        var the_p = document.querySelector('#box p:nth-child(1)');
        console.log(the_p);
        
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="list1">
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <ul id="list2">
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <script>
        var lis_inlist1 = document.querySelectorAll('#list1 li');

        console.log(lis_inlist1);
    </script>
</body>
</html>

11.节点的关系

 

最低0.47元/天 解锁文章

200万优质内容无限畅学
Super XX.
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值