javascript中怎么找父级标签和子级标签

最新推荐文章于 2024-05-20 11:07:36 发布
最新推荐文章于 2024-05-20 11:07:36 发布
阅读量6.9k 收藏 12
点赞数 2
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SC2LQ/article/details/125825972
版权

一、JS中查找父标签的方法：

1、利用parentNode属性，语法“子元素对象.parentNode”；

2、借助Jquery中的parent()或parents()方法，语法“子元素对象.parent()”或“子元素对象.parents()”。

找父元素节点的方法有：

1、原生方法--parentNode属性

parentNode 属性可返回某节点的父节点。

元素.parentNode //返回元素的第一个父节点

2、Jquery方法(记得导包)

元素.parent() 返回元素的第一个父节点

元素.parents() 返回一个包含元素所有父节点的数组

下面有个例子:

<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

</head>

<body>

<div><span><a id="a"></a></span></div>

<script src="jquery-2.1.1.min.js"></script>

<script>

    //原生的方法

    document.getElementById('a').parentNode //得到<span>节点

    //也可以这么玩

    document.getElementById('a').parentNode.parentNode //得到<div>节点



    //Jquery的方法  记得导包哦

    $('#a').parent();//得到<span>节点

    $('#a').parent().parent();//得到<div>节点

    $('#a').parents();//得到所有父级节点   <span> ,<div> ,<body> ,<html>

    $('#a').parents('body');//得到<body>节点

</script>

</body>

</html>

找子元素节点的方法有：

1、原生方法--childNodes属性

childNodes 属性可返回某节点的子节点。

元素.childNodes //返回元素的第一个子节点

2、Jquery方法(记得导包)

元素.child() 返回元素的第一个子节点

元素.children() 返回一个包含元素所有父节点的数组

下面有个例子:

<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

</head>

<body>

<div id="div"><span><a></a></span></div>

<script src="jquery-2.1.1.min.js"></script>

<script>

    //原生的方法

    document.getElementById('id').childNodes   //得到<span>节点

    //也可以这么玩

    document.getElementById('id').childNodes.childNodes //得到<a>节点



    //Jquery的方法  同样记得导包哦

    $('#div').child();//得到<span>节点

    $('#div').child().child();//得到<a>节点

    $('#div').children();//得到所有父级节点   <span> ,<a>

    $('#div').children('a');//得到<a>节点

</script>

</body>

</html>

       阅读更多，请打开：javascript中怎么找父级标签和子级标签 - 微超之家

 

CSharp精选营
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM操作-通过关系来获取元素
qq_58167492的博客
07-14 1849
DOM操作之如何通过关系来获取元素
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
10-21
本文主要探讨的是如何使用jQuery来遍历DOM的父级元素、子级元素和同级元素。 首先，我们来看如何遍历父级（祖先）元素： 1. `parent()`：这个方法用于获取一个元素的直接父元素。例如，如果你有一个`<span>`元素，...
获取标签下子标签的方法
ll123c的博客
04-02 5434
分析： 想要获取标签下子标签，首先要获取外层标签 第一步：通过getElementById()获取外层的标签 第二步：获取标签内子标签的唯一有效方法是使用document的getElemetnsByTagName()方法。 <html> <head> <title>html示例</title> </head&gt...
JavaScript 获取 HTML 中特定父元素下的子元素
最新发布
qq_39454432的博客
05-20 630
JavaScript 获取 HTML 中特定父元素下的子元素
原生js 获取到DOM相对于父标签的下标、获取DOM到指定标签类型的父节点、获取DOM到指定标签类型的子节点
小明的博客
01-19 1649
代码简单，废话不多说 首先： html代码 <table id = "tableCS"> <tbody> <tr> <td> <button>按钮1</button> </td> <td></td> </tr> <tr id = "trCS"><td></td><td></td></t
jQuery父级以及同级元素查找介绍
萧刚
02-18 806
jQuery.parent(expr) 找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素 jQuery.children(expr).返回所有子节点，这个方法只会返回直
js获取li标签中子标签属性
weixin_42854483的博客
09-19 2313
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
js获取父级节点、子集节点、兄弟节点方法
诚实可靠小郎君的博客
12-05 5680
一.js获取父级节点 1. document.getElementById("test").parentElement; 2. document.getElementById("test").parentNode; 3.document.getElementById("test").offsetParent; // 获取所有父节点，返回数据为数组类型 二.js获取子集节点 1. ...
jQuery树形菜单打开标签代码
06-24
1. **创建HTML结构**：构建树形菜单的基本HTML结构，包括父级和子级节点，以及用于显示内容的选项卡部分。 2. **CSS样式**：使用CSS来美化菜单和选项卡的外观，包括颜色、字体、边距等，使其符合页面设计风格。 3....
struts2 doubleselect标签的用法例子
12-08
`doubleselect`标签通常包含两个部分：父级选择器和子级选择器，它们之间的关联可以通过服务器端的数据来建立。 1. **配置Action类**： 首先，我们需要创建一个Struts2 Action类，它将负责处理用户的选择并返回...
使用CSS和JQueryHTML中的Treeview
04-03
在创建Treeview时，我们可以使用`<ul>`和`<li>`标签来表示层级关系。`<ul>`代表无序列表，`<li>`则表示列表项。例如： ```html 父节点 子节点1 子节点2 ``` 接下来，我们利用CSS来美化这个基本的...
js子父级菜单上下展开
09-23
点击父级子级展开，或者收起 <script type=text/javascript><!-- var LastLeftID = ""; function menuFix() { var obj = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i<obj.length; i++) { obj[i].onmouseover=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } obj[i].onMouseDown=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } obj[i].onMouseUp=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } obj[i].onmouseout=function() { this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), ""); } } } function DoMenu(emid) { var obj = document.getElementById(emid); obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded"); if((LastLeftID!="")&&(emid!=LastLeftID)) //关闭上一个Menu { document.getElementById(LastLeftID).className = "collapsed"; } LastLeftID = emid; } function GetMenuID() { var MenuID=""; var _paramStr = new String(window.location.href); var _sharpPos = _paramStr.indexOf("#"); if (_sharpPos >= 0 && _sharpPos < _paramStr.length - 1) { _paramStr = _paramStr.substring(_sharpPos + 1, _paramStr.length); } else { _paramStr = ""; } if (_paramStr.length > 0) { var _paramArr = _paramStr.split("&"); if (_paramArr.length>0) { var _paramKeyVal = _paramArr[0].split("="); if (_paramKeyVal.length>0) { MenuID = _paramKeyVal[1]; } } /* if (_paramArr.length>0) { var _arr = new Array(_paramArr.length); } //取所有#后面的，菜单只需用到Menu //for (var i = 0; i < _paramArr.length; i++) { var _paramKeyVal = _paramArr[i].split('='); if (_paramKeyVal.length>0) { _arr[_paramKeyVal[0]] = _paramKeyVal[1]; } } */ } if(MenuID!="") { DoMenu(MenuID) } } GetMenuID(); //*这两个function的顺序要注意一下，不然在Firefox里GetMenuID()不起效果 menuFix(); --></script>
javascript 树形导航菜单实例代码
12-12
在这个例子中，菜单项分为父级（parent）和子级（child）。父级菜单项通常会包含一个触发展开或折叠子级菜单的事件处理函数，例如`onclick`事件。 2. **CSS 样式**： CSS用于定义菜单的视觉样式。`.parent`类用于...
js获取父级html元素,js获取当前元素所有子级元素的（js获取父级元素下面的所有子元素）...
weixin_28730403的博客
06-07 5943
以ul,li为例，获取ul下所有li标签一号二号三号四号leta=document.getElementById('nav').children//获取ul下的所有子级console.log(a)获取到的是HTMLCollection格式的，这种格式不方便我们操作(如：不能执行数组的push、concat等方法)，所以我们需要将其转换成数组HTMLCollection --> Arr...
JS树与父级相关
一个前端工作者的博客
06-01 118
树
原生js或者jquery获取父级元素/同级元素/下级元素【转载】
Aubrey.J的博客
02-28 3473
原生js或者jquery获取父级元素/同级元素/下级元素
js获取子级元素
王百林的博客
08-25 1461
var a = docuemnt.getElementById("test").getElementsByTagName("div");
jquery怎么获取当前标签下的子标签
aici0819的博客
09-22 2550
1.var num1=$("ul > a:eq(0)").attr("ID");2.var num2=$("ul").children("a:eq(0)").attr("ID");3.var num3=$("ul").find("a:eq(0)").attr("ID"); 转载于:https://www.cnblogs.com/chenlove/p/9691056.html...
如何创建父级标签和多个子级标签
07-22
要创建父级标签和多个子级标签，可以按照以下步骤进行操作： 1. 在 `<script setup>` 标签中导入 `ref` 和 `onMounted` 函数。 ```javascript <script setup> import { ref, onMounted } from 'vue'; </script> ``` 2. 创建一个 ref 变量来存储要渲染的数据。 ```javascript <script setup> const myData = ref(['Child 1', 'Child 2', 'Child 3']); </script> ``` 3. 在 `onMounted` 生命周期钩子函数中创建父级标签和子级标签。 ```javascript <script setup> onMounted(() => { const parentElement = document.createElement('div'); // 创建父级标签 parentElement.classList.add('parent-element'); myData.value.forEach(childData => { const childElement = document.createElement('div'); // 创建子级标签 childElement.classList.add('child-element'); childElement.textContent = childData; parentElement.appendChild(childElement); }); document.body.appendChild(parentElement); }); </script> ``` 在这个示例中，我们使用 `myData` 数组中的数据循环创建子级标签，并将它们添加到父级标签中。 4. 在 CSS 文件中定义 `.parent-element` 和 `.child-element` 类的样式。 ```css .parent-element { background-color: #f1f1f1; padding: 10px; } .child-element { margin-bottom: 5px; padding: 5px; background-color: #ffffff; } ``` 这样，我们创建了一个带有父级标签和多个子级标签的 DOM 结构，并为它们应用了 CSS 样式。 请确保在适当的时机调用 `onMounted` 函数，并在 CSS 文件中定义所需的样式。你可以根据自己的需求进行进一步的修改和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值