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. 流分为四种类 ...
随机推荐
- vuex 使用实例
官网:https://vuex.vuejs.org/zh/guide/state.html Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 1.vuex解决了组件之间同一状态的共享问题 ...
- 03scikit-learn非监督学习
In [1]: from sklearn.decomposition import PCA from sklearn.datasets import load_iris pca = PCA(n_com ...
- 通过反射获取方法的参数名称(JDK8以上支持)
方法的参数名,在很多时候我们是需要反射得到的.但是在java8之前,代码编译为class文件后,方法参数的类型是固定的,但参数名称却丢失了,这和动态语言严重依赖参数名称形成了鲜明对比.(java是静态 ...
- Flask之路由相关
1.装饰器中的参数 @app.route("/info", methods=["GET", "POST"]) def student_inf ...
- How to permanently set $PATH on Linux/Unix?
You need to add it to your ~/.profile or ~/.bashrc file. export PATH=$PATH:/path/to/dir Depending on ...
- ssh服务配置
------------------------------------------ ssh 服务安装ssh apt-get install openssh-server启动 service ssh ...
- 【leetcode】1033. Moving Stones Until Consecutive
题目如下: Three stones are on a number line at positions a, b, and c. Each turn, you pick up a stone at ...
- 对async 函数的研究
async 函数 1.ES2017 标准引入了 async 函数,使得异步操作变得更加方便. async 函数是什么?一句话,它就是 Generator 函数的语法糖. 前文有一个 Generator ...
- handy源码阅读(三):SafeQueue类
SafeQueue类继承与信号量mutex(用于加锁),nonocopyable 定义如下: template <typename T> struct SafeQueue : privat ...
- Jenkins slave-agent.jnlp 无法安装为服务(install as a service)
问题: 在部署持续集成环境,配置slave节点时遇到一个问题,slave-agent.jnlp可以正常启动运行(不能正常启动的点这里) 但是在保存为系统服务时,slave-agent.jnlp点击[i ...