DOM中的parentNode总结-js教程-PHP中文网

首页

web前端

js教程

DOM中的parentNode总结

一个新手

Oct 09, 2017 am 09:39 AM

parentnode 总结

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>parentNode</title>
    <script type="text/javascript">
        "use strict"
        window.onload=function(){
            var oUl=document.getElementById("ul1");
            var nodeList=oUl.childNodes;
            // console.log(nodeList);
            var arr=convertToArray(nodeList,0);
            console.log(arr);
            for(var i=0,len=arr.length;i<len;i++){
                console.log(arr[0].parentNode);
            }
console.log(arr[0].nextSibling);
//第一个子节点是没有previousSibling的
console.log(arr[0].previousSibling);
        }
        function convertToArray(nodes){
            var array=null;
            try{
                array=Array.prototype.slice.call(nodes,0);
            }catch(ex){
                array=new Array();
                for(var i=0,len=nodes.length;i<len;i++){
                    array.push(nodes[i]);
                }
            }
            return array;
        }
    </script>
</head>
<body>
    <ul id="ul1">
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
</body>
</html>

登录后复制

某个父节点的子节点所有的parentNode都是指向同一个节点，以上代码循环打出的，如下：

另外每个子节点都会有nextSibling和preciousSibling，当然，如果是第一个子节点则无previousSibling，而最后一个子节点是没有nextSibling的，返回的结果都是为null

每个子节点的集合中都会有firstChild和lastChild，只有当没有子节点的情况下，这两个值都为null，才相等。

以上是DOM中的parentNode总结的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7773

Java教程

1644

CakePHP 教程

1399

Laravel 教程

1296

PHP教程

1234

显示更多

Related knowledge

总结Linux系统中system()函数的用法 Feb 23, 2024 pm 06:45 PM

Linux下system()函数的总结在Linux系统中，system()函数是一个非常常用的函数，它可以用于执行命令行命令。本文将对system()函数进行详细的介绍，并提供一些具体的代码示例。一、system()函数的基本用法system()函数的声明如下：intsystem(constchar*command);其中，command参数是一个字符

parentnode使用方法 Sep 18, 2023 am 10:17 AM

parentnode使用方法：1、创建一个html的示例文件；2、通过getElementById方法获取到id为"child"的节点对象；3、使用parentNode属性获取到该节点的父节点对象；4、通过输出父节点的id为"parent"即可。

ppt总结报告怎么写怎么才能写好 Mar 19, 2024 pm 08:16 PM

总结报告是职场生存的必备技能，如果有一篇条理清晰的PPT总结报告，既可以节省领导的时间，又可以有重点的总结工作，一定可以让领导印象深刻。ppt总结报告怎么写呢？一起来看看吧！我们打开一个案例文件，根据这个案例进行讲解。这个案例看起来有点过时，具体可见下图。2、我们既然要修改刚刚的PPT，我们来针对性的讲解一下他存在的问题，具体如图示。3、这里为同学们介绍一个【配色】的网站，vanschneider.com网站，这里网站在配色方面还是非常的丰富，具体如图示。4、这里我们将PPT的文字素材准备好，然

Git工作流程管理经验总结 Nov 03, 2023 pm 06:45 PM

Git工作流程管理经验总结引言：在软件开发中，版本管理是一个非常重要的环节。而Git作为目前最流行的版本管理工具之一，其强大的分支管理能力使得团队协作更加高效灵活。本文将就Git工作流程管理经验进行总结和分享。一、Git工作流程简介Git支持多种工作流程，可以根据团队的实际情况选择合适的工作流程。常见的Git工作流程有集中式工作流、功能分支工作流、GitF

探索自然本源！谷歌2022年终总结第七弹：「生化环材」如何吃上机器学习红利？ Apr 11, 2023 pm 07:19 PM

随着机器学习和量子计算的巨大进步，我们现在有了更强大的新工具，能够以新的方式与各行业研究者合作，并从根本上加速突破性科学发现的进展。本期谷歌年终总结的主题是「自然科学」，文章作者为谷歌研究院的杰出科学家John Platt，1989年博士毕业于加州理工大学。自从八年前加入 Google Research 以来，我有幸成为一个天才研究人员的社区的一员，致力于应用前沿计算技术来推动应用科学的可能性，目前团队正在探索物理和自然科学的课题，从帮助组织全世界的蛋白质和基因组信息以造福人们的生活，到利用量

ThinkPHP开发经验总结：提升开发效率的技巧 Nov 22, 2023 pm 12:28 PM

ThinkPHP是一款流行的PHP开发框架，具有灵活、高效、易用等特点，被广泛应用于Web应用程序的开发中。在长期的开发实践中，我总结了一些提升开发效率的技巧，以下将分享给大家。一、充分利用ThinkPHP的核心功能ThinkPHP提供了众多强大的核心功能，如模型、视图、控制器等，我们需要充分利用这些功能来简化开发流程。首先，要正确使用MVC设计模式，将业务

总结CSS中的Margin属性 Feb 18, 2024 pm 10:11 PM

CSS中margin属性总结CSS中的margin属性用来设置元素的外边距，它可以控制元素与周围元素之间的间距。本文将对margin属性进行总结，并提供一些具体的代码示例供参考。margin属性有四个值，分别表示元素上、右、下和左的外边距。可以使用以下几种方式来设置margin值：单个值：设置所有方向的外边距都相等。例如：.margin{margin:

百度AI接口在Java开发中的应用案例解析与总结 Aug 13, 2023 pm 12:10 PM

百度AI接口在Java开发中的应用案例解析与总结随着人工智能技术的不断发展和应用，百度AI接口作为其中的一员，被广泛应用于各行各业。本文将对百度AI接口在Java开发中的应用案例进行解析与总结，通过代码示例来说明其具体的应用方式和效果。一、百度AI接口概述百度AI接口是基于百度的人工智能技术，通过API调用的方式提供给开发者使用的一套服务。它包含了丰富的功能

See all articles

DOM中的parentNode总结

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题