js获取子元素,原生获取子元素

本文介绍了一种封装成公用方法的JS原生技术,用于简化和提高DOM节点操作的效率,通过实例展示了如何利用此方法批量删除特定类型的文本节点。

js原生获取子节点:

1.封装成公用方法,以便于复用.

function deleteTextNode(id) {

var _elem = document.getElementById(id),

      _child = _elem.childNodes,
                       i = 0; 
    for (; i < _child.length; i++) {
        if (_child[i].nodeName === "#text") {
            _elem.removeChild(_elem.childNodes[i]);
         }
    }
    return _child;
}

2.调用方法传入id获取到子元素.

var children = deleteTextNode("wrap");

 

获取子元素中的第二个元素可以通过以下几种方式: ### 原生 JS 方式 首先可以使用 `getElementsByClassName` 方法获取元素,再通过 `childNodes` 获取子元素集合,由于浏览器会把 `dom` 节点下的空格、换行、文本都当成一个元素,所以需要剔除这些非元素节点,之后就可以选择想要的第二个元素。示例代码如下: ```javascript // 获取第一个 demo 类 dom = document.getElementsByClassName('demo')[0]; // 获取 demo 类下面的所有子元素 children = dom.childNodes; // 剔除文本节点 for (var i = 0; i < children.length; i++) { if (children[i].nodeName == '#text') { children[i].parentNode.removeChild(children[i]); i--; } } // 选择第二个元素 var secondChild = children[1]; ``` 这种方法中,`getElementsByClassName` 用于获取指定类名的元素,`childNodes` 用于获取节点集合,通过遍历剔除文本节点后,就可以准确获取到第二个元素 [^1]。 ### 考虑浏览器解析问题的方式 当使用 `firstChild` 或 `childNodes` 时,浏览器会把换行和空格也解析为节点,所以获取第一个子元素可能会出现问题,同样的问题也会影响获取第二个元素。需要像处理 `childNodes` 一样处理,示例代码如下: ```javascript dom = document.getElementsByClassName('demo')[0]; children = dom.childNodes; var filteredChildren = []; for (var i = 0; i < children.length; i++) { if (children[i].nodeType === 1) { filteredChildren.push(children[i]); } } var secondChild = filteredChildren[1]; ``` 这里通过判断节点类型是否为元素节点(`nodeType === 1`)来过滤出元素节点,然后获取第二个元素 [^2]。 ### Vue 方式 在 Vue 中,如果需要获取点击元素的子元素,可以通过事件对象来操作。示例代码如下: ```vue <template> <div> <li class="del" @click="del($event)">删除</li> </div> </template> <script> export default { methods: { del(e) { // 获得点击元素的子元素集合 var children = e.currentTarget.children; if (children.length > 1) { var secondChild = children[1]; } } } } </script> ``` 在 Vue 中,通过 `e.currentTarget.children` 可以获取点击元素的子元素集合,然后获取第二个元素 [^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值