`

动态的nodeList

 
阅读更多

 

var links = document.getElementsByTagName('a');
// links.length === 2 for instance.

document.body.appendChild( links[0].cloneNode(true) ); // another link is added to the document
// the 'links' NodeList is automatically updated
// links.length === 3 now.

 

 

假设html代码如下

 

 

<div id="test">
    <a href="#"></a>
</div>

 

 

JS

 

 

var links = document.getElementsByTagName("a");
//links.length === 2

var div = document.getElementById("test");

var a = document.createElement("a");

div.appendChild(a);

//links.length===3

 同样如果使用

div.appendChild(links[0]);

可以直接将第一个a标签放到最后,这是links中数组的顺序也改变

 

参考:https://developer.mozilla.org/en/DOM

分享到:
评论

相关推荐

    dojo命令和nodeList的详细介绍

    通过深入理解Dojo命令和NodeList,开发者可以更好地掌握前端开发中的DOM操作,创建出更加动态和交互性强的Web应用。同时,Dojo提供的各种工具和方法,配合NodeList的灵活使用,可以实现复杂的功能,如数据绑定、事件...

    javascript 使用 NodeList需要注意的问题

    首先,NodeList、NamedNodeMap和HTMLCollection都是动态集合。这意味着这些集合的内容会随着DOM的变化而实时更新,它们总是保持最新状态。例如,当一个元素被添加到DOM中时,它们会自动更新包含这个新元素;当一个...

    js中将HTMLCollection NodeList 伪数组转换成数组的代码.docx

    - 它是一个动态集合,这意味着如果文档中的元素发生变化,该集合也会随之变化。 - 典型获取`HTMLCollection`的方式包括使用`document.getElementsByTagName()`、`document.getElementsByName()`等方法。 2. **...

    原生JS实现循环Nodelist Dom列表的4种方式示例

    JavaScript的DOM操作是网页动态效果和交互的核心,掌握好这些方法,对于提升页面性能和用户体验都至关重要。在学习JavaScript的过程中,不断积累和理解DOM操作的技巧,可以帮助你编写出更高效、更优雅的代码。

    javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异

    首先,`NodeList`是DOM API中一个接口,它代表了一组动态更新的节点列表。`NodeList`主要由DOM查询方法如`getElementsByTagName`、`getElementsByClassName`等返回。`NodeList`接口包含两个主要的方法: 1. `item...

    arrgh.js:无痛动态函数参数

    Arrgh.js - 无痛动态函数参数 你知道那种痛吗? JavaScript 中的动态类型很棒,它为创建 API 提供的灵活性也很棒。 然而,在 ES5 中没有命名参数,以及 JavaScript 处理函数参数的严格方式,它引入了很多代码异味。...

    js -- childNodes

    `NodeList`不是一个数组,而是一个动态的集合,它会随着DOM树的变化实时更新。因此,不能直接对`NodeList`使用数组方法,但可以通过转换为数组来实现。例如,`Array.from(nodeList)`可以将`NodeList`转换为数组,...

    js基础之DOM中元素对象的属性方法详解

    NodeList是动态的,这意味着在每次访问时,DOM都会重新计算NodeList,这可能导致性能问题。 下面列举了HTML DOM中元素节点共有的属性和方法: 1. element.id:设置或返回元素的id属性值。 2. element.innerHTML:...

    用jsp实现类似资源管理器的树状菜单

    本项目的核心功能在于能够动态地显示文件系统中的文件夹和文件,并支持一系列操作,如上传文件、创建新文件夹、重命名文件或文件夹以及删除等。这些功能主要通过三个核心类来实现:`Node` 类、`NodeList` 类和 `Tree...

    XML实现动态加载树实例.rar_XML VC_java xml_javascript xml_xml_xml ctreect

    你可以使用`DocumentBuilderFactory`和`DocumentBuilder`来解析XML,然后通过`NodeList`和`Node`接口构建树结构。 4. **JavaScript中的XML处理**: JavaScript中,XML数据可以通过`XMLHttpRequest`对象异步加载,...

    java 反射对XML的解析

    在Java中,反射主要用于在运行时动态地获取类的信息(如类名、方法名、参数类型等)以及操作类的对象。而XML(eXtensible Markup Language)是一种用于标记数据的语言,广泛应用于数据交换、配置文件和数据存储等...

    gwt 获取前台所有input 标签.docx

    值得注意的是,这个方法仅能获取到当前页面已加载的`&lt;input&gt;`标签,如果存在动态加载的输入元素,可能需要使用事件监听或其他机制来确保获取到它们。 除了上述方法,GWT还提供了`DOM`类,它包含了更多的DOM操作方法...

    js动态时间.pdf

    4. `getElementsByTagName()`: 此方法返回指定标签名的所有元素,作为NodeList集合: ```javascript var allAs = document.getElementsByTagName('a'); ``` 5. `getElementsByName()`: 用于根据名称获取元素,但要...

    Looping through a HTML list with JavaScript.zip

    在JavaScript中,遍历HTML列表是一项常见的任务,特别是在动态操作DOM元素或处理用户交互时。本文将深入探讨如何使用JavaScript有效地循环遍历HTML列表,并提供实际的代码示例。 首先,HTML列表通常由`&lt;ul&gt;`(无序...

    JavaScript HTML DOM 节点列表

    它是一个动态的、非活化的节点列表,通常由DOM查询方法如`getElementsByTagName`、`getElementsByClassName`或`querySelectorAll`返回。这些方法从文档中选取一组匹配特定选择器的元素,将它们以`NodeList`的形式...

    XML应用开发(软件品牌)-1期 6.3 案例分析-XML DOM访问节点.doc

    由于NodeList是一个动态集合,它的`length`属性表示当前集合中元素的数量。通过`for`循环,我们可以依次访问每个元素节点,获取其子节点的值。在这个例子中,循环遍历所有`&lt;title&gt;`元素,并打印出它们的文本内容,即...

    xmldom4jxmldom4jxmldom4j

    DOM是一种W3C推荐的标准,用于表示XML文档的树状结构,允许程序和脚本动态地访问和更新文档内容、结构和样式。XMLDOM4J是DOM的一种实现,但它对DOM进行了优化,使其更适合Java开发者使用。 XMLDOM4J的主要特点包括...

    javascript 变态的节点集合

    首先,`NodeList`是JavaScript中一个重要的概念,它是一个动态的节点列表,通常通过DOM方法如`getElementsByTagName`, `getElementsByClassName`或`querySelectorAll`获取。`NodeList`并不是真正的数组,尽管它可以...

Global site tag (gtag.js) - Google Analytics