Web APIs 核心知识（4）

最新推荐文章于 2024-09-23 16:36:59 发布

你心里

最新推荐文章于 2024-09-23 16:36:59 发布

阅读量1k

点赞数 19

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_43733543/article/details/139275023

版权

JavaScript日期对象与DOM节点操作详解

在前端开发中，日期对象和DOM节点操作是两个非常重要的知识点。本文将详细介绍JavaScript中的日期对象及其方法，以及如何操作DOM节点，包括插入、删除和查找节点。

1. 日期对象

日期对象是JavaScript中处理日期和时间的对象，提供了许多方法来操作日期和时间。

1.1 实例化

在JavaScript中，可以使用Date构造函数来实例化一个日期对象。

创建当前日期和时间的对象

let now = new Date();
console.log(now);

创建指定日期和时间的对象

let specificDate = new Date('2023-05-28T12:00:00');
console.log(specificDate);

1.2 方法

日期对象提供了多种方法来获取和设置日期和时间。

获取日期和时间

let now = new Date();
console.log(now.getFullYear()); // 获取年份
console.log(now.getMonth()); // 获取月份（0-11，0表示一月）
console.log(now.getDate()); // 获取日期
console.log(now.getHours()); // 获取小时
console.log(now.getMinutes()); // 获取分钟
console.log(now.getSeconds()); // 获取秒
console.log(now.getMilliseconds()); // 获取毫秒
console.log(now.getDay()); // 获取星期几（0-6，0表示星期天）

设置日期和时间

let now = new Date();
now.setFullYear(2024);
now.setMonth(0); // 一月
now.setDate(1);
now.setHours(0);
now.setMinutes(0);
now.setSeconds(0);
now.setMilliseconds(0);
console.log(now);

其他常用方法

let now = new Date();
console.log(now.toDateString()); // 获取日期字符串
console.log(now.toTimeString()); // 获取时间字符串
console.log(now.toISOString()); // 获取ISO格式字符串

1.3 时间戳

时间戳是从1970年1月1日00:00:00 UTC到当前时间的毫秒数。可以使用Date.now()获取当前时间的时间戳。

获取当前时间的时间戳

let timestamp = Date.now();
console.log(timestamp);

将时间戳转换为日期对象

let date = new Date(timestamp);
console.log(date);

2. DOM节点

在这里插入图片描述

DOM（文档对象模型）是HTML和XML文档的编程接口，表示文档的结构，使其能够被编程语言操作。常见的DOM节点操作包括插入节点、删除节点和查找节点。

2.1 插入节点

可以使用appendChild、insertBefore等方法在DOM中插入新节点。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Insert Node</title>
</head>
<body>
    <div id="parent">Parent</div>
    <script>
        let parent = document.getElementById('parent');
        
        // 创建新节点
        let newChild = document.createElement('div');
        newChild.textContent = 'New Child';
        
        // 插入新节点
        parent.appendChild(newChild);
    </script>
</body>
</html>

2.2 删除节点

可以使用removeChild方法来删除DOM节点。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Remove Node</title>
</head>
<body>
    <div id="parent">
        Parent
        <div id="child">Child</div>
    </div>
    <script>
        let parent = document.getElementById('parent');
        let child = document.getElementById('child');
        
        // 删除子节点
        parent.removeChild(child);
    </script>
</body>
</html>

2.3 查找节点

可以使用多种方法来查找DOM节点，包括getElementById、getElementsByClassName、getElementsByTagName、querySelector和querySelectorAll等。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Find Node</title>
</head>
<body>
    <div id="parent">
        Parent
        <div class="child">Child 1</div>
        <div class="child">Child 2</div>
    </div>
    <script>
        let parent = document.getElementById('parent');
        let children = parent.getElementsByClassName('child');
        
        for (let child of children) {
            console.log(child.textContent);
        }
    </script>
</body>
</html>

2.3.1 父子关系

可以使用parentNode和childNodes属性来获取父节点和子节点。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Parent-Child Relationship</title>
</head>
<body>
    <div id="parent">
        Parent
        <div id="child">Child</div>
    </div>
    <script>
        let child = document.getElementById('child');
        let parent = child.parentNode;
        
        console.log('Parent:', parent.id); // Parent: parent
        console.log('Child:', parent.childNodes[1].textContent); // Child: Child
    </script>
</body>
</html>

2.3.2 兄弟关系

可以使用nextSibling和previousSibling属性来获取相邻的兄弟节点。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sibling Relationship</title>
</head>
<body>
    <div id="parent">
        <div id="sibling1">Sibling 1</div>
        <div id="sibling2">Sibling 2</div>
        <div id="sibling3">Sibling 3</div>
    </div>
    <script>
        let sibling2 = document.getElementById('sibling2');
        let prevSibling = sibling2.previousSibling;
        let nextSibling = sibling2.nextSibling;
        
        // 过滤掉空白文本节点
        while (prevSibling && prevSibling.nodeType !== 1) {
            prevSibling = prevSibling.previousSibling;
        }
        
        while (nextSibling && nextSibling.nodeType !== 1) {
            nextSibling = nextSibling.nextSibling;
        }
        
        console.log('Previous Sibling:', prevSibling ? prevSibling.id : null); // Previous Sibling: sibling1
        console.log('Next Sibling:', nextSibling ? nextSibling.id : null); // Next Sibling: sibling3
    </script>
</body>
</html>