JavaScript系统学习---07---DOM-节点操作

最新推荐文章于 2024-09-16 08:47:17 发布

记录菌

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量245

点赞数

分类专栏： JavaScript 文章标签： javascript 学习开发语言

本文链接：https://blog.csdn.net/qq_47959003/article/details/124783303

版权

JavaScript 专栏收录该内容

12 篇文章 3 订阅

订阅专栏

本文介绍了DOM节点的类型，包括元素、属性和文本节点，重点讲述了元素节点。详细讲解了如何查找父节点、子节点和兄弟节点，并演示了节点的增加和删除操作。此外，还阐述了JavaScript中的时间对象，如何实例化、获取时间戳以及转换时间格式。最后，提及了浏览器渲染原理中的重绘和回流概念。

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

一、DOM节点

1.1 DOM节点

DOM树里每一个内容都称之为节点；

1.节点类型

（1）元素节点

所有的标签比如 body、 div
html 是根节点

（2）属性节点

所有的属性比如 href

（3）文本节点

所有的文本

2.小结

（1）什么是DOM 节点？

DOM树里每一个内容都称之为节点

（2） DOM节点的分类？

元素节点比如 div标签
属性节点比如 class属性
文本节点比如标签里面的文字

（3）我们重点记住那个节点？

元素节点
可以更好的让我们理清标签元素之间的关系

1.2 查找节点

1.节点关系：

        父节点
        子节点
        兄弟节点

2.父节点查找：

parentNode 属性
返回最近一级的父节点找不到返回为null

3.子节点查找

childNodes （尽量不用，会取到换行符）

获得所有子节点、包括文本节点（空格、换行）、注释节点等

children （重点）

仅获得所有元素节点
返回的还是一个伪数组

4.兄弟关系查找：

（1）下一个兄弟节点

nextElementSibling 属性

（2）上一个兄弟节点

previousElementSibling 属性

5.小结

（1）查找父节点用那个属性？

parentNode

（2）查找所有子节点用那个属性？

children

（3）查找兄弟节点用那个属性？

nextElementSibling

previousElementSibling

1.3 增加节点

1.创建节点

即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
创建元素节点方法：

2.追加节点

要想在界面看到，还得插入到某个父元素中
插入到父元素的最后一个子元素:

插入到父元素中某个子元素的前面

3.克隆节点

cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值

若为true，则代表克隆时会包含后代节点一起克隆
若为false，则代表克隆时不包含后代节点
默认为false

1.4 删除节点

若一个节点在页面中已不需要时，可以删除它；

在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除；

语法：

注：

如不存在父子关系则删除不成功；
删除节点和隐藏节点（display:none）有区别的：隐藏节点还是存在的，但是删除，则从html中删除节点；

二、时间对象

2.1 实例化

在代码中发现了 new 关键字时，一般将这个操作称为实例化；
创建一个时间对象并获取时间；

获得当前时间

获得指定时间

2.2 时间对象方法

因为时间对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式

案例：页面显示时间

需求：将当前时间以：YYYY-MM-DD HH:mm 形式显示在页面

<body>
    <div></div>
    <script>
        let arr = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];

        setInterval(function () {
            let date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let date1 = date.getDate();
            let hour = date.getHours();
            let min = date.getMinutes();
            let sec = date.getSeconds();
            let day = date.getDay();
            let div = document.querySelector('div');
            div.innerHTML = `今天是： ${year} 年 ${month} 月 ${date1} 日
         ${hour} : ${min} : ${sec} 今天是${arr[day]}`;
        }, 1000);
    </script>
</body>