`

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');

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    WEB 浏览器兼容 推荐收藏

    9. **取得元素属性**:在Firefox中,自定义属性需使用`getAttribute()`方法。 10. **`parentElement`和`children`问题**:Firefox使用`parentNode`和`childNodes`,而IE中可能使用`parentElement`和`children`。`...

    Projet6:DOM的Projet操作

    2. **遍历DOM树**:使用`childNodes`、`children`和`parentElement`等属性,可以遍历元素的子节点、子元素和父元素。这在需要操作相关元素时非常有用。 3. **添加与删除元素**:`createElement()`用于创建新元素,`...

    C#读取XML配置文件

    例如,`//host[@name='localhost']`表示查找所有`name`属性等于“localhost”的`host`元素。 在提供的XML配置文件中,包含了多个`host`节点,每个节点下有多个服务(`service`)及其相关设置。如果需要遍历所有...

    js浏览器兼容手册OSOS.pdf

    1. `document.form.item`问题:在IE中,可以使用`document.formName.item("itemName")`来访问表单元素,但在FF中不支持。解决方法是改为使用`document.formName.elements["elementName"]`。 2. 集合类对象问题:FF...

    阿里巴巴2016数据挖掘、前端开发工程师笔试及答案

    问哪种方式取得的子数组元素个数相对较多? **解析:** 这个问题可以通过简单的逻辑分析来解决。如果从头部开始连续取,则最多个数为数组的长度。而如果从任意位置开始连续取,理论上也可以取到数组的最大长度,...

    浏览器兼容的JS写法总结

    - 现有问题:IE可以使用parentElement获取父节点,parent.children获取所有子节点,Firefox不支持。 - 解决方法:使用parentNode和parent.childNodes。 3. 对childNodes的解释 - 现有问题:IE和Firefox对childNodes...

Global site tag (gtag.js) - Google Analytics