DOM对象

最新推荐文章于 2024-07-19 11:08:26 发布

小猫虎儿~

最新推荐文章于 2024-07-19 11:08:26 发布

阅读量351

点赞数

文章标签： node.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_61562639/article/details/126334272

版权

一、DOM是什么：

DOM= Document Object Model，文档对象模型，DOM可以以一种独立于平台和语言的方式访
问和修改一个文档的内容和结构。
Document（文档）：创建一个网页并将网页添加到Web中，DOM就会根据这个网页创建一个文档对象。如果没有Document，DOM也就无从谈起。
Object（对象）：是一种独立的数据集合。如文档对象，就是文档中元素与内容的数据集合。与某个特定对象相关联的变量被称为这个对象的属性。可以通过某个特定对象去调用的函数被称为这个对象的方法。
Mdel（模型）：代表将文档对象表示为树状模型。在这个树状模型中，网页中的各个元素与内容表现为一个相互连接的节点。

二、DOM分层：

根节点：在最顶层的<html>节点，称为根节点
父节点：一个节点之上的节点是该节点的父节点（parent）
子节点：一个节点之下的节点是该节点的子节点（child）
兄弟节点：如果多个节点在同一个层次，并拥有相同的父节点，这几个节点就是兄弟节点（sibling）
后代：一个节点的子节点的结合可以称为是节点的后代（descendant）
叶子节点：在树型结构最底部的节点
元素节点：在html中，<body>、<p>、<a>等一系列标记，是这个文档的元素节点。元素节点组成了文档模型的语义逻辑结构
文本节点：包含在元素节点中的内容部分，如<p>标签中的文本。一般情况下，不为空的文本节点都是可见并呈现与浏览器中的
属性节点：元素节点的属性，如<a>标签的href属性。一般情况下，大部分属性节点都是隐藏在浏览器背后，并且不可见的。属性节点总是被包含在元素节点当中

三、DOM的级别：

1、DOM对象节点属性：

（1）访问指定节点：

        A、nodeName：获得某个节点的名称
        B、nodeType：获得某个节点的类型
                1 ------ 元素（element）就是标签
                2 ------ 属性（attribute）标签的属性
                3 ------ 文本（text）#text 标签中文本
        C、nodeValue：返回节点的值

（2）遍历文档树：

        A、parentNode：返回当前节点的父节点
        B、firstChile：返回当前节点的第一个子节点
        C、lastChild：返回当前节点的最后一个子节点
        D、previousSibling：返回当前节点的前一个兄弟节点
        E、nextSibling：返回当后节点的后一个兄弟节点

2、节点：

（1）创建新节点

A、使用文档对象中的createElement()和createTextNode()方法，生成一个新元素

createElement()：创建新节点
createTextNode()：创建节点文本

B、再使用appendChild()方法将创建创建的新节点添加到当前节点的末尾处

appendChild(newNode)：将新节点'newNode'添加到页面中

创建单个节点：

<script type="text/javascript">
    window.onload = function(){
        var b = document.createElement("b");//创建节点元素b
        var txt = document.createTextNode("创建新节点");//创建节点文本
        b.appendChild(txt);//将节点文本添加到节点中
        document.body.appendChild(b);//将新节点b添加到页面上
    }
</script>