美文网首页
DOM中NodeList&NamedNodeMap&am

DOM中NodeList&NamedNodeMap&am

作者: 刘翾 | 来源:发表于2017-11-09 08:58 被阅读7次

NodeList

每个节点都有一个childNodes属性, 其中保存这一个NodeList对象. NodeList是一种类数组对象, 用于保存一组有序的节点, 可以通过位置来访问这些节点. NodeList对象的独特之处在于, 它实际上是基于DOM结构动态执行查询的结果, 因此DOM结构的变化能够自动反映在NodeList中. NodeList是"动态的":

var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes, 0);//可以用于将NodeList转换化为真正的数组

NamedNodeMap

与NodeList类似, 也是一个"动态"的集合. 元素的特性都由一个Attr节点表示, 每一个节点都保存在NamedNodeMap对象中. NamedNodeMap对象有下列方法.

名称 功能
getNamedItem(name) 返回nodeName属性等于name的节点
removeNamedItem(name) 从列表中移除nodeName属性等于name的节点
setNamedItem(node) 向列表中添加节点, 以节点的nodeName属性为索引
item(pos) 返回位于数字pos位置处的节点
//例
var id = element.attributes.getNamedItem('id').nodeValue;
//或者
var id = element.attributes["id"].nodeValue;

HTMLCollection

一种常用于取得元素引用的方法是getElementsByTagName( ). 即要取得元素的标签名, 而返回的是包含零或者多个元素的NodeList. 在HTML文档中, 这个方法会返回一个HTMLCollection对象, 作为一个"动态"集合, 该对象与NodeList非常类似.

//例: 会取得页面中所有的<img>元素, 并返回一个HTMLCollection.
var image = document.getElementsByTagName("img");
名称 功能
item()或者方括号 访问HTMLCollection对象中的项
namedItem() 使用这个方法可以通过元素的name特性取得集合中的项

一些方法

名称 功能
item()或者方括号 访问HTMLCollection对象中的项
namedItem() 使用这个方法可以通过元素的name特性取得集合中的项
<img src="ss,gif" name="myImage">
//例如刚刚的image
var myImage = image.namedItem("myImage");
//会返回第一行的标签

相关文章

  • DOM中NodeList&NamedNodeMap&am

    NodeList 每个节点都有一个childNodes属性, 其中保存这一个NodeList对象. NodeLis...

  • 3、DOM

    3.1 文档: DOM中的"D" 如果没有document(文档),DOM也就无从谈起。 3.2 对象: DOM中...

  • JQuery 17

    jQuery中的DOM操作 DOM操作的分类 DOM操作分为3个方面,即DOM Core(核心)、HTML-DOM...

  • 会jquery 就能快速快速上手 vue? 你仿佛在说笑

    vue和jquery 操作DOM的区别 jquery 操作Dom 的思维:获取Dom元素 步骤: 1、在dom中输...

  • 19.DOM 进阶

    学习要点: 1.DOM 类型2.DOM 扩展3.DOM 操作内容 DOM 自身存在很多类型,在 DOM 基础课程中...

  • DOM

    DOM级别 DOM0 通过元素的事件属性(onclick)来进行绑定处理函数 DOM2(DOM标准中没有定义DOM...

  • HTML DOM 事件

    HTML DOM 事件 HTML DOM 事件 HTML DOM 事件允许Javascript在HTML文档元素中...

  • react的设计思想

    1.Virtual DOM(虚拟dom) 为什么要使用虚拟dom呢1.dom渲染在渲染中是最昂贵的,尽量减少dom...

  • react学习-8.获取真实DOM节点

    React中的DOM也是虚拟DOM(virtual DOM),只有当它插入文档以后,才会变成真实的DOM。Reac...

  • DOM

    DOM 简介:DOM,全称Document Object Model文档对象模型。JS中通过DOM来对HTML文档...

网友评论

      本文标题:DOM中NodeList&NamedNodeMap&am

      本文链接:https://www.haomeiwen.com/subject/dchumxtx.html