【JavaScript】DOM节点操作

南栀~zmt

已于 2022-04-21 20:29:24 修改

阅读量433

点赞数 6

分类专栏： JavaScript基础文章标签： javascript

于 2021-06-10 17:17:48 首次发布

本文链接：https://blog.csdn.net/qq_46658751/article/details/117745885

版权

节点

DOM
DOM分层
节点
eg：简易留言板

DOM

一个网页就是一个节点树，页面中的所有内容都是节点。

DOM=Document Object Model文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。

Document（文档）：创建一个网页并将网页添加到Web中，DOM就会根据这个网页创建一个文档对象。如果没有Document，DOM也就无从谈起。

Object（对象）：是一种独立的数据集合。如文档对象，就是文档中元素与内容的数据集合。与某个特定对象相关联的变量被称为这个对象的属性。可以通过某个特定对象去调用的函数被称为这个对象的方法。

Mdel（模型）：代表将文档对象表示为树状模型。在这个树状模型中，网页中的各个元素与内容表现为一个相互连接的节点。

DOM是访问和操作Web页面的接口，使用该接口可以访问页面中的其他标准组件。

DOM分层

在这里插入图片描述

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

节点

节点基本属性：
nodeName：获得某个节点的名称
nodeType：获得某个节点的类型

nodeType==1 元素(element) 就是标签
nodeType==2 属性(attribute) 标签的属性
nodeType==3 文本(text) #text标签中的文本

nodeValue：返回节点的值

获取子节点、子元素的方式：

childNodes属性：返回当前节点的所有子节点的集合(NodeList)，返回的节点包括元素、文本和其他节点
childen属性：只返回子元素节点的集合(HTMLCollection)

firstChild属性：获取第一个子节点(元素节点或文本节点)
firstElementChild属性：返回第一个子元素

lastChild属性：返回最后一个子节点(元素节点或文本节点)
lastElementChild属性：返回最后一个子元素

对象名.childen[索引号]：访问节点的子元素，不需要考虑浏览器的兼容性问题，推荐使用

获取兄弟节点、兄弟元素的方式：

nextSibling属性：返回当前节点的后一个兄弟节点
previousSibling属性：返回当前节点的前一个兄弟节点

nextElementSibling属性：返回下一个兄弟元素
previousElementSibling属性：返回前一个兄弟元素

访问指定节点

eg:
<body id="b1">
    <h3>三号标题</h3>
    <b>加粗内容</b>
    <script text="text/javascript">
        var by = document.querySelector('#b1');
        var str;
        str = '节点名称：'+by.nodeName+'\n';
        str += '节点类型：'+by.nodeType+'\n';
        str += '节点值：'+by.nodeValue+'\n';
        console.log(str)
    </script>
</body>

在这里插入图片描述

创建新节点

使用文档对象中的createElement()和createTextNode()方法，生成一个新元素
createElement()：创建新节点
createTextNode()：创建节点文本
再使用appendChild()方法将创建创建的新节点添加到当前节点的末尾处
appendChild(newNode)：将新节点’newNode’添加到页面中

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

<!-- 创建多个节点 -->
<script>
    window.onload = function(){
     
        var txt = ['第一个节点','第二个节点','第三个节点','第四个节点','第五个节点','第六个节点']

最低0.47元/天解锁文章

南栀~zmt

关注

6
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
6
评论
【JavaScript】DOM节点操作

节点DOMDOM分层节点访问指定节点遍历文档树DOM一个网页就是一个节点树，页面中的所有内容都是节点。DOM=Document Object Model文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。Document（文档）：创建一个网页并将网页添加到Web中，DOM就会根据这个网页创建一个文档对象。如果没有Document，DOM也就无从谈起。Object（对象）：是一种独立的数据集合。如文档对象，就是文档中元素与内容的数据集合。与某个特定对象相关联的变量被称
复制链接

扫一扫