Node总结
一. 基本概念
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接口属性
- Node.nodeType 返回整数,表示当前节点
- Node.nodeName 如果是element会返回大写的标签名 eg: 'DIV'
- Node.nodeValue 只有文本节点和注释节点有这个值,其余都是null
- Node.textContent 返回当前节点和后代所有节点的文本内容,忽略HTML标签(innerText)
- Node.baseURI 返回当前网页的绝对路径
- Node.nextSibling 返回下一个同级节点
- Node.previousSibling 返回同级的前一个节点
- Node.parentNode 返回父节点(可能是element/document/doucumentfragment)
- Node.parentElement 返回父元素节点
- Node.firstChild / lastChild 返回的可能是文本节点或注释节点
- Node.childNodes /children 对于childNodes会返回所有的节点(包括注释,文本等) 而chilren只返回element
- 对与children[0]返回的一定是element 但是firstChild返回的可能是文本
2.2 Node接口方法
- Node.appendChild() 配合documen.createElement('tagName')
- Node.hasChildNodes() 返回bool
- Node.cloneNode(true/false) true clone子节点,但是会丢失所有的on-属性和eventHandler
- Node.insertBefore(newNode, referenceNode) 把newNode 插在Node内部referenceNode之前
- referenceNode 为null则插在Node最后
- 没有insertAfter,可以通过Node.insertBefore(newNode, referenceNode.nextSibling)
- Node.removeChild(childNode)
- Node.replaceChild(newNode, oldNode)
- Node.contains(node)
- Node.isEqualNode() 返回两个节点的类型、属性、子节点相同
- Node.isSameNode() 返回两个节点是否为同一个节点
三. NodeList 接口
通过Node.childNods document.querySelectorAll() document.getElementsByTagName()等方法获得
- NodeList.prototype.forEach() NodeList是类数组对象,但可以使用forEach
- 通过Array.prototype.slice.call()将其转化成array
- nodelist.forEach( function(item, index, list))
- NodeList.prototype.length
- NodeList.prototype.item(i) 返回第i
- 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元素
- HTMLCollection.prototype.length
- HTMLCollection.prototype.item(i)
五. ParentNode接口
- ParentNode.childern 返回当前节点的元素子节点
- ParentNode.firstElementChild 返回第一个元素子节点
- ParentNode.lastElementChild 返回最后一个元素节点
- ParentNode.append() ParentNode.prepend() 像parent node中插入子节点
六. ChildNode接口
- childNode.remove() 移除某一个node
- childNode.before(node) childNode.after(node) 在某一个node前后插入node,共有一个parentNode
- childNode.replaceWith() 替换当前的节点
七. document对象
Node总结的更多相关文章
- babeljs源码
babel.min.js!function(e,t){"object"==typeof exports&&"object"==typeof mo ...
- NPM (node package manager) 入门 - 基础使用
什么是npm ? npm 是 nodejs 的包管理和分发工具.它可以让 javascript 开发者能够更加轻松的共享代码和共用代码片段,并且通过 npm 管理你分享的代码也很方便快捷和简单. 截至 ...
- node服务的监控预警系统架构
需求背景 目前node端的服务逐渐成熟,在不少公司内部也开始承担业务处理或者视图渲染工作.不同于个人开发的简单服务器,企业级的node服务要求更为苛刻: 高稳定性.高可靠性.鲁棒性以及直观的监控和报警 ...
- node.js学习(三)简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理
一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...
- 细说WebSocket - Node篇
在上一篇提高到了 web 通信的各种方式,包括 轮询.长连接 以及各种 HTML5 中提到的手段.本文将详细描述 WebSocket协议 在 web通讯 中的实现. 一.WebSocket 协议 1. ...
- 高大上的微服务可以很简单,使用node写微服务
安装 npm install m-service --save 使用 编写服务处理函数 // dir1/file1.js // 使用传入的console参数输出可以自动在日志里带上request id ...
- 构建通用的 React 和 Node 应用
这是一篇非常优秀的 React 教程,这篇文章对 React 组件.React Router 以及 Node 做了很好的梳理.我是 9 月份读的该文章,当时跟着教程做了一遍,收获很大.但是由于时间原因 ...
- 利用Node.js的Net模块实现一个命令行多人聊天室
1.net模块基本API 要使用Node.js的net模块实现一个命令行聊天室,就必须先了解NET模块的API使用.NET模块API分为两大类:Server和Socket类.工厂方法. Server类 ...
- Node.js:进程、子进程与cluster多核处理模块
1.process对象 process对象就是处理与进程相关信息的全局对象,不需要require引用,且是EventEmitter的实例. 获取进程信息 process对象提供了很多的API来获取当前 ...
- Node.js:理解stream
Stream在node.js中是一个抽象的接口,基于EventEmitter,也是一种Buffer的高级封装,用来处理流数据.流模块便是提供各种API让我们可以很简单的使用Stream. 流分为四种类 ...
随机推荐
- Int、bigint、smallint、tinyint的区别
Bigint:从-2^63-2^63的整型数据(所有数字).存储大小为8个字节.Bigint已经有长度了,在mysql建表中的length,只是用于显示的位数. Int:从-2^31-2^31的整型数 ...
- JavaScript高级笔记
# 今日内容: 1. JavaScript: 1. ECMAScript: 2. BOM: 3. DOM: 1. 事件 ...
- 关于JSON使用要注意的地方
1.json 1.JSON对象;(ES5) 1)JSON.stringify() json---js[json字符串--->JavaScript对象] 2 ...
- docker技术基础
1 Linux Namespace Linux Namespaces机制提供一种资源隔离方案.PID,IPC,Network等系统资源不再是全局性的,而是属于特定的Namespace.每个Namesp ...
- xml转dict
xml转dict 最开始的时候一直是按格式比较严谨的XML格式进行的转换,所以一般只需要考虑两种情况就可以了,即各个节点或者子节点全相同或者全不同,全相同按list处理,全不同按dict处理,这么一想 ...
- linux7 grub配置文件 linux6 grub配置文件
在 grub 的 kernel 配置后面,添加 acpi_pad.disable=1 重启机器之后,开机就不会自动加载 acpi_pad 模块 一:linux6 [root@node2 ~]# cat ...
- solr的一些查询语法
以下内容来自solr中国 1.1. 首先假设我的数据里fields有:name, tel, address 预设的搜寻是name这个字段, 如果要搜寻的数据刚好就是 name 这个字段,就不需要指定搜 ...
- CSS多列布局(栅格布局)
一.多列布局 CSS3 可以将文本内容设计成像报纸一样的多列布局,如下实例: 代码如下(具体的解释也在代码中)浏览器支持表格中的数字表示支持该方法的第一个浏览器的版本号. 紧跟在数字后面的 -webk ...
- 查看ubuntu系统信息
root@k8s001:~/go/src/k8s.io/kubernetes# cat /etc/*release DISTRIB_ID=Ubuntu DISTRIB_RELEASE=16.04 DI ...
- 了解卷积神经网络如何使用TDA学习
在我之前的文章中,我讨论了如何对卷积神经网络(CNN)学习的权重进行拓扑数据分析,以便深入了解正在学习的内容以及如何学习它. 这项工作的重要性可归纳如下: 它使我们能够了解神经网络如何执行分类任务. ...