JavaScript(2)---DOM详解

最新推荐文章于 2023-04-08 11:48:31 发布

微赚淘客机器人开发者联盟@聚娃科技

最新推荐文章于 2023-04-08 11:48:31 发布

阅读量220

点赞数

本文链接：https://blog.csdn.net/java666668888/article/details/104125427

版权

本文详细介绍了DOM的概念，包括DOM节点树、节点类型和节点操作。通过示例展示了查询子元素、父元素和兄弟元素的方法，以及如何进行增删改节点。此外，还讲解了设置样式和实现霓虹灯特效、实时显示系统时间的综合应用。

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

JavaScript(2)---DOM详解

一、DOM概念

什么是DOM

DOM全称为文本对象模型(Document Object Model),它定义了所有HTML元素的对象和属性，以及访问他们的方法。它的主要作用包括：

改变HTML 元素 , 改变HTML属性 , 改变CSS 样式，对页面中的所有事件做出反应。

1、DOM 节点树

概念 DOM模型将整个HTML文档看成一个树形结构，并用document对象表示该文档，树的每个子节点表示HTM档中的不同内容。

如图

上图对应的html代码如下

<!DOCTYPE html>
<html>
<head>
    <title>标题</title>
</head>
<body>
    <h1>小小</h1>
    <a href="www.xx.com">链接</a>
</body>
</html>

通过这幅图也可以看出节点树中有以下几种关系

1、父级关系（图中 html 是 head 的父亲,head是title的父亲。）
2、子级关系（图中 head 是 html 的儿子,title是head的儿子。）
3、兄弟关系 （图中 head 和 body是兄弟关系。p 和 h1 是兄弟关系。）

2、DOM 节点类型

从上图部分，我用四种颜色区分了不同节点的类型,每个节点对应的nodeType也是不一致的。

3、DOM 节点操作

节点查询操作

节点增删操作

节点属性操作

二、查询示例

这里通过举例去更好的理解上面的一些操作。

1、查询子元素

children : 可以获取当前元素的所有子元素，它是不包含空白的。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div id="father">
        <p>今天时间</p>
        <p>2019.12.09</p>
        <p>22:15分</p>
    </div>
</body>
<script>
    window.onload = function () {
        var father = document.getElementById("father");
        var all = father.children; // 获取 father 下边所有的子元素
        console.log("数组的长度为:" + all.length);
    };
</script>
</html>

输出

数组的长度为:3

2、查询父元素

parentNode ：获取当前元素的父节点(父元素)

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div id="father">
        <p id="childNode">我是子节点</p>
    </div>
</body>
<script>
    window.onload = function () {
        var p = document.getElementById("childNode");  //获取p元素
        var parent = p.parentNode;  // 获取父元素
        console.log(parent);
    };
<

最低0.47元/天解锁文章

微赚淘客机器人开发者联盟@聚娃科技

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript(2)---DOM详解

JavaScript(2)---DOM详解一、DOM概念什么是DOM DOM全称为文本对象模型(Document Object Model),它定义了所有HTML元素的对象和属性，以及访问他们的方法。它的主要作用包括：改变HTML 元素 , 改变HTML属性 , 改变CSS 样式，对页面中的所有事件做出反应。 1、DOM 节点树概念 DOM模型将整个HTML文档...
复制链接

扫一扫