DOM知识点梳理

最新推荐文章于 2025-04-22 23:39:21 发布

LaiJying

最新推荐文章于 2025-04-22 23:39:21 发布

阅读量1.9k

点赞数 13

文章标签：前端 javascript html vscode

本文链接：https://blog.youkuaiyun.com/2301_81045156/article/details/143228171

版权

一、什么是DOM

DOM（文档对象模型）是JS操作网页的接口是浏览器内部用来表示HTML和XML文档的对象化视图。它允许JavaScript操作页面内容，如元素、属性和样式等。

网页是一个既可以在浏览器窗口中显示，也可以作为 HTML 源代码的文档。在这两种情况下，它都是同一个文档，但文档对象模型（DOM）的表示方式使它可以被操作。作为一个面向对象的网页表示，它可以用脚本语言（如 JavaScript）进行修改。

例如，DOM 中指定下面代码中的方法必须要返回文档中所有 <p> 元素组成的列表：querySelectorAll

示例：

const paragraphs = document.querySelectorAll("p");
// paragraphs[0] 是第一个 <p> 元素
// paragraphs[1] 是第二个 <p> 元素，依此类推
alert(paragraphs[0].nodeName);

DOM树

Dom树：一个文档所有节点，按照所在的成绩，可以抽象成一种树状

节点类型：DOM节点有几种类型：

文档节点（document）：整个html文档document对象作为window对象的属性存在的，不获取可以直接使用
元素节点（Element）：代表HTML标签，例如<div>、<p>等。
文本节点（Text）：包含元素内的文本内容。
属性节点（Attribute）：代表元素的属性，例如<div id="myId">中的id属性。

节点关系：

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

DOM把以上内容都看作是对象

DOM把DOM树里面的内容都看作是对象，对象有自己的属性和方法，所以DOM叫文档对象模型，DOM是按照树形结构展现给我们的。

二、获取dom元素

dom元素共有8种获取方式，其中有4种动态获取，2种静态获取，2个固有对象获取。

1.四种动态获取及使用

动态获取：后期代码添加的也可以获取。

1.通过class 类名称获取元素，返回的是一个集合。

document.getElementsByClassName()

2.通过元素的name属性获取元素，返回的是一个集合。

document.getElementsByName()

3.通过元素的id获取，返回的是一个对象。

document.getElementById()

4.通过元素名称获取，返回的是一个集合。

document.getElementsByTagName()

使用：

var x=document.getElementsByClassName("名称");  

 //集合里面获取某一个对象  使用键来获取
    console.log(x[0]);
    console.log(x[1]);
    console.log(x[2]);

 var x=document.getElementsByName("名称"); 
  console.log(x[0]);
  console.log(x[1]);
  console.log(x[2]);
    
var x=document.getElementsByTagName("名称");
  console.log(x[0]);
  console.log(x[1]);
  console.log(x[2]);
  
var btnid=document.getElementById("名称");
  console.log(btnid);

2.两种静态获取及使用

静态获取：只能获取到初始化时的元素，后期添加的元素无法获取。

1.返回的是一个单个对象。

document.querySelector()

2.返回的是一个列表。

document.querySelectorAll()

使用：

var x=document.querySelector("选择器名");
console.log(x);

var x=document.querySelectorAll("选择器名");
console.log(x);

3.固定对象获取

1.body

document.body

2.HTML元素

document.documentElement

使用：

console.log(document.body);
console.log(document.documentElement);

三、获取元素后的操作

获取元素后的操作通常是指在编程中获取某个元素（如DOM元素、数组元素、对象属性等）之后进行的一系列操作。

1.修改或设置

可以对文本操作修改时会用到

innerHTML：获取或设置元素的内容（包括HTML标签）。

textContent：获取或设置元素的文本内容。

对其样式进行修改时:

style：直接修改元素的样式。

同样也可以自定义设置属性及获取

//设置自定义属性

x.setAttribute("data-index", 0);

//获取自定义属性

console.log(btn.getAttribute("data-index"));

示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单DOM操作示例</title>
    <style>
        #myElement {
            width: 200px;
            height: 100px;
            background-color: lightblue;
            text-align: center;
            line-height: 100px; /* 垂直居中文本 */
            border: 1px solid #000;
            margin: 20px;
        }
    </style>
</head>
<body>

<div id="myElement">原来的内容</div>

<script>
// 获取DOM元素
let element = document.getElementById('myElement');

// 修改元素内容
element.textContent = '已修改的内容';

// 修改元素样式
element.style.backgroundColor = 'lightgreen'; // 修改背景颜色
element.style.color = 'white'; // 修改文字颜色
</script>

</body>
</html>

2.节点操作

DOM节点操作涉及到对网页上的元素进行创建、删除、修改和移动等操作。

1.创建新节点

使用 document.createElement 创建一个新节点并将其添加到页面中。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建新节点示例</title>
</head>
<body>

<div id="container"></div>

<script>
// 创建新的段落元素
let newParagraph = document.createElement('p');
newParagraph.textContent = '这是一个新创建的段落';

// 将新段落添加到container中
let container = document.getElementById('container');
container.appendChild(newParagraph);
</script>

</body>
</html>

2.删除节点

使用 removeChild 从父节点中删除一个子节点。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>删除节点示例</title>
</head>
<body>

<div id="container">
    <p id="paragraph">这是一个要删除的段落</p>
</div>
<button id="deleteButton">删除段落</button>

<script>
// 获取段落和按钮元素
let paragraph = document.getElementById('paragraph');
let button = document.getElementById('deleteButton');

// 添加点击事件删除段落
button.onclick = function() {
    paragraph.parentNode.removeChild(paragraph);
};
</script>

</body>
</html>

3.修改节点属性

使用 setAttribute 或直接修改属性来改变节点的属性。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改节点属性示例</title>
</head>
<body>

<img id="myImage" src="example.jpg" alt="示例图片" />

<script>
// 获取图片元素
let image = document.getElementById('myImage');

// 修改图片的属性
image.setAttribute('src', 'newImage.jpg'); // 修改src属性
image.alt = '这是一张新图片'; // 修改alt属性
</script>

</body>
</html>

4.移动节点

使用 appendChild 或 insertBefore 方法将节点移动到不同的位置。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动节点示例</title>
</head>
<body>

<div id="source">
    <p id="moveMe">我将被移动</p>
</div>

<div id="target"></div>

<script>
// 获取要移动的段落和目标容器
let paragraph = document.getElementById('moveMe');
let target = document.getElementById('target');

// 将段落移动到目标容器
target.appendChild(paragraph);
</script>

</body>
</html>

补充：

当我们想对字符串大小写进行转化时可以用到

大写转化为小写：

toLowerCase()

小写转大写：

toUpperCase()

四、dom元素的创建与删除

DOM元素的创建与删除是前端开发中常见的操作，在刚刚学习的对节点进行操作的时候学到了一些关于节点的创建与删除，这个部分将学习关于dom元素更全面的创建与删除。

1.创建dom元素

在JavaScript中，可以使用 document.createElement() 方法来创建新的DOM元素。创建完元素后，可以使用 appendChild() 或 insertBefore() 等方法将其添加到现有的DOM结构中。

示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建DOM元素示例</title>
</head>
<body>

<div id="container">
    <h2>这是一个标题</h2>
</div>
<button id="addButton">添加段落</button>

<script>
    // 获取按钮和容器元素
    const addButton = document.getElementById('addButton');
    const container = document.getElementById('container');

    // 添加点击事件，创建新的段落
    addButton.onclick = function() {
        // 创建新段落元素
        const newParagraph = document.createElement('p');
        newParagraph.textContent = '这是一个新添加的段落。';
        
        // 将新段落添加到容器
        container.appendChild(newParagraph);
    };
</script>

</body>
</html>

2.删除DOM元素

可以使用 removeChild() 方法从父节点中删除一个子节点，或者直接使用 remove() 方法删除元素本身。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>删除DOM元素示例</title>
</head>
<body>

<div id="container">
    <p id="paragraph">这是一个段落，点击按钮将其删除。</p>
</div>
<button id="deleteButton">删除段落</button>

<script>
    // 获取段落和按钮元素
    const paragraph = document.getElementById('paragraph');
    const deleteButton = document.getElementById('deleteButton');

    // 添加点击事件，删除段落
    deleteButton.onclick = function() {
        // 使用remove()方法删除元素
        paragraph.remove();

        // 或者使用parentNode.removeChild()方法
        // paragraph.parentNode.removeChild(paragraph);
    };
</script>

</body>
</html>

总结：

创建DOM元素：使用 document.createElement() 创建元素后，可以用 appendChild() 将其添加到页面中。
删除DOM元素：使用 removeChild() 方法从父节点删除子节点，或直接使用 remove() 方法来删除元素。

通过以上示例，你可以了解如何在JavaScript中动态创建和删除DOM元素，为网页提供更灵活的交互功能。

五、dom的元素事件

DOM元素事件是指用户与网页交互时触发的各种操作，比如点击、鼠标移动、键盘输入等。通过为DOM元素添加事件监听器，可以响应这些事件并执行相应的代码。

简单来说：

事件：属于对象的被动行为；主动行为称方法，被动的行为称事件。

在js里面写事件前面必须带on。

dom的事件中有很多例如：

鼠标事件：

常见的鼠标事件包括 click、dblclick、mouseenter 、 mouseleave、mouseover 、mouseup 、mousedown 等。

键盘事件：

可以使用 keydown、keyup 、 keypress 事件来处理键盘输入。

表单事件

表单的提交、变化和焦点等事件都是常用的。

多个事件处理：

可以为同一个元素添加多个事件监听器。

在大多情况下dom的事件发生都会伴随着事件监听器的出现，所以下面我们要学习事件的监听。

六、dom事件监听

DOM事件监听是指使用 JavaScript 监控用户对网页元素的交互（如点击、输入、鼠标移动等），并在这些交互发生时执行指定的代码。这通常通过 addEventListener 方法实现。接下来，我将详细介绍如何使用事件监听器，并提供几个示例。

1.基本语法

为元素添加事件监听器：

使用：addEventListener()

element.addEventListener(event, function, useCapture);

在这里

element：要添加事件监听器的DOM元素。
event：需要监听的事件类型，如 'click'、'mouseover'、'keyup' 等。
function：事件触发时要执行的回调函数，通常可以是一个匿名函数或已定义的函数。
useCapture（可选）：表示事件是否在捕获阶段被触发，通常可以设置为 true（捕获阶段）或 false（冒泡阶段），默认为 false。

移除事件监听器：

使用：removeEventListener()

element.removeEventListener(event, function);

注意：移除一个事件监听器时，必须使用与添加时相同的函数引用。通常，匿名函数无法被移除，因此最好将回调函数定义在函数外部。

添加监听器示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击事件示例</title>
</head>
<body>

<button id="myButton">点击我</button>

<script>
    const button = document.getElementById('myButton');

    // 添加点击事件监听器
    button.addEventListener('click', function() {
        alert('按钮被点击了！');
    });
</script>

</body>
</html>

移除监听器示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移除事件示例</title>
</head>
<body>

<button id="myButton">点击我</button>
<button id="removeButton">移除点击事件</button>

<script>
    const button = document.getElementById('myButton');
    const removeButton = document.getElementById('removeButton');

    function handleClick() {
        alert('按钮被点击了！');
    }

    button.addEventListener('click', handleClick); // 添加事件监听器

    // 移除事件监听器
    removeButton.addEventListener('click', function() {
        button.removeEventListener('click', handleClick);
        alert('已移除按钮的点击事件');
    });
</script>

</body>
</html>

注意：

/监听btn的click事件

//监听的时候事件不写on,使用 "click" ,而不是使用 "onclick"

七、事件对象

当事件被触发时，事件处理函数会接收到一个事件对象，包含关于事件的详细信息，如事件类型、目标元素、鼠标位置等。

element.addEventListener('click', function(event) {
    console.log(event.type); // 事件类型
    console.log(event.target); // 触发事件的元素
});

DOM事件监听是与用户交互的重要部分，能够极大地提升网页的动态性和交互性。通过理解 addEventListener 的用法和事件对象，可以为用户提供良好的体验。

事件执行的参数

在DOM（文档对象模型）中，事件的执行参数主要涉及到事件对象及其相关的属性和方法。这些参数通常在事件处理程序中使用，能够帮助开发者理解事件的发生情况，以及进行相应的操作。

示例：

var btn=document.getElementById("btn");
    btn.οnclick=function (event){
        console.log(event);
    }
  //event  代表事件的执行参数对象

下面给大家例举几个常见事件对象属性

event.target：指向事件触发的元素。

event.currentTarget：指向当前正在处理事件的元素。

event.type：事件的类型。

event.preventDefault()：阻止默认行为。

event.stopPropagation()：停止事件冒泡。

event.pageX 和 event.pageY：鼠标相对于整个文档的位置。

event.key：返回被按下的键的值。

总结

以上内容就是我对dom这方面暂时的理解，肯定会有遗漏或者小错误，希望大家积极讨论与评价！