`
247687009
  • 浏览: 174000 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

js父,子,兄弟节点的查找方法

    博客分类:
  • JS
阅读更多

<div id="my">

            <div></div>

            <div></div>

            <div></div>

</div>

<script type="text/javascript">

var element =document.getElementById("my");

console.log(element.childNodes.length); //没做清理之前打印7 把换行算上了

       function clear(elem) {

              var es = elem.childNodes;

              for (var i = 0; i < es.length; i++) {

                     if (es[i].nodeName == "#text") { //如果是空格进行清理

                            elem.removeChild(es[i]);

                     }

              };

              return elem;

       }

       element= clear(element);

       console.log(element.childNodes.length); //清理之后为正确获取到的3个子节点

       //执行清理之后就可以正确的获取到了

       var chils= element.childNodes;  //得到s的全部子节点

       var parent=element.parentNode;   //得到s的父节点

       var next=element.nextSbiling;   //获得s的下一个兄弟节点

       var prev=element.previousSbiling;  //得到s的上一个兄弟节点

       var first=element.firstChild;   //获得s的第一个子节点

       var last=element.lastChile;   //获得s的最后一个子节点

 

 

</script>

分享到:
评论

相关推荐

    jquery的父、子、兄弟节点查找,节点的子节点循环方法

    本文将详细介绍jQuery中的父、子、兄弟节点查找以及节点的子节点循环方法。 首先,jQuery提供了多种方法来查找节点之间的关系: 1. **jQuery.parent(expr)**: 这个方法用于查找匹配指定表达式(expr)的直接父元素...

    JavaScript实现获取某个元素相邻兄弟节点的prev与next方法

    本文实例讲述了JavaScript实现获取某个元素相邻兄弟节点的prev与next方法。分享给大家供大家参考,具体如下: /** * 获取相邻元素 * @param ele 参考物元素 * @param type 类型,上一个(1)or下一个(0) * @return ...

    JS获取子、父、兄节点方法小结

    本篇文章将总结和介绍JavaScript中获取子节点、父节点、兄弟节点的方法,并提供两种获取兄弟节点的实现方式。 首先,了解一些DOM节点的基础知识是很有必要的。DOM节点是构成HTML文档的最小单元,包括元素节点、属性...

    js 获取元素所有兄弟节点的实现方法

    在JavaScript编程中,我们常常需要操作DOM元素的父、子、兄弟节点。获取元素的所有兄弟节点是常用的操作之一,它允许我们访问同一父元素下的其他子元素。本文将详细介绍如何使用原生JavaScript以及jQuery这两种方式...

    JavaScript获取HTML DOM节点元素的方法的总结

    5. `parentObj.getElementsByTagName(tagName)`:与全局的`document.getElementsByTagName()`类似,但在特定的父节点范围内查找指定标签名的子节点。 此外,还可以通过临近节点获取元素: 1. `neighbourNode....

    jQuery获取父元素节点、子元素节点及兄弟元素节点的方法

    - `find()`方法:虽然通常用于查找子元素,但也可以用来获取父元素,尤其是当元素嵌套较深时。例如,`$("#dwtedx").find("ul");`可以找到`dwtedx`元素下所有的`ul`子元素。 兄弟元素节点的获取:要获取兄弟节点,...

    JS获取父节点方法

    本文将详细介绍几种常用的JS获取父节点的方法。 首先,我们可以通过顶级节点`document`来获取元素。`document.getElementById(elementId)`是最常见的方式,通过元素的ID直接获取特定节点。如果ID在页面上是唯一的,...

    jquery插入兄弟节点的操作方法

    在本文中,我们将深入探讨如何使用jQuery来插入兄弟节点,这将帮助你更好地理解和利用这个强大的JavaScript库来动态地更新网页内容。 1. **`prepend()`** 方法: `prepend()` 方法用于在每个匹配元素的开头插入...

    js代码-查找两个节点的最近的一个共同父节点,可以包括节点自身 oNode1 和 oNode2 在同一文档中,且不会为相同的节点

    在DOM树中,节点可以通过父节点、子节点和兄弟节点的关系来组织。当我们提到“最近的共同父节点”,就是指在所有包含oNode1和oNode2的父节点中,离这两个节点最近的那个。 解决这个问题的方法通常分为两种:递归和...

    jquery查找节点

    首先,我们来了解几个基础的jQuery节点查找方法: 1. **`$()`**:这是jQuery的核心函数,可以用于选取DOM元素。例如,`$('div')`会选择所有的`&lt;div&gt;`元素。如果提供的是CSS选择器,如类名或ID,jQuery会返回匹配的...

    javascript 获取HTML DOM父、子、临近节点

    以下是一些核心的JavaScript DOM操作方法,用于获取HTML文档中的父、子、临近节点。 1. **通过顶层document节点获取**: - `document.getElementById(elementId)`:此方法是获取元素的最常用方式,通过元素的ID...

    JavaScript节点知识

    7. `nextSibling`、`previousSibling`:返回当前节点的下一个和上一个兄弟节点,只读。 8. `nodeName`、`nodeType`:分别返回节点的名称和类型,只读。 9. `nodeTypedValue`、`nodeValue`:可以读写节点的值。 10. `...

    课题-js和jquery获取父级元素、子级元素、兄弟元素的方法.pdf

    接下来,我们可以使用`childNodes`来获取所有子节点,`parentNode`获取父节点,`nextSibling`和`previousSibling`分别获取当前元素的下一个和上一个兄弟节点,`firstChild`和`lastChild`则分别获取第一个和最后一个...

    JS获取节点的兄弟,父级,子级元素的方法

    了解如何精确获取元素的兄弟节点、父节点或子节点,可以帮助我们更精确地定位到需要操作的DOM部分。 此外,文档中还提到了正则表达式和`RegExpObject.test(string)`方法的使用。这是因为在某些情况下,我们需要检查...

    JQ 查找节点

    下面将详细阐述jQuery中用于查找节点的相关知识点。 1. **选择器(Selectors)**: jQuery的选择器是基于CSS选择器的,允许开发者根据ID、类名、属性、标签等来选取元素。例如: - `$("#myID")` 选择ID为"myID"的...

    JS查找孩子节点简单示例

    4. **`nextSibling`**: 这个属性返回当前节点后面紧邻的同级节点,可以用来遍历元素的兄弟节点。 5. **文本节点处理**:在HTML中,文本通常作为文本节点存在,而不仅仅是元素。因此,有时候我们需要跳过空白文本...

    jQuery查找节点方法完整实例

    以下是几个常用的节点查找方法: 1. **`$()`**:这是jQuery的核心选择器,可以接受CSS选择器、HTML字符串或DOM元素作为参数,返回一个jQuery对象,表示匹配的节点集合。例如,`$("p")`会选取所有的`&lt;p&gt;`标签。 2. ...

    JavaScript节点.pdf

    3. 如果`targetElement`不是其父节点的最后一个子元素,我们查找它的下一个兄弟元素(`targetElement.nextSibling`),并使用`insertBefore()`方法将`newElement`插入到这个兄弟元素之前。 在实际应用中,我们可以...

    js与jquery获取父级元素,子级元素,兄弟元素的实现方法

    - `find()`方法用于查找所有后代元素,不仅仅是直接子元素,可以使用选择器来过滤结果。例如,`$("#dom").find("div")`会获取ID为`dom`的元素下所有后代中的`div`元素。 - `contents()`方法返回所有子节点,包括...

    jquery 删除节点 添加节点 找兄弟节点的简单实现

    - `nextAll()`方法:与`prevAll()`类似,但用于查找之后的所有兄弟节点。 - `siblings()`方法:此方法返回当前元素的所有兄弟节点,包括前一个和后一个。 在使用上述方法时,需要指定选择器来精确选中目标元素。...

Global site tag (gtag.js) - Google Analytics