一. 基本概念

1.1 DOM

DOM(Document Object Model), 把网页转换成JS对象,可以用脚本进行各种操作。浏览器将结构化文档(HTML/XML)解析成一系列的节点形成DOM tree。所有的节点和最终的树状结构都有API。

1.2 节点类型

  • 文档节点(document):9,对应常量Node.DOCUMENT_NODE
  • 元素节点(element):1,对应常量Node.ELEMENT_NODE
  • 属性节点(attr):2,对应常量Node.ATTRIBUTE_NODE
  • 文本节点(text):3,对应常量Node.TEXT_NODE
  • 文档片断节点(DocumentFragment):11,对应常量Node.DOCUMENT_FRAGMENT_NODE
  • 文档类型节点(DocumentType):10,对应常量Node.DOCUMENT_TYPE_NODE
  • 注释节点(Comment):8,对应常量Node.COMMENT_NODE

二. Node接口

2.1 Node接口属性

  1. Node.nodeType 返回整数,表示当前节点
  2. Node.nodeName 如果是element会返回大写的标签名 eg: 'DIV'
  3. Node.nodeValue 只有文本节点和注释节点有这个值,其余都是null
  4. Node.textContent 返回当前节点和后代所有节点的文本内容,忽略HTML标签(innerText)
  5. Node.baseURI 返回当前网页的绝对路径
  6. Node.nextSibling 返回下一个同级节点
  7. Node.previousSibling 返回同级的前一个节点
  8. Node.parentNode 返回父节点(可能是element/document/doucumentfragment)
  9. Node.parentElement 返回父元素节点
  10. Node.firstChild / lastChild 返回的可能是文本节点或注释节点
  11. Node.childNodes /children 对于childNodes会返回所有的节点(包括注释,文本等) 而chilren只返回element
    •   对与children[0]返回的一定是element 但是firstChild返回的可能是文本

2.2 Node接口方法

  1. Node.appendChild() 配合documen.createElement('tagName')
  2. Node.hasChildNodes() 返回bool
  3. Node.cloneNode(true/false) true clone子节点,但是会丢失所有的on-属性和eventHandler
  4. Node.insertBefore(newNode, referenceNode) 把newNode 插在Node内部referenceNode之前
    •   referenceNode 为null则插在Node最后
    •   没有insertAfter,可以通过Node.insertBefore(newNode, referenceNode.nextSibling)
  5. Node.removeChild(childNode)
  6. Node.replaceChild(newNode, oldNode)
  7. Node.contains(node)
  8. Node.isEqualNode() 返回两个节点的类型、属性、子节点相同
  9. Node.isSameNode() 返回两个节点是否为同一个节点

三. NodeList 接口

通过Node.childNods document.querySelectorAll() document.getElementsByTagName()等方法获得

  1. NodeList.prototype.forEach() NodeList是类数组对象,但可以使用forEach

    •   通过Array.prototype.slice.call()将其转化成array
    • nodelist.forEach( function(item, index, list))
  2. NodeList.prototype.length
  3. NodeList.prototype.item(i) 返回第i
  4. NodeList.prototype.keys() NodeList.prototype.values() NodeList.prototype.entries()
    •   可以用for (let key of nodelist.keys())
    • for (let value of nodelist.values())
    • for (let entry of nodelist.entries())

四. HTMLCollection接口

通过HTMLCollectionm没有forEach循环,只有element元素

  1. HTMLCollection.prototype.length
  2. HTMLCollection.prototype.item(i)

五. ParentNode接口

  1. ParentNode.childern 返回当前节点的元素子节点
  2. ParentNode.firstElementChild 返回第一个元素子节点
  3. ParentNode.lastElementChild 返回最后一个元素节点
  4. ParentNode.append() ParentNode.prepend() 像parent node中插入子节点

六. ChildNode接口

  1. childNode.remove() 移除某一个node
  2. childNode.before(node) childNode.after(node) 在某一个node前后插入node,共有一个parentNode
  3. childNode.replaceWith() 替换当前的节点

七. document对象

Node总结的更多相关文章

  1. babeljs源码

    babel.min.js!function(e,t){"object"==typeof exports&&"object"==typeof mo ...

  2. NPM (node package manager) 入门 - 基础使用

    什么是npm ? npm 是 nodejs 的包管理和分发工具.它可以让 javascript 开发者能够更加轻松的共享代码和共用代码片段,并且通过 npm 管理你分享的代码也很方便快捷和简单. 截至 ...

  3. node服务的监控预警系统架构

    需求背景 目前node端的服务逐渐成熟,在不少公司内部也开始承担业务处理或者视图渲染工作.不同于个人开发的简单服务器,企业级的node服务要求更为苛刻: 高稳定性.高可靠性.鲁棒性以及直观的监控和报警 ...

  4. node.js学习(三)简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理

    一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...

  5. 细说WebSocket - Node篇

    在上一篇提高到了 web 通信的各种方式,包括 轮询.长连接 以及各种 HTML5 中提到的手段.本文将详细描述 WebSocket协议 在 web通讯 中的实现. 一.WebSocket 协议 1. ...

  6. 高大上的微服务可以很简单,使用node写微服务

    安装 npm install m-service --save 使用 编写服务处理函数 // dir1/file1.js // 使用传入的console参数输出可以自动在日志里带上request id ...

  7. 构建通用的 React 和 Node 应用

    这是一篇非常优秀的 React 教程,这篇文章对 React 组件.React Router 以及 Node 做了很好的梳理.我是 9 月份读的该文章,当时跟着教程做了一遍,收获很大.但是由于时间原因 ...

  8. 利用Node.js的Net模块实现一个命令行多人聊天室

    1.net模块基本API 要使用Node.js的net模块实现一个命令行聊天室,就必须先了解NET模块的API使用.NET模块API分为两大类:Server和Socket类.工厂方法. Server类 ...

  9. Node.js:进程、子进程与cluster多核处理模块

    1.process对象 process对象就是处理与进程相关信息的全局对象,不需要require引用,且是EventEmitter的实例. 获取进程信息 process对象提供了很多的API来获取当前 ...

  10. Node.js:理解stream

    Stream在node.js中是一个抽象的接口,基于EventEmitter,也是一种Buffer的高级封装,用来处理流数据.流模块便是提供各种API让我们可以很简单的使用Stream. 流分为四种类 ...

随机推荐

  1. Int、bigint、smallint、tinyint的区别

    Bigint:从-2^63-2^63的整型数据(所有数字).存储大小为8个字节.Bigint已经有长度了,在mysql建表中的length,只是用于显示的位数. Int:从-2^31-2^31的整型数 ...

  2. JavaScript高级笔记

    # 今日内容:     1. JavaScript:         1. ECMAScript:         2. BOM:         3. DOM:             1. 事件 ...

  3. 关于JSON使用要注意的地方

    1.json     1.JSON对象;(ES5)         1)JSON.stringify() json---js[json字符串--->JavaScript对象]         2 ...

  4. docker技术基础

    1 Linux Namespace Linux Namespaces机制提供一种资源隔离方案.PID,IPC,Network等系统资源不再是全局性的,而是属于特定的Namespace.每个Namesp ...

  5. xml转dict

    xml转dict 最开始的时候一直是按格式比较严谨的XML格式进行的转换,所以一般只需要考虑两种情况就可以了,即各个节点或者子节点全相同或者全不同,全相同按list处理,全不同按dict处理,这么一想 ...

  6. linux7 grub配置文件 linux6 grub配置文件

    在 grub 的 kernel 配置后面,添加 acpi_pad.disable=1 重启机器之后,开机就不会自动加载 acpi_pad 模块 一:linux6 [root@node2 ~]# cat ...

  7. solr的一些查询语法

    以下内容来自solr中国 1.1. 首先假设我的数据里fields有:name, tel, address 预设的搜寻是name这个字段, 如果要搜寻的数据刚好就是 name 这个字段,就不需要指定搜 ...

  8. CSS多列布局(栅格布局)

    一.多列布局 CSS3 可以将文本内容设计成像报纸一样的多列布局,如下实例: 代码如下(具体的解释也在代码中)浏览器支持表格中的数字表示支持该方法的第一个浏览器的版本号. 紧跟在数字后面的 -webk ...

  9. 查看ubuntu系统信息

    root@k8s001:~/go/src/k8s.io/kubernetes# cat /etc/*release DISTRIB_ID=Ubuntu DISTRIB_RELEASE=16.04 DI ...

  10. 了解卷积神经网络如何使用TDA学习

    在我之前的文章中,我讨论了如何对卷积神经网络(CNN)学习的权重进行拓扑数据分析,以便深入了解正在学习的内容以及如何学习它. 这项工作的重要性可归纳如下: 它使我们能够了解神经网络如何执行分类任务. ...