学习笔记整理-DOM-01-基础知识

news2024/11/24 13:04:07

一、DOM基本概念

1. DOM基本概念

  • DOM是JS操控HTML和CSS的桥梁。
  • DOM是JS操作HTML变得优雅。
  • DOM(Document Object Model，文档对象模型)是JavaScript操作HTML文档的接口，使文档操作变得非常优雅、简便。
  • DOM最大的特点就是将文档表示为节点树。

dom-tree

  • 节点的nodeType属性可以显示这个节点具体的类型。
    nodeType值节点类型
    1元素节点，例如<p>和<div>
    3文字节点
    8注释节点
    9document节点
    10DTD节点

二、节点访问和位置关系

1. 访问元素节点

  • 所谓"访问"元素节点，就是指"得到"、"获取"页面上的元素节点。
  • 对节点进行操作，第一步就是要得到它。
  • 访问元素节点主要依靠document对象。

  • 认识document对象

    • document对象是DOM中最重要的东西，几乎所有DOM的功能都封装在了document对象中.
    • document对象也表示整个HTML文档，它是DOM节点树的根。
    • document对象的nodeType属性值是9。

  • 访问元素节点的常用方法

    方法功能兼容性
    document.getElementById()通过id得到元素IE6
    document.getElementByTagName()通过标签名得到元素数组IE6
    document.getElementByClassName()通过类名得到元素数组IE9
    document.querySelector()通过选择器得到元素IE8部分兼容 IE9完全兼容
    document.querySelectorAll()通过选择器得到元素数组IE8部分兼容 IE9完全兼容

  • document.getElementById()功能是通过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>
    <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>
    • 参数就是元素节点的id，注意不要写#号
    • 通常JS代码一定要写到HTML节点的后面，否则JS无法找到相应HTML节点。
    • 可以使用window.onload = function(){}事件，使页面加载完毕后，再执行指定的代码。
    • 如果页面上有相同id的元素，则只能得到第一个
    • 不管元素藏的位置有多深，都能通过id把它找到。

  • document.getElementByTagName()功能是通过标签名得到节点数组。

    <!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>
    • 数组方便遍历，从而可以批量操控元素节点
    • 即使页面只有一个指定标签名的节点，也将得到长度为1的数组
    • 任何一个节点元素也可以调用getElementsByTagName()方法，从而得到其内部的某种类的元素节点。

  • document.getElementByClassName()功能是通过类名得到节点数组

    <!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 class="spec">
        <p>我是段落</p>
        <p>我是段落</p>
        <p>我是段落</p>
        <p>我是段落</p>
    </div>
    <div class="spec">
        <p>我是段落</p>
        <p>我是段落</p>
        <p>我是段落</p>
        <p>我是段落</p>
    </div>

    <script>
        // box
        var box = document.getElementsByClassName('spec');
        console.log(box);
    </script>
</body>
</html>
    • 注意不要写.号
    • document.getElementByClassName()方法从IE9开始兼容。
    • 某个节点元素也可以调用document.getElementByClassName()方法，从而得到其他内部的某类名的元素节点。

  • 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="box1">
        <p class="spec">我是段落</p>
        <p>我是段落</p>
        <p>我是段落</p>
        <p>我是段落</p>
    </div>

    <script>
        var p = document.querySelector('#box1 .spec');
        console.log(p);
    </script>
</body>
</html>
    • querySelector()方法只能得到页面上一个元素，如果有多个元素符合条件，则只能得到第一个元素。
    • querySelector()方法从IE8开始兼容，但从IE9开始支持CSS3的选择器，但从IE9开始支持CSS3的选择器，
      如：nth-child()、:[src^='dog']等CSS3选择器形式都支持良好。

  • querySelectorAll()方法的功能是通过选择器得到元素数组。

    • 即使页面上只有一个符合选择器的节点，也将得到长度为1的数组

2. 节点的关系

关系考虑所有节点
子节点childNodes
父节点parentNodes
第一个子节点fristChild
最后一个子节点lastChild
前一个兄弟节点previousSibling
后一个兄弟节点nextSibling

node

  • DOM中，文本节点也属于节点，在使用节点的关系时一定要注意

  • 在标准的W3C规范中，空白文本节点也应该算作节点，但是在IE8及以前的浏览器会有一定的兼容问题，它们不把空白文本节点当做节点。

  • 排除文本节点的干扰，从IE9开始支持一些"只考虑元素节点"的属性

    关系考虑所有节点只考虑元素节点
    子节点childNodeschildren
    父节点parentNodeschildren
    第一个子节点fristChildfristElementChild
    最后一个子节点lastChildlastElementChild
    前一个兄弟节点previousSiblingpreviousElementSibling
    后一个兄弟节点nextSiblingnextElementSibling
    <!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>我是段落A</p>
        <p id="para">我是段落B</p>
        <p>我是段落C</p>
    </div>

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

        // 所有子节点
        console.log(box.childNodes);
        // 所有的元素子节点（IE9开始兼容）
        console.log(box.children);
        
        // 第一个子节点
        console.log(box.firstChild);
        console.log(box.firstChild.nodeType);
        // 第一个元素子节点（IE9开始兼容）
        console.log(box.firstElementChild);
        
        // 最后一个子节点
        console.log(box.lastChild);
        console.log(box.lastChild.nodeType);
        // 最后一个元素子节点（IE9开始兼容）
        console.log(box.lastElementChild);

        // 父节点
        console.log(para.parentNode);
        
        // 前一个兄弟节点
        console.log(para.previousSibling);
        // 前一个元素兄弟节点（IE9开始兼容）
        console.log(para.previousElementSibling);
        
        // 后一个兄弟节点
        console.log(para.nextSibling);
        // 后一个元素兄弟节点（IE9开始兼容）
        console.log(para.nextElementSibling);
    </script>
</body>
</html>

  • IE6也能兼容的"寻找所有元素子节点"函数

  • IE6也能兼容的"寻找前一个元素兄弟节点"函数

  • 获取某元素的所有兄弟节点

    <!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>我是段落</p>
        <p>我是段落</p>
        <p id="fpara">我是段落fpara</p>
        我是文本
        <!-- 我是注释 -->
        <p id="para">
            我是段落para
            <span>1</span>
            <span>2</span>
            <span>3</span>
        </p>
        <p>我是段落</p>
        <p>我是段落</p>
        <p>我是段落</p>
    </div>

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

        // 封装一个函数，这个函数可以返回元素的所有子元素节点（兼容到IE6），类似children的功能
        function getChildren(node) {
            // 结果数组
            var children = [];
            // 遍历node这个节点的所有子节点，判断每一个子节点的nodeType属性是不是1
            // 如果是1，就推入结果数组
            for (var i = 0; i < node.childNodes.length; i++) {
                if (node.childNodes[i].nodeType == 1) {
                    children.push(node.childNodes[i]);
                }
            }
            return children;
        }

        console.log(getChildren(box));
        console.log(getChildren(para));

        // 封装一个函数，这个函数可以返回元素的前一个元素兄弟节点（兼容到IE6），类似previousElementSibling的功能
        function getElementPrevSibling(node) {
            var o = node;
            // 使用while语句
            while (o.previousSibling != null) {
                if (o.previousSibling.nodeType == 1) {
                    // 结束循环，找到了
                    return o.previousSibling;
                }

                // 让o成为它的前一个节点，就有点“递归”的感觉
                o = o.previousSibling;
            }
            return null;
        }

        console.log(getElementPrevSibling(para));
        console.log(getElementPrevSibling(fpara));

        // 封装第三个函数，这个函数可以返回元素的所有元素兄弟节点
        function getAllElementSibling(node) {
            // 前面的元素兄弟节点
            var prevs = [];
            // 后面的元素兄弟节点
            var nexts = [];
            
            var o = node;
            // 遍历node的前面的节点
            while(o.previousSibling != null) {
                if(o.previousSibling.nodeType == 1){
                    prevs.unshift(o.previousSibling);
                }
                o = o.previousSibling;
            }

            o = node;

            // 遍历node的后面的节点
            while(o.nextSibling != null) {
                if(o.nextSibling.nodeType == 1){
                    nexts.push(o.nextSibling);
                }
                o = o.nextSibling;
            }

            // 将两个数组进行合并，然后返回
            return prevs.concat(nexts);
        }

        console.log(getAllElementSibling(para));
    </script>
</body>

</html>

三、节点操作

1. 节点操作

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

    • 改变元素节点中的内容可以使用两个相关的属性：
      • innerHTML
      • innerText
    • innerHTML属性能以HTML语法设置节点中的内容。
    • innerText属性只能以单纯文本的形式设置节点中的内容。
      <!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"></div>

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

        oBox.innerHTML = '张三';
        oBox.innerHTML = '<ul><li>牛奶</li><li>咖啡</li></ul>';

    </script>
</body>
</html>

  • 如何改变元素节点的CSS样式

    • 改变元素节点的CSS样式需要使用这样的语句
      <!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>

  • 如何改变元素节点的HTML属性

    • 标准W3C属性，如src、href等等，只需要直接打点进行更改即可

    • 不符合W3C标准的属性，要使用setAttribute()和getAttribute()来设置、读取

      <!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>
    <img src="images/1.jpg" id="pic">
    <a href="http://www.baidu.com" id="link">
        去百度
    </a>

    <script>
        var oPic = document.getElementById('pic');
        var oLink = document.getElementById('link');

        oPic.src = 'images/2.jpg';

        oLink.href = 'http://www.baidu.com';
        oLink.innerText = '去百度';
    </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="box"></div>

    <script>
        var box = document.getElementById('box');
        box.setAttribute('data-n', 10);
        
        var n = box.getAttribute('data-n');
        alert(n);
    </script>
</body>
</html>

2. 节点创建

  • document.createElement()方法用于创建一个指定tagName的HTML元素

  • 孤儿节点

    • 新创建的节点是"孤儿节点"，这意味着它并没有被挂载到DOM树上，我们无法看到它。
    • 必须继续使用appendChild()或者insertBefore()方法将孤儿节点插入到DOM树上。

  • appendChild()方法

    • 任何已经在DOM树上的节点，都可以调用appendChild()方法，它可以将孤儿节点挂载到它的内部，成为它的最后一个子节点

  • insertBefore()方法

    • 任何已经在DOM树上的节点，都可以调用insertBefore()方法，它可以将孤儿节点挂载到它的内部，成为它的"标杆子节点"之前的节点

3. 移动节点

  • 如果将已经挂载到DOM树上的节点成为appendChild()或者insertBefore()的参数，这个节点将会被移动
  • 这意味着一个节点不能同时位于DOM树的两个位置

4. 删除节点

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

5. 克隆节点

  • cloneNode()方法可以克隆节点，克隆出的节点是"孤儿节点"
  • 参数是一个布尔值，表示是否采用深度克隆：如果为true，则该节点的所有后代节点也都会被克隆，如果为false，则只克
    隆该节点本身

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/876825.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

spss--数据分析Log-Binonial模型

spss--数据分析Log-Binonial模型

在横断面研究中&#xff0c;Log-binomial 模型能够获得研究因素与结局变量的关联强度指标患病率比&#xff08;PR&#xff09;&#xff0c;是一种研究二分类观察结果与多因素之间关系的重要方法&#xff0c;在医学研究等领域中得到了广泛的应用。 采用log-binomial 模型可直接估…
阅读更多...
springboot整合kafka多数据源

springboot整合kafka多数据源

整合kafka多数据源 项目背景依赖配置生产者消费者消息体 项目背景 在很多与第三方公司对接的时候&#xff0c;或者处在不同的网络环境下&#xff0c;比如在互联网和政务外网的分布部署服务的时候&#xff0c;我们需要对接多台kafka来达到我们的业务需求&#xff0c;那么当kafk…
阅读更多...
塔斯汀的“中国汉堡”并不tasty

塔斯汀的“中国汉堡”并不tasty

文 | 螳螂观察 作者 | 易不二 华莱士门徒 作为快餐消费市场的两大霸主——麦当劳、肯德基&#xff0c;自入华以来&#xff0c;从来不缺模仿者、挑战者。 从福建起家、已经成为了万店品牌的华莱士&#xff0c;无疑是最成功的一个。 得益于被餐饮界称之为“福建模式”的门店…
阅读更多...
Arduino驱动红外二氧化碳传感器（气体传感器篇）

Arduino驱动红外二氧化碳传感器（气体传感器篇）

目录 1、传感器特性 2、驱动程序 红外激光传感器是将成熟的红外吸收气体检测技术与精密光路设计、精良电路设计紧密结合而制作出的高性能传感器，具有高灵敏度、高分辨率、低功耗，响应快、抗水汽干扰、不中毒、稳定性高、使用寿命长等特点。本篇博文使用Arduino驱动红外二氧…
阅读更多...
C++ 字符串类 string

C++ 字符串类 string

文章目录 前言一、string 类型概括二、字符串流总结 前言 在C中&#xff0c;字符串是一种常见的数据类型&#xff0c;用于存储和操作文本数据。C标准库中提供了std::string类&#xff0c;它是一个功能强大的字符串类&#xff0c;提供了丰富的方法和操作符&#xff0c;使我们能…
阅读更多...
精挑细选的几个宝藏软件

精挑细选的几个宝藏软件

是不是感觉你的电脑里面永远都缺少一款软件&#xff1f;每次想要使用某个功能的时候总是不能找到合适的&#xff0c;还要先去网上找&#xff0c;小编给大家分享几款超级实用的软件&#xff0c;建议低调收藏哦~ Proxyee-down/下载工具 proxyee-down是一款免费开源的http下载工…
阅读更多...
Vue 安装开发者工具

Vue 安装开发者工具

1.下载开发者工具&#xff0c;下载地址&#xff1a;http://book.wiyp.top/App/Vue3开发者工具-谷歌/Vue3.crx 2.打开谷歌浏览器&#xff0c;点击扩展&#xff0c;点击管理扩展程序。 3.开启开发者模式&#xff0c;将 Vue3 开发者工具文件拖拽到浏览器中进行安装。 注&#xff…
阅读更多...
构建一个LLM应用所需的所有信息

构建一个LLM应用所需的所有信息

一、说明 您是否对大型语言模型&#xff08;LLM&#xff09;的潜力感兴趣&#xff0c;并渴望创建您的第一个基于LLM的应用程序&#xff1f;或者&#xff0c;也许您是一位经验丰富的开发人员&#xff0c;希望简化工作流程&#xff1f;看看DemoGPT就是您的最佳选择。该工具旨在简…
阅读更多...
车载智能座舱开发核心技术——SystemServer

车载智能座舱开发核心技术——SystemServer

SystemServer在车载开发中扮演着重要角色&#xff0c;它是Android系统的核心组件之一&#xff0c;负责管理和调度其他系统服务。我们这篇内容将对SystemServer技术进行深入解析&#xff0c;并以实战代码示例加以分析&#xff0c;帮助读者更好地理解和应用该技术。 一、SystemS…
阅读更多...
理解软件行业职位的职责

理解软件行业职位的职责

对于职位的一些个人看法 ....... 目录 1.初级程序员&#xff08;PG &#xff09; 2.中级程序员&#xff08;SE&#xff09; 3. 高级程序员&#xff08;SSE&#xff09; 4.技术经理&#xff08;TL&#xff09; 5.技术总监&#xff08;VP&#xff09; 6. 首席技术官&#xf…
阅读更多...
综述：计算机视觉中的图像分割

综述：计算机视觉中的图像分割

一、说明 这篇文章是关于图像分割的探索&#xff0c;这是解决计算机视觉问题&#xff08;如对象检测、对象识别、图像编辑、医学图像分析、自动驾驶汽车等&#xff09;的重要步骤之一。让我们从介绍开始。 二、图像分割介绍 图像分割是计算机视觉中的一项基本任务&#xff0c;涉…
阅读更多...
2021年03月 C/C++（二级）真题解析#中国电子学会#全国青少年软件编程等级考试

2021年03月 C/C++（二级）真题解析#中国电子学会#全国青少年软件编程等级考试

第1题&#xff1a;石头剪刀布 石头剪刀布是常见的猜拳游戏。石头胜剪刀&#xff0c;剪刀胜布&#xff0c;布胜石头。如果两个人出拳一样&#xff0c;则不分胜负。 一天&#xff0c;小A和小B正好在玩石头剪刀布。已知他们的出拳都是有周期性规律的&#xff0c;比如&#xff1a;“…
阅读更多...
OSCS开源安全周报第 55 期：JeecgBoot 远程代码执行漏洞

OSCS开源安全周报第 55 期：JeecgBoot 远程代码执行漏洞

本周安全态势综述 OSCS 社区共收录安全漏洞 11 个&#xff0c;公开漏洞值得关注的是 JeecgBoot 远程代码执行漏洞、企业微信私有化后台API未授权访问漏洞、WPS Office 存在代码执行漏洞(MPS-3pcb-l4mv)、Microsoft Exchange Server 远程代码执行漏洞(CVE-2023-38182)、Smartbi…
阅读更多...
SDK是什么，SDK和API有什么区别

SDK是什么，SDK和API有什么区别

SDK&#xff08;Software Development Kit&#xff09;是一种开发工具包&#xff0c;通常由软件开发公司或平台提供&#xff0c;用于帮助开发人员构建、测试和集成特定平台或软件的应用程序。SDK 包含一系列的库、工具、示例代码和文档&#xff0c;旨在简化开发过程并提供所需的…
阅读更多...
老网工必备好物，分享15个网络监控神器

老网工必备好物，分享15个网络监控神器

下午好&#xff0c;我的网工朋友。 近年来&#xff0c;随着虚拟、云和边缘网络的增加&#xff0c;网络监控工具已经显得越来越重要。 在当今大多数企业中&#xff0c;监控混合IT环境中的网络流量对于主动网络管理至关重要。 无论是检测行为异常、占用带宽、应对新威胁&#…
阅读更多...
【学会动态规划】最大子数组和（19）

【学会动态规划】最大子数组和（19）

目录 动态规划怎么学&#xff1f; 1. 题目解析 2. 算法原理 1. 状态表示 2. 状态转移方程 3. 初始化 4. 填表顺序 5. 返回值 3. 代码编写 写在最后&#xff1a; 动态规划怎么学&#xff1f; 学习一个算法没有捷径&#xff0c;更何况是学习动态规划&#xff0c; 跟我…
阅读更多...
【PDF.js】PDF.js的简单使用与CDN加速遇到的问题

【PDF.js】PDF.js的简单使用与CDN加速遇到的问题

PDF.js的简单使用与CDN加速遇到的问题 一、PDF.js是什么&#xff1f;二、PDF.js三、 选择PDF.js的版本下载1. Prebuilt (现代浏览器) *作者选择2. Prebuilt (历史淘汰浏览器)3. Source 来源4. 通过CDN加速5. 文件树PrebuiltSource 6. 尝试查看器 四、选择文档&#xff08;不是使…
阅读更多...
IC人必看| 模拟IC方向面试常考问题及答案汇总（二）

IC人必看| 模拟IC方向面试常考问题及答案汇总（二）

有不少小伙伴说还想要更多模拟IC方向的面试题目&#xff0c;这不就来了&#xff01;&#xff08;文末可领全部面试题目&#xff09; 1. Bandgap 里有几种反馈&#xff1f;原理是&#xff1f; 正反馈和负反馈。 2. 负反馈种类&#xff1f;负反馈的优点&#xff1f; 种类&am…
阅读更多...
mqttfx连上OneNET生成token时的一大坑，报用户名或密码错误

mqttfx连上OneNET生成token时的一大坑，报用户名或密码错误

整个流程如下连接&#xff1a; MQTT.fx和MQTTX 链接ONENET物联网开发平台避坑细节干货。 其中在生成token时&#xff0c;搞了半天在连接后都会报用户名密码错误 最后发现是格式问题&#xff0c;输入所有字符后一定要双击看是否可以全选中&#xff0c;可以全选中说明字符的格式…
阅读更多...
【boost网络库从青铜到王者】第二篇:asio网络编程中的socket的监听和连接

【boost网络库从青铜到王者】第二篇:asio网络编程中的socket的监听和连接

文章目录 1、网络编程基本流程2、终端节点endpoint的创建2.1、客户端终端节点endpoint的创建2.2、服务器终端节点endpoint的创建 3、服务器与客户端通信套接字socket的创建4、服务器监听套接字socket的创建5、绑定accpet监听套接字6、客户端连接指定的端点7、服务器接收连接8、…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023