1.DOM节点的常用属性（所有节点都支持）

  1. nodeType：元素1，属性2，文本3

  2. nodeName：元素标签名的大写形式

  3. nodeValue：元素节点为null，文本节点为文本内容，属性节点为属性值

  4. 关系属性：parentNode，childNodes，nextSibling，previousSibling，firstChild，lastChild

  5. ownerDocument：文档节点（document对象）

2.操作DOM节点（增/删/改）

  1. appendChild(node);给当前节点的childNodes列表末尾添加一个节点。若node已存在，则把node移动到当前节点下

  2. insertBefore(node, targetNode);在targetNode前插入node

  3. replaceChild(node, targetNode);用node替换targetNode，注意：替换之后targetNode并没有被销毁，只是变成了游离在DOM树外的文档碎片

  4. removeChild(node);移除node，注意：移除之后node也没有被销毁，该方法返回node的引用

  5. cloneNode(true/false);复制一个与当前节点完全相同的节点，若true则深复制，否则浅复制，IE会复制相关事件处理器，其它浏览器不会

  6. normalize();用来删掉空文本节点，合并相邻文本节点

3.document对象相关

  1. document.documentElement;指向<html>元素

  2. document.body;指向<body>元素

  3. document.title;指向<title>元素，直接赋值可以修改文档标题

  4. document.URL;获取完整URL

    document.domain;获取域名，可以直接赋值设置域名，当页面中多个frame需要通信时必须修改该属性，以解除跨域安全限制

    document.referrer;获取上一个页面的url，可能是空串

  5. 查找元素

    • document.getElementById(str);

    • document.getElementsByTagName(str);返回集合，用方括号语法访问，方括号内可以是字符串表示按name属性值取元素（str可以是*表示取所有DOM元素）

    • document.getElementsByName(str);多用于单选按钮组

P.S.前两个适用于所有XML文档的DOM操作，最后一个只适用于HTML文档。至于HTML5支持的document.querySelector(str)以及document.getElementsByClassName(str)不在此讨论，上面列出的3种方式都是全浏览器兼容的

  1. document.write(str);文档写入，文档加载过程中直接调用则在指定位置输出内容，若放在load事件处理器中则重写整个页面

  2. document.createTextNode(text);创建文本节点。document.createElement(tagName);创建元素

4.元素节点相关

  1. 元素节点的属性：id、title（类似于ToolTip）、className，都是可读/写的（写原生js代码时这3个属性很常用，尤其是className，很方便）

  2. elem.getAttribute(attr);获取attr属性的值，也可以取得自定义属性，但HTML5中自定义属性应该加上”data-“前缀（当然，不加也没关系，只是规范要求），用elem.dataset.attr获取

    elem.setAttribute(attr, value);设置属性值，只用来设置自定义属性，因为自定义属性无法直接设置

    elem.removeAttribute(attr);删除属性和值（[IE6-]不支持）

    P.S.一般直接访问属性，例如elem.id, elem.style等等，get/setAttribute方式并不常用（只用来读/写自定义属性），因为用函数方式访问style和onclick或其它事件属性返回字符串，而直接访问可以返回可操作对象（比如函数引用），所以一般都直接访问元素属性

  3. attributes属性：elem.attributes[‘id’].nodeValue = value;也可以通过这种方式来访问属性，但更多的时候用attributes属性来遍历元素属性

  4. 遍历元素的节点时应该添加nodeType检测，因为有些浏览器会把标签间的空白字符也当作节点（Unicode签名BOM）

5.文本节点

node.nodeValue或者node.data都可以访问文本内容

6.DOM性能优化

  1. 尽量减少访问NodeList的次数

    NodeList、NamedNodeMap、HTMLCollection都是实时更新的，document.getElementByxxx的返回值就是该类型的。应该尽量减少访问NodeList的次数，因为访问时需要检查DOM树，存在不小的性能损耗。可以把NodeList对象的引用保存起来，例如不要出现下面的代码：

    1. for(var i = 0;i < 100;i++){
    2.   document.getElementsByTagName('li')[i].className = 'disabled';
    3. }

    这样做简直太伤了，更好的做法是：

    1. var lis = document.getElementsByTagName('li');
    2. for(var i = 0;i < 100;i++){
    3.   lis[i].className = 'disabled';
    4. }

    常见的HTMLCollection对象有：document.forms、document.images、document.links、document.anchors

  2. 使用DocumentFragment避免多次“现场更新”

    DocumentFragment是一种比较冷门但非常有用的节点，在性能优化中尤其重要，需要插入大量DOM节点时，我们有两个选择：要么一个一个往DOM树上插，要么先插到文档碎片上，再把文档碎片插入DOM树。第一种方式需要更新n次DOM树，而第二种方式只需要更新1次，例如：

    1. //创建文档碎片
    2. var frag = document.createDocumentFragment();
    3. //插入节点
    4. var node = null, text = null;
    5. for(var i = 0;i < 10;i++){
    6.   node = document.createElement('p');
    7.   text = document.createTextNode('段落' + i);
    8.   node.appendChild(text);
    9.   frag.appendChild(node);
    10. }
    11. //把携带着节点的文档碎片插入DOM树
    12. document.body.appendChild(frag);

    文档碎片在DOM树中是不存在的，把碎片插入DOM树实际上是插入了它携带的节点，文档碎片是一个看不见的容器。当然也可以创建一个div作为容器，和创建文档碎片道理一样，只要能避免n次现场更新就好，因为DOM树上任何一个节点更新时浏览器都会重新渲染页面，这意味着大量的样式数值计算

  3. getElementByxxx的性能差异

    Id查询是最快的，TagName次之，ClassName最慢。当然，一般情况下这些差异是可以忽略的，但移动端页面应该充分考虑，毕竟移动端没有PC这么好的条件。此外，把频繁使用的元素的引用保存一份可以减少不必要的DOM查找，从而提升性能。

7.动态创建img/script/link元素

鉴于这部分内容和一般的DOM操作不同，和事件的关联比较多，所以放在JS学习笔记6_事件中详述

JS学习笔记5_DOM的更多相关文章

  1. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

  3. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  4. WebGL three.js学习笔记 使用粒子系统模拟时空隧道（虫洞）

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

  5. WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

    WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...

  6. WebGL three.js学习笔记 创建three.js代码的基本框架

    WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...

  7. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  8. 2019-4-29 js学习笔记

    js学习笔记一:js数据类型   1:基本数据类型       number类型(整数,小数)      String类型          boolean类型        NaN类型其实是一个nu ...

  9. 一点感悟：《Node.js学习笔记》star数突破1000+

    写作背景 笔者前年开始撰写的<Node.js学习笔记> github star 数突破了1000,算是个里程碑吧. 从第一次提交(2016.11.03)到现在,1年半过去了.突然有些感慨, ...

随机推荐

  1. Java开发环境安装配置

    电脑配置:Win7 64位 JDK1.8+Apache Tomcat8.5.4 下载JDK1.8 全名: Java SE Development Kit 8u151,下载最新稳定版本 下载地址:htt ...

  2. win7 64位远程连接oracle11g64位

    1.首先下载即时客户端 instantclient-basic-windows.x64-11.2.0.4.0,下载地址:http://www.oracle.com/technetwork/topics ...

  3. SVN基本操作 （zz）

    SVN基本操作 分类: LINUX 原文地址:SVN基本操作 作者:tuyer 文章摘要:SVN 基本操作:SVN是什么 Svn是一个离线的代码管理,可以多个人一起修改,然后再将修改的内容提交到Svn ...

  4. 使用注解配置 AOP

    一.使用注解(基于Aspect) 1.spring不会自动去寻找注解,必须告诉spring那个包下的类有注解 1.1 先引入xmlns:context命名空间 <context:componen ...

  5. 2018.11.01 NOIP训练 树的排列（树形dp）

    传送门 跟这道题差不多. 只不过是让权值小的儿子做权值大的儿子的父亲而已. 代码

  6. BUG YII2.0 $ is not defined

    来源:https://www.cnblogs.com/attitudeY/p/6279985.html BUG描述:$ is not defined 没有加载jquery成功 原因:Yii2.0将JS ...

  7. Codeforces Round #543 (Div. 2)B,C

    https://codeforces.com/contest/1121 B 题意 给你n(<=1000)个数ai,找出最多对和相等的数,每个数只能用一次,且每个数保证各不相同 题解 重点:每个数 ...

  8. ACM-ICPC 2018 沈阳赛区网络预赛 B Call of Accepted(表达式求值）

    题目链接:https://nanti.jisuanke.com/t/31443 相关前置链接 https://www.cnblogs.com/dolphin0520/p/3708602.html ht ...

  9. react优化--pureComponent

    shouldComponentUpdate的默认渲染 在React Component的生命周期中,shouldComponentUpdate方法,默认返回true,也就意味着就算没有改变props或 ...

  10. 使用 WLST 和节点管理器来管理服务器

    使用节点管理器启动计算机上的服务器 WLST 可以连接至在任何计算机上运行的节点管理器,并能够在此计算机上启动一个或多个 WebLogic Server 实例.要通过此技术使用 WLST 和节点管理器 ...