DOM基础原理与应用

聪明的西柚

已于 2024-04-19 20:59:06 修改

阅读量204

点赞数 5

分类专栏：前端基础知识笔记文章标签：前端 javascript 开发语言

于 2024-04-19 20:58:39 首次发布

本文链接：https://blog.csdn.net/m0_51452686/article/details/137976101

版权

前端基础知识笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、基本认知

对于JavaScript基础的学习大致包括三个方面：ECMAScript语法、DOM、BOM。

DOM是JS操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JS对象，从而可以用脚本进行各种操作（比如增删内容）。

二、节点层级

1. 节点

DOM的最小组成单位叫做节点（node）。文档的树形结构（DOM树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。

常用节点有：文档节点（document）、元素节点（Element，HTML文档中的HTML标签）、属性节点（Attribute)、文本节点（Text，HTML标签中的文本内容）

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: block;
            width: 100px;
            height: 100px;
            background-color: green;
        }

        .cbox {
            display: block;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="bbox" data-id="'11">123</div>
    <span class="cbox">456</span>
    <span class="dbox">456</span>
    <img src="./images/1.webp" alt="">
    <form action="">
        <input type="text" value="输入密码">
    </form>

    <script>
        // 1. 获取dom对象
        const a = document.querySelector('div')  // 获取匹配的第一个元素
        const c = document.querySelector('.cbox') //第二种获取方法，实质上单引号中为css选择器
        const img = document.querySelector('img')
        // const c = document.querySelectorAll('.cbox') //获取多个元素
        const input = document.querySelector('input')

        // 2. 操作元素内容
        // innerText属性(显示纯文本，不解析标签) && innerHTML属性(解析标签)
        c.innerText = '你好'
        a.innerHTML = '我好'

        // 3. 操作元素属性
        // 3.1 常用属性: 直接+属性
        img.src = './images/1.webp'
        img.title = '不知名图片'
        // 3.2 样式属性: +style+属性
        box.style.width = '200px'  // 不要忘记单位
        box.style.backgroundColor = 'pink'  //连接符变为小驼峰写法
        box.className = 'active'  //修改类名
        box.classList.add('类名')  //增加类名
        box.classList.remove('类名')  //移除类名
        box.classList.toggle('类名')  //切换类名        
        // 3.3 表单元素属性
        input.value = 'haha'
        input.type = 'password'
        // 3.4 自定义属性
        a.dataset.id = '22'
    </script>
</body>

2. 节点树

一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是DOM。除了根节点以外，其他节点对于周围的节点都存在三种关系。

父节点关系（parentNode）：直接的那个上级节点。
子节点关系（childNode）：直接的下级节点。
同级节点关系（sibling）：拥有同一父节点的节点。

    <ul>
        <li class="01">1</li>
        <li class="02">2</li>
        <li class="03">3</li>
    </ul>
    </form>
    <script>
        const ul = document.querySelector('ul')
        const a = document.querySelector('.01')
        const b = document.querySelector('.02')
        const c = document.querySelector('.03')
        // dom节点操作
        // 1. 查找节点
        // 父节点 a.parentNode
        // 子节点 ul.children
        // 兄弟节点 a.nextELementSibling && b.previousElementSibling

        // 2. 新增节点
        ul.appendChild(li) // 在最后追加
        ul.insertBefore(li, li.children[0]) //在哪个元素之前追加节点
        ul.removeChild(a)// 删除
        a.cloneNode(true) // 克隆一个已有的元素节点.true表示克隆时包含后代节点一起克隆；fals表示不包含
    </script>