JS学习笔记5_DOM

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对象的引用保存起来,例如不要出现下面的代码:

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

    这样做简直太伤了,更好的做法是:

    var lis = document.getElementsByTagName(‘li‘);
    for(var i = 0;i < 100;i++){
      lis[i].className = ‘disabled‘;
    }

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

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

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

    //创建文档碎片
    var frag = document.createDocumentFragment();
    //插入节点
    var node = null, text = null;
    for(var i = 0;i < 10;i++){
      node = document.createElement(‘p‘);
      text = document.createTextNode(‘段落‘ + i);
      node.appendChild(text);
      frag.appendChild(node);
    }
    //把携带着节点的文档碎片插入DOM树
    document.body.appendChild(frag);

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

  3. getElementByxxx的性能差异

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

时间: 2024-11-25 13:48:05

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

Vue.js学习笔记:在元素 和 template 中使用 v-if 指令

f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <script src="https://cdn.bootcss.com/vue/2.2.

[Pro Angular.JS]学习笔记1.1:设置开发环境

可以使用yeoman.io,很方便.我已经写了一篇随笔,介绍如何使用.这里也有一篇介绍的文章:http://www.cnblogs.com/JoannaQ/p/3756281.html 代码编辑器,在Mac下用了一下WebStorm,太恶心了.另外发现书的作者使用的开发环境是Windows + VS Express 2013,为了方便学习,我也使用VS Express 2013 Update2.VS2013用起来蛮舒服的,把WebStorm比得跟驼屎一样.也许是因为我没用习惯吧. 1.安装Nod

【转】Backbone.js学习笔记(二)细说MVC

文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Backbone源码结构 1: (function() { 2: Backbone.Events // 自定义事件 3: Backbone.Model // 模型构造函数和原型扩展 4: Backbone.Collection // 集合构造函数和原型扩展 5: Backbone.Router // 路由

Angular JS 学习笔记

特定领域语言 编译器:遍历DOM来查找和它相关的属性, 分为编译和链接两个阶段, 指令:当关联的HTML结构进入编译阶段时应该执行的操作,可以写在名称里,属性里,css类名里:本质上是函数 稳定的DOM:绑定了数据模型的DOM元素的实例不会在绑定的生命周期发生改变 作用域:用来检测模型的改变和为表达式提供执行上下文的 AngularJS 和其它模板系统不同,它使用的是DOM而不是字符串 指令: 由某个属性.元素名称.css类名出现而导致的行为,或者说是DOM的变化 Filter过滤器:扮演着数据

Node.js学习笔记(3) - 简单的curd

这个算是不算完结的完结吧,前段时间也是看了好久的Node相关的东西,总想着去整理一下,可是当时也没有时间: 现在看来在整理的话,就有些混乱,自己也懒了,就没在整理,只是简单的记录一下 一.demo的简单介绍 这次demo,只涉及到简单的curd操作,用到的数据库是mongo,所以要安装mongo数据库,数据库连接驱动是mongoose: 当然关于mongo的驱动有很多,比如mongous mongoskin等:(详见http://cnodejs.org/topic/4f4ca8e0940ce2e

JS学习笔记-OO疑问之封装

封装是面向对象的基础,今天所要学习的匿名函数与闭包就是为了实现JS的面向对象封装.封装实现.封装变量,提高数据.系统安全性,封装正是面向对象的基础. 匿名函数 即没有名字的函数,其创建方式为 function(){...} 单独存在的匿名函数,无法运行,可通过赋值给变量调用或通过表达式自我执行来实现运行. 1.赋值给变量为一般的函数使用方式 var run = function(){ return '方法运行中'; }; alert(run()); 2.通过表达式自我执行 (function(a

每日js学习笔记2014.5.4

<script language="javascript">var mystring = "这是第一个正则表达式的例子";var myregex = new RegExp("这是"); //创建正则表达式if (myregex.test(mystring)) //test的功能是查找字符串中是否有匹配项,有则返回true,没有则返回false{ document.write ("找到了指定的模式");}else{

每日js学习笔记2014.5.5

<script language="javascript"><!-- var textstr = prompt("请输入一个字符串:",""); //prompt的用法,包含两个参数 var regex = /[A-Z][a-z]tion/; //[A-Z]有无匹配项 var result = regex.test(textstr); //test的用法 document.write ("<font size='

JS学习笔记-OO疑问之对象创建

问一.引入工厂,解决重复代码 前面已经提到,JS中创建对象的方法,不难发现,基本的创建方法中,创建一个对象还算简单,如果创建多个类似的对象的话就会产生大量重复的代码. 解决:工厂模式方法(添加一个专门创建对象的方法,传入参数避免重复) function createObject(name,age){ var obj =new Object(); //创建对象 obj.name = name; obj.age = age; obj.run = function(){ return this.nam