一. 基本概念

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. vuex 使用实例

    官网:https://vuex.vuejs.org/zh/guide/state.html Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 1.vuex解决了组件之间同一状态的共享问题 ...

  2. 03scikit-learn非监督学习

    In [1]: from sklearn.decomposition import PCA from sklearn.datasets import load_iris pca = PCA(n_com ...

  3. 通过反射获取方法的参数名称(JDK8以上支持)

    方法的参数名,在很多时候我们是需要反射得到的.但是在java8之前,代码编译为class文件后,方法参数的类型是固定的,但参数名称却丢失了,这和动态语言严重依赖参数名称形成了鲜明对比.(java是静态 ...

  4. Flask之路由相关

    1.装饰器中的参数 @app.route("/info", methods=["GET", "POST"]) def student_inf ...

  5. 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 ...

  6. ssh服务配置

    ------------------------------------------ ssh 服务安装ssh  apt-get install openssh-server启动 service ssh ...

  7. 【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 ...

  8. 对async 函数的研究

    async 函数 1.ES2017 标准引入了 async 函数,使得异步操作变得更加方便. async 函数是什么?一句话,它就是 Generator 函数的语法糖. 前文有一个 Generator ...

  9. handy源码阅读(三):SafeQueue类

    SafeQueue类继承与信号量mutex(用于加锁),nonocopyable 定义如下: template <typename T> struct SafeQueue : privat ...

  10. Jenkins slave-agent.jnlp 无法安装为服务(install as a service)

    问题: 在部署持续集成环境,配置slave节点时遇到一个问题,slave-agent.jnlp可以正常启动运行(不能正常启动的点这里) 但是在保存为系统服务时,slave-agent.jnlp点击[i ...