js中的children实时获取子元素

先看下面一个小例子的结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul,li{list-style:none;}
    </style>
</head>
<body>
<div id="wrap">
    <ul id="list"></ul>
</div>
<script>
    var oList = document.querySelector(‘#list‘);
    var lis1 = oList.querySelectorAll(‘li‘);
    var lis2 = oList.children;
    console.log(lis1.length);//0
    console.log(lis2.length);//0
    function createLi(){
        for(var i=0; i<10; i++){
            var li = document.createElement(‘li‘);
            li.innerHTML = i;
            oList.appendChild(li);
        }
    }
    createLi();
    console.log(lis1.length);//0
    console.log(lis2.length);//10
</script>
</body>
</html>

从上面的结果我们发现,我们发现同样是一开始就获取了ul的子列表,但是通过.querySelectorAll获取的子列表,在创建列表前和创建列表后,长度都为0,而通过.children方法获取的字列表,在列表创建前,长度为0,而创建之后,长度为10,为什么呢?

使用.children获取的是元素对象是一个实时更新的列表 可以看做一个数组对象 而使用querySelectorAll获取的是NodeList 与其他方式获取的NodeList不同 它不是节点集合 而是元素集合 并且是静态的 不会实时更新 相当于克隆了一个新数组

所以,我们在使用的时候要注意了哦,如果想要实时获取列表的变化,可以使用.children,反之,则使用.querySelectorAll(当然也包括getElementsByClassName和getElementsByTagNama)

childNodes也和children一样是实时获取元素的字列表(但两者还是有区别的,这里不再详细叙说,关于两者的区别网上有很多啦)
---------------------
原文:https://blog.csdn.net/lhjuejiang/article/details/80615054

原文地址:https://www.cnblogs.com/7qin/p/10639984.html

时间: 2024-11-08 23:54:40

js中的children实时获取子元素的相关文章

获取子元素节点(children,childNodes)

在js中获取元素节点有DOM对应的方法如getElementsByTagName()等等..对于获取子元素还有另外一种获取方法ChildNodes 不过ChidNodes在高级浏览器除(IE6-8)里面来说是"不太正常"的,因为它除了获取到了元素节点的同时也获取到了文本节点,这就是传说中的买一送一?不过,这个送一的活动咱们不想要的时候可以和nodeType结合,就可以进行筛选.代码如下 当然,这个判断是针对高级浏览器.IE6-8是不要进行nodeType的判断的,因为它本来获取的就是只

jquery获取子元素

Jquery获取子元素的方法有2种,分别是children()方法和find()方法. 下面我们分别来使用这两种方法,看看它们有何差异. children()方法:获取该元素下的直接子集元素 find()方法:获取该元素下的所有(包括子集的子集)子集元素 分别以以下HTML代码为例: <ul> <li>list1 <ul> <li>list1-1</li> <li>list1-2</li> </ul> <

[2] D3.js中如何使用数据和选择元素

对D3.js或数据可视化有兴趣的朋友欢迎到 www.ourd3js.com 讨论. 接着上一讲的内容,这次讨论如何选择元素和使用数据. 现在页面中有三行文字,代码为: <p>Hello World 1</p> <p>Hello World 2</p> <p>Hello World 3</p> 定义一个集合set,里面有三个元素: var set = ["I like dog","I like cat&qu

js 下获取子元素的方法

笔记核心: firstElementChild只会获取元素节点对象,从名称就可以看出来,firstChild则可以获取文本节点对象(当然也可以获取元素节点对象),比如空格和换行都被当做文本节点. js不同于jQuery,在获取DOM时,有很多不方便的地方,哎,没办法,原始的东东,虽然万能,但却不方便. 咱今天在使用原生js的时候,就遇见一个坑------>firstChild,具体是使用firstChild获取元素的第一个子节点,可是相当的悲剧!!! 这个是一个小模型: <div> &l

二、vue学习--父元素如何获取子元素的值,子元素如何获取父元素的值

下图是父元素: 下图是子元素,获取父元素的值,使用props定义属性,这样就可以获取到父元素上传过来的set .place.type,拿到值就可以做一些自己的逻辑处理 二.子元素给父元素传值? 下图为子元素将值传递出去的方式,使用emit将值公布给父元素,见下图: 父元素需要接受子元素给的值,在父元素中相应的要有propMethods属性,这个属性可以使用v-on的方式绑定,也可以使用@propMethods的方式,见下图: 上图中的login是处理事件,这里点击按钮时需要子元素来触发事件,所以

jquery点击获取子元素ID值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

NSString类中三个用于获取子字符串的方法:

NSString类中提供了这样三个方法用于获取子字符串: – substringFromIndex: – substringWithRange: – substringToIndex: 它们该怎么使用呢?见下面代码即可知道. NSString *str = @"12345"; -substringFromIndex: 以指定索引开始(包括指定索引的字符,索引从0开始),并包括之后的全部字符: // NSString *subString0 = [str substringFromInd

jquery 获取子元素的限制jquery

今天练习jqueryAPI发现一个问题就是子元素如果采用nth-child,元素不同就获取不到,因此一个父元素下的子元素标签必须相同,如果不同第一个元素可以用这个方法实现,但是如果第二元素及以后如果出现不同的元素就会获取不到了.如下: <div> <p>1</p> <a href="">123</a> <p>2</p></div> 采用$('div p:nth-child(1)').css(

由获取子元素的方法find和children所获

html代码如下 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <!--http://localhost:8080/ssh_easyui/test/findAndChildern.html--> <head> <meta http-equiv