美文网首页工作生活
2019-07-01 JS(DOM 2)

2019-07-01 JS(DOM 2)

作者: 柳叁叁 | 来源:发表于2019-07-02 09:26 被阅读0次

(本文摘录于阮一峰老师所写文章,https://wangdoc.com/javascript/basic/index.html,作个人学习使用。)
1、节点都是单个对象,有时需要一种数据结构,能够容纳多个节点。DOM 提供两种节点集合,用于容纳多个节点:NodeList和HTMLCollection。

这两种集合都属于接口规范。许多 DOM 属性和方法,返回的结果是NodeList实例或HTMLCollection实例。主要区别是,NodeList可以包含各种类型的节点,HTMLCollection只能包含 HTML 元素节点。

2、NodeList实例是一个类似数组的对象,它的成员是节点对象。通过Node.childNodes、document.querySelectorAll()等节点搜索方法可以得到NodeList实例。NodeList实例很像数组,可以使用length属性和forEach方法。但是,它不是数组,不能使用pop或push之类数组特有的方法。

3、NodeList.prototype.keys(),NodeList.prototype.values(),NodeList.prototype.entries()
这三个方法都返回一个 ES6 的遍历器对象,可以通过for...of循环遍历获取每一个成员的信息。区别在于,keys()返回键名的遍历器,values()返回键值的遍历器,entries()返回的遍历器同时包含键名和键值的信息。

4、 image.png

5、document节点对象代表整个文档,每张网页都有自己的document对象。window.document属性就指向这个对象。只要浏览器开始载入 HTML 文档,该对象就存在了,可以直接使用。
document对象继承了EventTarget接口、Node接口、ParentNode接口。这意味着,这些接口的方法都可以在document对象上调用。除此之外,document对象还有很多自己的属性和方法。

6、Element对象继承了Node接口,因此Node的属性和方法在Element对象都存在。此外,不同的 HTML 元素对应的元素节点是不一样的,浏览器使用不同的构造函数,生成不同的元素节点,比如<a>元素的节点对象由HTMLAnchorElement构造函数生成,<button>元素的节点对象由HTMLButtonElement构造函数生成。因此,元素节点不是一种对象,而是一组对象,这些对象除了继承Element的属性和方法,还有各自构造函数的属性和方法。

相关文章

  • 2019-07-01 JS(DOM 2)

    (本文摘录于阮一峰老师所写文章,https://wangdoc.com/javascript/basic/inde...

  • virtual dom

    virtual dom --- 即虚拟dom 1.用js模拟DOM结构 2.DOM变化的对比,放在js层来做(js...

  • 图片旋转预览

    1.dom 2.js

  • virtual dom (虚拟dom)

    1. 用js模拟dom结构。 因为前端只有js为图灵完备语言。 2. 通过 js计算 减少 dom操作,节省性能 ...

  • layui取值

    1.js里取dom值 2.js里取model值 3.dom里取model值

  • 028 DOM

    DOM 一、JS中标签关系 二、JS操作页面标签 三、JS操作DOM一般步骤 1、创建标签 2、设置标签样式文本 ...

  • js DOM(2)

    节点的方法 appendChild() 用来插入节点例:document.body.appendChild(p);...

  • js基本

    #### javascript的组成 ```js 1.ECMAScript 2.Dom 文档对象模型(Dom,D...

  • vue3.0有哪些变化?

    ** 发展历程** vue.js1.x-----vue.js2.x 引入了虚拟DOM vue.js2.x问题 1)...

  • 8.Virtual Dom

    1.Vue.js 2.x 与 Vue.js 1.x 最大的区别就在于2.x使用了Virtual Dom(虚拟DOM...

网友评论

    本文标题:2019-07-01 JS(DOM 2)

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