一. 基本概念

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. rocketmq-console控制台管理界面配置

    Rocketmq可视化管理控制台配置 前提: RocketMQ有一个对其扩展的开源项目incubator-rocketmq-externals,这个项目中有一个子模块叫“rocketmq-consol ...

  2. CSS3 Animations

    CSS Animations 是CSS的一个模块,它定义了如何用关键帧来随时间推移对CSS属性的值进行动画处理.关键帧动画的行为可以通过指定它们的持续时间,它们的重复次数以及它们如何重复来控制. an ...

  3. luogu P3411 序列变换

    链接 P3411 序列变换 如果要最小化答案,那么就最大化不移动的数. 那么不移动的子序列一定是最后答案的一段连续区间,而移动的数我们是一定有办法把他们还原的. 设\(f_{i}\)表示\(i\)点的 ...

  4. windows2008R2-AD域控组策略设置与其它相关设置

    防火墙设置 修改>计算机配置>策略>安全设置>高级安全windows防火墙>高级安全windows防火墙 修改入站规则 1.组名-文件和打印机共享(SMB-In)> ...

  5. INSTALL_PARSE_FAILED_INCONSISTENT_CERTIFICATES

    [转] https://www.mobibrw.com/2016/3949 adb install 一个apk错误: INSTALL_FAILED_ALREADY_EXISTS 应用已存在,使用 ad ...

  6. Test 6.29 T4 简单数据结构练习

    问题描述 费了一番功夫,神犇 CJK 终于完成了前三道题目."不错,不愧是新一代神犇啊!" JesseLiu 满意地说道,"不过,你在算法方面的功底固然不错.对于数据结构 ...

  7. LeetCode--040--组合总和 II(java)

    给定一个数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合. candidates 中的每个数字在每个组合中只能使用一次. ...

  8. service pom

    <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> &l ...

  9. js执行上下文与执行上下文栈

    一.什么是执行上下文 简单说就是代码运行时的执行环境,必须是在函数调用的时候才会产生,如果不调用就不会产生这个执行上下文.在这个环境中,所有变量会被事先提出来(变量提升),有的直接赋值,有的为默认值 ...

  10. 【HDOJ6638】Snowy Smile(线段树)

    题意:一个二维平面上有n个点,每个点的坐标是(x[i],y[i]),权值是w[i] 求一个矩形使得其中所有点的权值和最大,输出权值和 n<=2e3,x[i],y[i],w[i]的绝对值<= ...