`

childNodes 取得子元素

 
阅读更多

 

取得div下级所有元素

1 childNodes 取得所有子节点(TEXT_NODE+ELEMENT_NODE下面会介绍),

  问题:多选出一些对象TEXT_NODE

  解决:过滤掉 

 

节点常量对照表

 NodeType 节点类型  Named Constant 指定常量

 

1ELEMENT_NODE

2ATTRIBUTE_NODE

3TEXT_NODE

4CDATA_SECTION_NODE

5ENTITY_REFERENCE_NODE

6ENTITY_NODE

7PROCESSING_INSTRUCTION_NODE

8COMMENT_NODE

9DOCUMENT_NODE

10DOCUMENT_TYPE_NODE

11DOCUMENT_FRAGMENT_NODE

12NOTATION_NODE

 

2 用层级查找实现 

  类似: document.getElementById('div2').getElementsByTagName('span');

 

 

 <div id="div2">
	<span class="s">2第一个span</span>
	<span class="s">2第二个span</span>
	<span class="s">2第三个span</span>
</div>

 

 

  方法1 例子

    //查找孩子节点 
    function findChildred(domEle){
    	var children = [] ; 
        var nodes = domEle.childNodes;
        for(var i=0  ;i<nodes.length ;i++ ){
        	if(nodes[i].nodeType==1){//如果是元素节点
        		children.push( nodes[i]);
        	} 
        }
        return children;
    }

 

 

 方法2例子

 var spans = document.getElementById('div2').getElementsByTagName('span');

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    JS中用childNodes获取子元素换行会产生一个子元素

    在JavaScript中,`childNodes`属性是用来获取一个节点(如元素节点、文本节点、注释节点等)的所有子节点的集合。然而,一个容易被忽视的细节是,当HTML代码中的子元素之间存在换行时,这些换行会被解析为文本节点,...

    js -- childNodes

    在JavaScript的世界里,`childNodes` 是一个非常重要的属性,它用于获取任何节点(如元素、文本或注释)的所有子节点。这篇博文“js -- childNodes”深入探讨了这一概念,帮助开发者更好地理解和利用这个特性。 `...

    js获取元素下的第一级子元素的方法(推荐)

    2. **childNodes属性**:此属性返回一个NodeList,包含了元素的所有子节点,包括文本节点、注释节点等。如果只想获取元素的子元素,它并不适用。 3. **getElementsByTagName()方法**:这是一个用于获取指定标签名的...

    IE6/7/8中使用innerHTML清空元素,其子元素也被清空

    2. **移除子节点**:如果你只想清空元素的HTML内容,但保留子元素,可以先使用`childNodes`属性获取子节点数组,然后逐个移除它们。例如: ```javascript var childNodes = element.childNodes; for (var i = 0; ...

    高效的获取当前元素是父元素的第几个子元素

    从一个索引序号,很容易得到该索引对应的子节点或者子元素,直接用parentNode.childNodes[index] 或 parentNode.children[index] 就行。 但反过来,已知一个节点或元素对象,要知道它的索引序号则没有那么直接了。 ...

    JavaScript操作DOM元素的childNodes和children区别

    childNodes属性返回指定元素的所有子节点,这包括元素节点、文本节点、注释节点等。在DOM树中,空白字符、换行符等也会被解析成文本节点(TextNode)。因此,如果你的HTML元素之间存在空白,那么这些空白也会被看作...

    childNodes 用法两例

    `childNodes` 是一个在DOM(文档对象模型)中非常重要的属性,它返回一个NodeList,包含了元素的所有子节点,包括文本节点、注释节点以及子元素。这个属性主要用于遍历和操作HTML或XML文档的结构。下面我们将详细...

    原生JS实现列表子元素顺序反转的方法分析

    本篇文章主要探讨了几种原生JS实现列表子元素顺序反转的方法,并分析了它们的性能差异。 1. **DOM操作方法** 这是最直观的方法,通过获取列表元素并逐个将其移动到末尾来实现反转。代码如下: ```javascript var...

    操作Dom中的子元素与兄弟元素的代码

    3. `childNodes`:返回一个NodeList,包含了当前元素的所有子节点,包括文本节点、注释节点等。 在实际操作中,需要注意空格问题。在某些浏览器中,连续的空格、换行会被解析成一个文本节点,因此在处理子元素时...

    childNodes.length与children.length的区别

    `childNodes.length`包括所有类型的子节点,而`children.length`仅计算元素节点。在处理DOM时,选择合适的方法取决于你的具体需求,是否需要包括文本和注释节点,还是只关注元素节点。同时,为了提高效率和避免不必...

    xml语言

    解决方法是使用 `xmlDc = xmlFile.childNodes.Item(1).childNodes` 语句来获取XML文档中的子元素,然后使用 `itemTypedValue` 属性来获取子元素的值。 在给定的XML文档中,还有一个问题,关于如何将XML文档中的数据...

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

    例如,获取ID为"test"的元素下的所有子元素,可以使用`getElementsByTagName()`方法: ```javascript var a = document.getElementById("test").getElementsByTagName("div"); ``` 然而,Firefox(FF)浏览器会将...

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

    例如,`document.getElementById("dom").childNodes`会获取ID为`dom`的元素下所有子节点。 2. **处理子节点** - 由于浏览器差异,如Firefox会把换行符也视作文本节点,可能会导致`childNodes`属性中包含多余的文本...

    JS操作元素方法

    例如,childNodes 属性返回当前元素所有子元素的数组,firstChild 属性返回当前元素的第一个下级子元素,nodeValue 属性指定表示元素值的读/写属性等。 方法是指 DOM 元素可以执行的操作,例如 getElementById 方法...

    使用 childNodes 和 rows,cells 操作表格列着色源代码

    本文包含两个源代码:使用 childNodes 操作表格列着色、使用 rows,cells 操作表格列着色。两种着色方式有什么区别?具体分析请参阅作者博客:http://blog.csdn.net/defonds/archive/2010/07/17/5741214.aspx。

    javascript获取指定节点父节点、子节点的方法

    3. parentObj.childNodes:获取已知节点的子节点数组,然后可以通过循环或者索引找到需要的节点。 4. parentObj.children:获取已知节点的直接子节点数组。 5. parentObj.getElementsByTagName(tagName):使用方法...

Global site tag (gtag.js) - Google Analytics