元素节点之间的关系

已于 2022-04-25 09:53:27 修改
阅读量114 收藏
点赞数
文章标签： html
于 2022-04-13 21:22:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59166066/article/details/124156959
版权

 

   <!-- 1.元素节点之间的关系 
        父节点 parentNode
        子节点 children
        上一个兄弟 previousElementSibling
        下一个兄弟 nextElementSibling
        2.移动元素节点-->

点击那个li标签 哪个li标签 就会变红色

<body>
    <!-- 1.元素节点之间的关系 
        父节点
        子节点
        上一个兄弟
        下一个兄弟
        2.移动元素节点-->

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        const list = document.querySelectorAll('li');

        //for循环开始绑定点击事件
        for (let index = 0; index < list.length; index++) {

            list[index].addEventListener('click',function(){

                //this 表示被点击元素本身
                list[index].style.backgroundColor='red'
            })
            
        }
    </script>
</body>

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATklFNTI=,size_20,color_FFFFFF,t_70,g_se,x_16

被点击的上一个元素变红色

 

<body>
  
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        const list = document.querySelectorAll('li');
        //for循环开始绑定点击事件
        for (let index = 0; index < list.length; index++) {

            list[index].addEventListener('click',function(){
                //this 表示被点击元素本身

                //被点击的上一个元素变红色
                this.previousElementSibling.style.backgroundColor='red'
            })
            
        }
    </script>
</body>

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATklFNTI=,size_20,color_FFFFFF,t_70,g_se,x_16

被点击的下一个元素变绿色

<body>
    
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        const list = document.querySelectorAll('li');
        //for循环开始绑定点击事件
        for (let index = 0; index < list.length; index++) {

            list[index].addEventListener('click',function(){
                //this 表示被点击元素本身

                //被点击的下一个元素变绿色
                this.nextElementSibling.style.backgroundColor='green'
            })
            
        }
    </script>
</body>

 watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATklFNTI=,size_20,color_FFFFFF,t_70,g_se,x_16

 给被点击的父元素 设置成黄色

<body>
  

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        const list = document.querySelectorAll('li');
        //for循环开始绑定点击事件
        for (let index = 0; index < list.length; index++) {

            list[index].addEventListener('click',function(){
                //this 表示被点击元素本身

                //给被点击的父元素 设置成黄色
                this.parentElement.style.backgroundColor='yellow'
            })
            
        }
    </script>
</body>

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATklFNTI=,size_20,color_FFFFFF,t_70,g_se,x_16

 点击一下li标签 设置所有的里标签 都拥有边框

<body>
   

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        const list = document.querySelectorAll('li');
        //for循环开始绑定点击事件
        for (let index = 0; index < list.length; index++) {

        list[index].addEventListener('click',function(){
               
        //点击一下li标签 设置所有的里标签 都拥有边框
        for (let i = 0; i < list.length; i++) {

         list[i].style.border='1px solid #000'
                    
            }
            })
            
        }
    </script>
</body>

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATklFNTI=,size_20,color_FFFFFF,t_70,g_se,x_16

 2.移动元素节点-->

appendChild 把目标元素插到父容器的最后一个子元素的位置

<body>
    
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        const list = document.querySelectorAll('li');
        //for循环开始绑定点击事件
        for (let index = 0; index < list.length; index++) {

            list[index].addEventListener('click',function(){

                // 设置被点击的元素插到末尾去
                // 目标元素=this
                // 父元素 this.parentNode
                
                this.parentNode.appendChild(this)
            })
        }
    </script>
</body>

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATklFNTI=,size_20,color_FFFFFF,t_70,g_se,x_16

 

 

NIE52
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript学习（十四）—元素节点关系和特殊节点
道阻且长，行则将至。
04-04 461
JavaScript学习（十四）—元素节点关系和特殊节点 一、元素节点 （1）、parentElement： 获取某元素的父元素，它和parentNode的区别是parentElement获取到的值时父节点且是元素节点，如document.body.parentNode.parentNode 的结果为#document，而document.body.parentElement.parentElement的结果为null，就是因为获得的内容不是元素节点而是文档节点。 <ul>
js之 DoM操作、节点、节点之间关系的属性
最新发布
08-13
js之 DoM操作、节点、节点之间关系的属性
元素与节点
weixin_30359021的博客
08-27 109
元素与节点的区别： 获取元素时跳过文本节点1）通过节点访问或操作 HTML 页面内容：元素节点：表示 HTML 页面中的标签。属性节点：表示 HTML 页面中标签的属性。⽂本节点：表示 HTML 页面中标签的文本内容。2）通过元素访问或操作 HTML 页面内容：元素：表示 HTML 页面中的标签。 使用节点方式时：标签、属性和文本是同级关系；使用元素方式时：只有标签，属性和文本成为了标签的一部分...
DOM属性节点
qq_63223641的博客
03-25 533
DOM属性节点
js第14课——元素与节点
qq_42012745的博客
11-25 537
dom 数 节点（换行、空格、制表符）元素—>元素节点 元素：element；节点 node ；nodejs 一、 节点或者元素之间的各种关系 子关系; var containerEle = document.querySelector(".container"); 1.获取子元素 父元素.children var childrens = containerEle.children; console.log(childrens); 2.获取子节点 var nodes = c
节点与元素的区别
dalaoshu321的博客
02-11 291
元素 是W3C文档对象模型（DOM）当中使用最广泛的节点之一。 元素 拥有关联的“属性 ”。 XmlElement类 拥有许多方法来访问它的“属性 ”（GetAttribute, SetAttribute, RemoveAttribute, GetAttributeNode, 等等）。 你也可以使用“Attributes”属性 来返回一个支持“名字 ”或者“序号 ”访问的...
浅谈React中的元素、组件、实例和节点
08-27
React 中的元素、组件、实例和节点是四个密切相关的概念，但它们之间的区别和联系却很容易让初学者感到迷惑。在这里，我们将详细地介绍这四个概念，以及它们之间的联系和区别。 元素 (Element) ---------------- ...
echarts鼠标覆盖高亮显示节点及关系名称详解
11-29
通过以上步骤，我们可以实现一个更加丰富的交互体验，使用户在查看力导向图时能够快速理解节点之间的关联关系，提高数据分析的效率。这种方法虽然需要对ECharts源代码有一定的了解，但为自定义交互提供了可能，尤其...
五节点的关联关系PPT图表
07-16
它们之间的连线或箭头指示了这些节点之间的关系类型，可能是因果关系、依赖关系或是顺序关系。这些节点的布局和连接方式可以是线性的、环状的、树状的，甚至是网状的，具体取决于数据的特性和要传达的信息结构。 ...
五节点的关联关系图表PPT模板
03-20
首先，"关联关系幻灯片图表"是模板的核心部分，它是一种图形化表示多个元素之间关系的方法。在项目管理、数据分析、业务流程分析等领域，关联关系图表是非常有用的工具。通过图形化的方式，观众可以迅速理解各个元素...
html基础入门
weixin_46972127的博客
04-27 1438
目录 1、html结构 1.1、基本结构 1.2、标签的层次结构 2、html常见标签 2.1注释标签 2.2标题标签 2.3段落标签 2.4换行标签 2.5格式化标签（不常用，一般用css进行美化） 2.6图片标签 2.7超链接标签 2.8表格标签 2.9列表标签 2.10表单标签 3、练习 1、html结构 html代码是由各种“标签”构成的。标签名放到<>中，构成一个标签，大多数标签成对出现，有开始标签也有结束标签，少数标签只有开始标签，称为“
HTML认识
IT_HYM的博客
06-26 344
HTML介绍
head标签与body标签的区别
Mr.zhou
11-18 5908
是说明这个是一个网页。告诉浏览器这个网页的开始和结束。他包含了之后的两个元素和之间的内容，是元信息和网站的标题 元信息一般是不显示出来的,但是记录了你这个HTML文件的很多有用的信息.///这边是文档申明。说明这是一个html制作的网站。//这里是元信息。里面可以定义网页的字符格式和写出网页的详细信息（如。作者。关键词等）页面的标题这里面显示的就是一个页面的信息，也就是浏览器呈现出来的，用户
一张图看懂js中元素、属性和文本节点的关系
庄AC的博客
09-07 5966
文本节点和元素节点为父子关系，但是属性节点和元素节点是兄弟关系吗？如果是兄弟关系， 那么通过“元素对象.属性名”的方式访问属性怎么解释？究竟元素节点和属性节点什么关系呢？ 元素节点和文本节点之间存在父子关系，元素节点和属性节点之间不存在父子关系
DOM —【节点与元素的区别】
Zyl_CN的博客
06-05 4364
在 HTML DOM （文档对象模型）中，每个部分都是节点：文档本身是文档节点所有 HTML 元素是元素节点所有 HTML 属性是属性节点HTML 元素内的文本是文本节点 （包括回车符也是属于文本节点）注释是注释节点 Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。 NodeList 对象表示节点列表，比如 HTML 元素的子节点集合。 元素也可以拥有属性。属性是属性节点。...
XML节点和元素的关系
热门推荐
IT老兵的驿站
10-26 2万+
<br />今天研究了一下xml的节点和元素的关系，还不是太明白。<br /> <br />以下是摘自http://www.w3school.com.cn/xmldom/dom_node.asp的解释。Node 对象<br />Node 对象是整个 DOM 的主要数据类型。<br />节点对象代表文档树中的一个单独的节点。<br />节点可以是元素节点、属性节点、文本节点，或者也可以是“节点类型”那一节中所介绍的任何一种节点。<b
本人对HTML元素和DOM节点之间关系的理解
单枪匹码
12-13 2884
这篇文章是一篇自己学习DOM相关内容之后的总结，也是方便对DOM属性和HTML属性的理解，以及使用JavaScript更好的对HTML和DOM进行操作，自我感觉官方的话特别的繁琐，不是特别好理解，都是一些书面语看起来特别的别扭，特意记录一下，方便后续回头复习，下面原本是自己记录的一大段文字，为了方便大家看，我把它分成了几小段，如果有不妥之处请评论区告诉我，以便及时修改。 1）DOM：文档对象模型，......
HTML中节点和元素的区别，获取元素和节点，元素的创建，事件的绑定
qq_32849999的博客
05-21 2299
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta charset="UTF-8"&gt;    &lt;title&gt;Title&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;script src=&quot
xpth怎么查看两个节点之间的元素
07-16
要查找两个节点之间的元素，可以使用XPath来选择特定的路径。XPath可以通过使用不同的定位方法来定位节点，例如元素名称、属性、父子关系等。 下面是一个示例XPath表达式，用于查找两个节点之间的元素： ```python...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值