3nextElementSibling

最新推荐文章于 2021-03-03 23:45:23 发布
最新推荐文章于 2021-03-03 23:45:23 发布
阅读量341 收藏
点赞数
分类专栏： dom 文章标签： nextElemen
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Kasekale/article/details/78519097
版权 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #ul li{
            width: 150px;
            height: 50px;
            background: pink;
            list-style: none;
            border:1px solid red;
            margin-top:3px;
            text-align:center;
        }
        a{
            text-decoration: none;
            line-height:50px;

        }
    </style>
</head>
<body>
    <ul id="ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        window.onload = function(){
            /*
                找到某个元素的下个兄弟节点:nextElementSibling

                找到某个元素的下个兄弟节点:previousElementSibling

            */

            var ul = document.getElementById("ul");
            var lis = ul.children;
            lis[0].nextElementSibling.style.background="red";
            lis[0].nextElementSibling.nextElementSibling.style.background="purple";
            lis[1].previousElementSibling.style.background="yellow";

            console.log(lis[0].nextElementSibling.nextElementSibling)
        }
    </script>
</body>
</html>

这里写图片描述

Kasekale
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
nextElementSibling 属性
hw的博客
11-03 2806
nextElementSibling 返回当前元素在其父元素的子元素节点中的后一个元素节点,如果该元素已经是最后一个元素节点,则返回null,该属性是只读的.
nextSibling 和nextElementSibling
qq1169091731的博客
11-05 1万+
nextSibling 和nextElementSibling的区别DOM 使用nextSibling属性返回指定节点之后的下一个兄弟节点，（即：相同节点树层中的下一个节点）。nextSibling属性与nextElementSibling属性的差别： nextSibling属性返回元素节点之后的兄弟节点（包括文本节点、注释节点即回车、换行、空格、文本等等）； nextElementSiblin
HTML DOM nextSibling 和nextElementSibling属性
qq_42164670的博客
07-30 1830
nextSibling 和nextElementSibling的区别 nextSibling属性返回元素节点之后的兄弟节点（包括文本节点、注释节点）； nextElementSibling属性只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）； 定义和用法 nextSibling 属性返回指定节点之后紧跟的节点，在相同的树层级中。 被返回的节点以 Node 对象返回。、 注释：如...
JS，nextSibling,nextElementSibling 下一个兄弟,previousSibling previousElementSibling 上一个兄弟节点
sunling的专栏
11-21 1万+
234 234 234 234 234 234 234 234 var div1 = document.getElementById("div1"); // div1.nextSibling.style.color="red";  获取下一个兄弟节点 只有IE 6 7 8兼容 // div1.nextElementSibling.style.color="red";   其
nextSibling和nextElementSibling的区别
weixin_42632642的博客
11-04 1074
nextSibling返回其父节点的childNodes子节点列表中紧随其后的节点nextElementSibling返回的则是其父节点的childNodes子节点列表中紧随其后的元素节点previousSibling和previousElementSibling类似 DOM 节点 根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点： 1. 整个文档是一个文档节点，节点类型：9 2. 每个 HTML 元素是元素节点，节点类型：1 3. HTML 元素内的文本是文本节点，节点类型：
简易CSS3 Tab菜单切换特效代码
03-20
target.nextElementSibling.classList.add('active'); }); }); ``` 这个简单的JavaScript代码片段会监听Tab的点击事件，隐藏其他内容区块并显示当前被点击的Tab对应的内容区块。 总结来说，这个简易CSS3 Tab菜单...
portfolio-3
03-29
在"portfolio-3"中，可能会用到`<article>`来表示每个单独的作品介绍，`<section>`用于划分不同部分，如“关于”、“作品”和“联系”。 【CSS与布局】 HTML结构搭建完成后，通常会用CSS（Cascading Style Sheets...
炫酷实用的CSS3 3D垂直手风琴菜单
11-24
this.nextElementSibling.classList.toggle('expanded'); }); }); ``` ```css .expanded { transform: rotateX(90deg); } ``` 此外，可以添加一些额外的CSS3效果，如阴影（box-shadow）、边框（border）和背景...
js+css3下划线文字导航菜单特效
06-24
本篇将详细探讨如何利用JavaScript（js）与CSS3（层叠样式表第三版）来实现一种创新的下划线文字导航菜单特效，该特效在鼠标悬停时会展示动态的下划线效果，并可改变文字颜色。 首先，让我们从HTML结构开始。一个...
js css3表单checkbox多选框选择效果
10-24
本文将深入探讨如何利用JavaScript (js) 和 CSS3 (css3) 来创建具有视觉吸引力的表单checkbox多选框选择效果。 首先，我们需要了解HTML中的Checkbox基本结构。在HTML中，`<input>`标签用于创建多选框，其type属性...
原生js中nextSibling和nextElementSibling的坑
码赛客1024的博客
04-29 2481
作者：拓海老师，公众号：拓海老师 一直以来js的随性让初学者蛋疼菊紧，但是真正玩熟了之后，还是非常有意思的！ 今天拓海老师跟大家说一下原生js中获取元素的下一个直接兄弟元素的坑！ 业务场景：点击当前元素，让其下一个紧挨着的兄弟元素展现出来，类似自定义下拉菜单。如下，点击div，让ul展现出来，此时就要用到一个dom操作nextSibling获取下一个元素。 <!doctype html&...
HTML DOM element.nextElementSibling属性
qq_38384536的博客
06-08 3984
HTML DOM element.nextElementSibling属性; 返回指定元素之后的下一个兄弟元素 使用nextElementSibling属性返回指定元素之后的下一个兄弟元素，（即：相同节点树层中的下一个元素节点）。 nextSibling属性与nextElementSibling属性的差别： nextSibling属性返回元素节点之后的兄弟节点（包括文本节点、注释
jsoup的Element类
热门推荐
孤云博客
01-27 3万+
随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666) 一、简介 该类是Node的直接子类，同样实现了可克隆接口。类声明：public class Element extends Node 它表示由一个标签名，多个属性和子节点组成的html元素。从这个元素中，你可以...
nextSibling和nextElementSilbing使用以及解决兼容性问题
cccccl的博客
03-03 1509
nextSibling和nextElementSilbing使用以及解决兼容性问题 1、今天学习了 获取兄弟节点 的方法 – nextSibling（获取下一个兄弟节点）、previousSibling(获取上一个兄弟节点) Node.nextSibling 是一个只读属性，返回其父节点的 childNodes 列表中紧跟在其后面的节点，如果指定的节点为最后一个节点，则返回 null。 <body> <div>啦啦啦</div> <div>我是
nextSibling与nextElementSibling区别
觅_的博客
06-05 2452
nextSibling属性返回元素节点之后的兄弟节点（包括文本节点、注释节点）； nextElementSibling属性只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）； 在 HTML DOM （文档对象模型）中，每个部分都是节点： 文档本身是文档节点 所有 HTML 元素是元素节点 所有 HTML 属性是属性节点 HTML 元素内的文本是文本节...
nextSibling,nextElementSibling的区别；
sunlizhen的专栏
06-18 1125
html文档如下： div id="box"> ul id="ul"> li>第一个li> li id="one">第二个li> li>第三个li> ul> p>我是第二个子节点p> div> nextSibling：下一个兄弟节点（包括文本节点，元素节点，注释节点）； var one = documen
这演示的叫啥数学模型来着，似曾很熟
最新发布
07-25
这演示的叫啥数学模型来着，似曾很熟
b131学生成绩分析和弱项辅助系统-springboot+vue+elementui.zip（可运行源码+sql文件+文档）
07-25
学生成绩分析和弱项辅助系统在对开发工具的选择上也很慎重，为了便于开发实现，选择的开发工具为Eclipse，选择的数据库工具为Mysql。以此搭建开发环境实现学生成绩分析和弱项辅助系统的功能。其中管理员管理用户，新闻公告。 学生成绩分析和弱项辅助系统是一款运用软件开发技术设计实现的应用系统，在信息处理上可以达到快速的目的，不管是针对数据添加，数据维护和统计，以及数据查询等处理要求，学生成绩分析和弱项辅助系统都可以轻松应对。 学生信息管理页面，此页面提供给管理员的功能有：学生信息的查询管理，可以删除学生信息、修改学生信息、新增学生信息，还进行了对用户名称的模糊查询的条件。教师信息管理页面，此页面提供给管理员的功能有：查看已发布的教师信息数据，修改教师信息，教师信息作废，即可删除，还进行了对教师信息名称的模糊查询 教师信息信息的类型查询等等一些条件。试卷信息管理页面，此页面提供给管理员的功能有：根据试卷信息进行条件查询，还可以对试卷信息进行新增、修改、查询操作等等。公告信息管理页面，此页面提供给管理员的功能有：根据公告信息进行新增、修改、查询操作等等。
nextelementsibling用法
09-27
nextElementSibling是一个DOM属性，用于获取当前元素的下一个兄弟元素节点。它返回的是一个元素节点对象，如果没有下一个兄弟元素节点，则返回null。使用该属性可以方便地遍历DOM树中的兄弟元素节点。 ### 回答2：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值