DOM学习2

小姜思

于 2022-08-24 20:27:57 发布

阅读量240

点赞数

文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/weixin_45813597/article/details/126510478

版权

本文介绍了DOM中的节点操作，包括节点概述、父节点、子节点、兄弟节点、创建和添加、删除、替换及复制节点。同时，详细讨论了事件注册，包括传统方式和W3C标准的addEventListener方法，以及事件的删除。最后，阐述了DOM事件流的三个阶段：捕获、当前目标和冒泡，并指出了实际开发中的注意事项。

摘要由CSDN通过智能技术生成

1. 节点操作

网页中所有的内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用node 来表示。HTML DOM 树中的所有节点均可通过JavaScript进行访问，所有的HTML元素（节点）均可被修改，可以创建或删除。

1.1 节点概述

一般地，节点只是拥有nodeType（节点类型）、nodeName（节点名称）和nodeValie（节点值）这三个基本属性。

在实际开发中，节点操作主要操作的是元素节点

- 父节点

parentNode属性返回当前节点的父节点。对于一个节点来说，它的父节点只可能是三种类型：元素节点(element)、文档节点(document)和文档片段节点(documentfragment)

<div id="div1">
    <div id="div2"></div>
</div>
<script>
    // 父节点 parentNode
    var d2 = document.getElementById('div2')
    console.log(d2.parentNode);
</script>

- 子节点

    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        var lis = ul.querySelectorAll('li');
        // 1.子节点 childNodes 所有的子节点 包括元素节点 文本节点等
        console.log(ul.childNodes);
        // 2. children 获取所有的子元素节点（伪数组形式返回） 常用
        console.log(ul.children);
        // 3. firstChildren 第一个子节点 不管是文本节点还是元素节点
        console.log(ul.firstChild);
        console.log(ul.lastChild);  // 最后一个子节点
        // 4. firstElementChild 返回第一个子元素节点
        console.log(ul.firstElementChild);
        console.log(ul.lastElementChild);   // 最后一个子节点
        // 5. 返回第一个子元素节点
        console.log(ul.children[0