DOM对象之节点操作

最新推荐文章于 2024-11-02 12:42:04 发布
最新推荐文章于 2024-11-02 12:42:04 发布
阅读量160 收藏 1
点赞数
分类专栏： js 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53417841/article/details/125562404
版权

目录

一、动态创建节点

二、节点操作之第一个元素和最后一个子元素

三、节点操作之父节点

四、节点操作之兄弟节点

五、节点操作之子节点

六、综合案例(菜单下拉框)

引言：

为什么学节点操作？

获取元素通常使用两种方式：

1. 利用 DOM 提供的方法获取元素

document. getElementById()
document. getElement s ByTagName()
          document.querySelector  等
逻辑性不强、 繁琐

2. 利用节点层级关系获取元素

利用父子兄节点关系获取元素
逻辑性强， 但是兼容性稍 差

注：这两种方式都可以获取元素节点，我们后面都会使用，但是节点操作更简单 

一、动态创建节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul></ul>
    <script>
        // 1. 创建节点元素节点
        var li = document.createElement('li');
        // 2. 添加节点 node.appendChild(child)  node 父级  child 是子级 后面追加元素  类似于数组中的push
        var ul = document.querySelector('ul');
        ul.appendChild(li);
        // 3. 添加节点 node.insertBefore(child, 指定元素);
        var lili = document.createElement('li');
        ul.insertBefore(lili, ul.children[0]);
        // 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素
    </script>
</body>
</html>

二、节点操作之第一个元素和最后一个子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ol>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
        <li>我是li5</li>
    </ol>
    <script>
        var ol = document.querySelector('ol');
        // 1. firstChild 第一个子节点 不管是文本节点还是元素节点
        console.log(ol.firstChild);
        console.log(ol.lastChild);
        // 2. firstElementChild 返回第一个子元素节点 ie9才支持
        console.log(ol.firstElementChild);
        console.log(ol.lastElementChild);
        // 3. 实际开发的写法  既没有兼容性问题又返回第一个子元素
        console.log(ol.children[0]);
        console.log(ol.children[ol.children.length - 1]);
    </script>
</body>
</html>

parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回 （这个是我们重点掌握的）。

虽然children 是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用

 

三、节点操作之父节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <!-- 节点的优点 -->
     <div>我是div</div>
     <span>我是span</span>
     <ul>
         <li>我是li</li>
         <li>我是li</li>
         <li>我是li</li>
         <li>我是li</li>
     </ul>
     <div class="demo">
         <div class="box">
             <span class="erweima">×</span>
         </div>
     </div>
 
     <script>
         // 1. 父节点 parentNode
         var erweima = document.querySelector('.erweima');
         var box = document.querySelector('.box');
         // 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
         console.log(erweima.parentNode);
     </script>
</body>
</html>
parentNode 属性可返回某节点的父节点 ， 注意是 最近的一个父节点
如果指定的节点没有父节点则返回 null

四、节点操作之兄弟节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>我是div</div>
    <span>我是span</span>
    <script>
         var div = document.querySelector('div');
        // 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
        console.log(div.nextSibling);
        console.log(div.previousSibling);
        // 2. nextElementSibling 得到下一个兄弟元素节点
        console.log(div.nextElementSibling);
        console.log(div.previousElementSibling);
    </script>
</body>
</html>

      注：nextSibling 返回当前元素的下一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。

      previousSibling 返回当前元素上一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。 

五、节点操作之子节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 节点的优点 -->
    <div>我是div</div>
    <span>我是span</span>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>

    </ul>
    <ol>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ol>

    <div class="demo">
        <div class="box">
            <span class="erweima">×</span>
        </div>
    </div>

    <script>
        // DOM 提供的方法（API）获取
        var ul = document.querySelector('ul');
        var lis = ul.querySelectorAll('li');
        // 1. 子节点  childNodes 所有的子节点 包含 元素节点 文本节点等等
        console.log(ul.childNodes);
        console.log(ul.childNodes[0].nodeType);//文本节点-》0
        console.log(ul.childNodes[1].nodeType);//元素节点-》1
        // 2. children 获取所有的子元素节点 也是我们实际开发常用的
        console.log(ul.children);
    </script>
</body>
</html>

firstElementChild  返回第一个子元素节点，找不到则返回null。

lastElementChild 返回最后一个子元素节点，找不到则返回null。   

六、综合案例(菜单下拉框)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        a {
            text-decoration: none;
            font-size: 14px;
        }
        
        .nav {
            margin: 100px;
        }
        
        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }
        
        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }
        
        .nav>li>a:hover {
            background-color: #eee;
        }
        
        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }
        
        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }
        
        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
        </style>
</head>
<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        var div=document.querySelector('.nav');
        // console.log(div.children);
        var lis=div.children;
        for(var i=0;i<lis.length;i++){
            lis[i].onmouseover=function(){
                this.children[1].style.display='block';
            }
            lis[i].onmouseout=function(){
                this.children[1].style.display='none';
            }
        }
    </script>
</body>
</html>

 

 总结：

使用节点操作获取元素比使用dom提供的方法获取元素要简单

 

码 码 码
关注
专栏目录
javascript 快速入门之第四章 DOM编程的节点操作
qq_61313896的博客
03-19 818
一：DOM的概念： DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。也就是说把文档编译成了一个对象模型，例如我们写的html文件实际上是一个文档文件，通过我们的浏览器把它编译成了一个对象模型，这个模型就是document对象。 DOM 以树结构表达 HTML 文档。就好像是一个家族谱，有父级元素也有对应的子级元素，那么document对象就是我们最大的父级元素。 如下图所示，家族谱上面的每一个元素都是一个节点，通
DOM对象-节点
Chen_NC的博客
12-21 442
DOM是Document Object Model 的缩写，即文档对象模型，是基于文档编程的一套API接口，使用时分三个方面：DOM Core(核心)、HTML-DOM和CSS-DOM。 DOM操作分类 1.DOM Core： 这不是JavaScript的专属品，任何一种支持DOM的编程语言都可以使用它，它的用途不仅限于处理一种使用标记语言编写出来的文档。 2.HTML DOM: 使用JavaScript和DOM为HTML文档编写脚本时，有许多专属的HTML-DOM属性，HTML-DOM出现的比DOM
DOM对象—节点的详解(一)
a920119797的博客
02-28 622
一、节点的分类 1、元素节点：html中的标签都是元素节点、如、...... 2、文本节点：向用户展示的内容，如xxx、xxx里的xxx内容文本 3、属性节点：元素的属性、如标签里的链接属性 举例！ 代码：百度首页 a标签为元素节点、百度首页为文本节点、http:/www.baiducom为属性节点！ 二、节点的属性 1、节点的名称：nodeName 2、节点的值  
[学习笔记]JavaScript之DOM基础
Jacob专栏
01-18 2127
DOM概述 DOM定义 DOM（文档对象模型，Document Object Model）是W3C组织开发的一套便于操作XML和HTML的JavaScript方法，其将XML和HTML抽象成文档对象（Document），并将其中所有的标签和内容都抽象成对象（节点），利用面向对象的思对XML和HTML的操作。其中 Document 对象是DOM的顶层节点。 XML（扩展标记语言，Exten
DOM 访问节点的方法，节点属性，节点信息
m0_49249339的博客
03-19 239
!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body>...
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
10-18
在JavaScript中，可以通过`document.createElement()`方法创建一个新的元素节点，这将返回一个代表新元素的DOM对象。例如，`var obj = document.createElement("p");`将会创建一个新的`<p>`标签节点。 知识点3：...
JS实现访问DOM对象指定节点的方法示例
10-18
本示例主要讲解如何使用JavaScript实现访问DOM对象指定的节点，包括使用`getElementById()`方法，以及通过`nodeName`、`nodeType`和`nodeValue`属性获取节点的相关信息。 **一、介绍** 1. **getElementById()方法*...
DOM对象中的节点操作.pdf
06-16
总结来说，DOM对象中的节点操作是Web开发中的基础和核心，它包括了节点的概念理解、节点类型和属性的掌握、以及对节点进行增删改查等实际操作的能力。通过深入学习和实践DOM节点操作，开发者可以有效地控制Web文档，...
javascript学习基础笔记之DOM对象操作
01-19
这个API允许开发者通过编程的方式访问和修改页面的结构、内容和样式。DOM是一个与语言无关的标准，意味着它不仅仅适用于JavaScript，任何支持DOM的编程...因此，深入学习DOM对象和操作是每个前端开发者必备的技能之一。
DOM常用节点操作总结及解释
weixin_46331286的博客
04-05 865
浅浅总结一下这个月的学习成果，方便俺日后查用。
DOM编程中的对象
qq_32364281的博客
07-25 254
以下内容均可在以下地址查找具体用法: http://www.w3school.com.cn window对象部分函数： open();在一个窗口打开页面；用法：http://www.w3school.com.cn/jsref/met_win_open.asp setInterval();设置定时器(多次执行) clearInterval();清除定时器 setTimeout();设置定时
把html转换成节点类型,JavaScript节点类型有哪些？
weixin_36164538的博客
06-01 281
DOM的作用是将网页转为一个javascript对象，从而可以使用javascript对网页进行各种操作(比如增删内容)。浏览器会根据DOM模型，将HTML文档解析成一系列的节点，再由这些节点组成一个树状结构。DOM的最小组成单位叫做节点(node)，文档的树形结构(DOM树)由12种类型的节点组成。1、元素节点元素节点element对应网页的HTML标签元素。元素节点的节点类型nodeType值...
html转换类型,将HTML元素转换为“节点”类型
weixin_33615688的博客
05-31 279
我正在处理HTML项目。基本上将HTML节点保存到JavaScript的Object中以将它们追加到元素中。这是我的HTML，JavaScript和错误。将HTML元素转换为“节点”类型HTML......的JavaScriptvar _handler = {};var _holder = document.getElementById('holder');var some_example = [...
JavaScript——节点Node和元素操作（JS和jQuery对比）
Mr.ShyZhang趟过的前端“小路坑”
05-26 1471
节点Node    DOM由节点组成    节点类型（12种）        元素类型 1        文本类型 3        注释类型 8        文档类型 9    节点和元素的关系：        每个元素一定是节点 节点不一定是元素 元素只是节点的一种    获取节点类型 nodeType        用法：node.nodeType        返回值：数字代表的节...
Js的DOM编程获取标签对象的三种方式
N_Peng的博客
08-15 2625
Js的DOM编程获取标签对象的三种方式 一.DOM使用： 1.通过特定方法/特定属性控制标签对象 2.通过标签独享更改标签里面的属性火焰石，展示效果 二. 三种方式获取标签对象 1. 通过document的集合属性获取 1.1 document常用属性： all集合属性：获取页面中所有的标签对象,返回的集合列表 forms：获取页面中所有的form标签对象,返回集合列表 mages：获取页面中...
【JS】Dom节点操作常用方法
m0_48982503的博客
01-14 1667
目录 1.访问/获取节点 1.1 通过顶层document节点获取： 1.2 通过父节点获取： 1.3 通过子节点获取： 1.4 通过兄弟节点获取： 2.创建节点/属性 3.添加节点 4.复制节点 5.删除节点 6.添加文本 1.访问/获取节点 1.1 通过顶层document节点获取： document.getElementById(id);　　　　　 //返回对拥有指定id的第一个对象 document.getEle...
dom节点及对节点的常用操作方法
weixin_42542616的博客
03-08 797
dom节点及对节点的常用操作方法 在说dom节点前，先来看看页面的呈现： dom渲染流程： 1、浏览器解析html源码，然后创建一个DOM树。 在DOM树中，每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点)。DOM树的根节点就是documentElement，对应的是html标签。 2、浏览器解析CSS代码，计算出最终的样式数据。 对CSS代码中非法...
DOM对象-节点的操作
a920119797的博客
03-19 1273
上篇整理的是dom对象的一些基本知识，好久也没来写博客了，以后一定要养成习惯啊啊~~ 废话少说，直接进入正题，这次整理的是dom对象节点的操作，可以通过操作dom节点对html进行修改等、 ++++++++++++++++++++++++这里是分割线+++++++++++++++++++++++++++++++++++++++++++ 1、getElementByName()方法
JavaScript 生成二维码
最新发布
qq_30049249的博客
11-02 219
我试过了，这一款js库支持中英文混合。进入网站后，可以直接点击运行哟～
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值