DOM(文档对象模型)是针对HTML和XML文档的一个API,描绘了一个层次化的节点树,允许开发人员添加、删除和修改页面的某一部分。

HTML DOM 树形结构如下:

1.Node方面

1.1 节点类型

节点类型(nodeName) 数值常量(nodeValue)
元素节点 1
属性节点 2
文本节点 3
注释节点 8
文档节点 9
文档碎片节点 11

确定节点类型,兼容的方法是将nodeType属性与数字值进行比较,如下所示:

if(someNode.nodeType==1){
alert("Node is an element");
}

1.2 节点关系

每一个节点都有一个childNodes属性,其中保存着一个NodeList对象。NodeList是一种类数组对象,用于保存一组有序的节点,可以通过位置来访问这些节点。

1.3 节点操作

注意事项

a. 注意appendChild的用法:

1.添加功能:像childNodes列表的末尾添加一个节点,添加节点后,childNodes的新增节点,父节点以及以前的最后一个子节点的关系指针都会得到相应更新。


var returnedNode=someNode.appendChild(newNode);
alert(returnedNode==newNode)//true

2.移位功能:如果传入到appendChild()中的节点已经是文档的一部分,那么结果就是将该节点从原来的位置转移到新的位置。


var returnedNode=someNode.appendChild(someNode.firstChild);
alert(returnedNode==someNode.firstChild)//false
alert(returnedNode==someNode.lastChild)//true

3.与insertBefore区别:后者是把节点放在childNodes某个特定的位置上,而不是放在末尾,该方法有两个参数:要插入的节点和作为参照点的节点。

//输入后成为最后一个子节点
var returnedNode=someNode.insertBefore(newNode,null);
alert(returnedNode==someNode.lastChild)//true //输入后成为第一个子节点
var returnedNode=someNode.insertBefore(newNode,firstChild);
alert(returnedNode==someNode.firstChild)//true

b. 注意replaceChlid用法

前面的appendChild和insertBefore都是插入节点,不会移除节点。而replace方法接受2个参数:要插入的节点和要替换的节点,要替换的节点将会从文档中被移除,同时由要插入的节点占据其位置。从技术上讲:被替换的节点还在文档中,但是没有位置。

c. 注意cloneChild用法

cloneChild方法接受一个布尔值参数,表示是否执行深复制。

  • true:深复制,复制节点及其整个子节点树。
  • false:浅复制,只复制节点本身。、


二、Document类型

Document类型可以表示HTML页面或者其他基于xml的文档。作为HTMLDocument的一个实例,document对象还有一些标准的Document对象所没有的属性,例如和网页请求有关的3个属性是:URL,domain,referrer,应用最多的是在查找元素方面:


三、Element类型

该类型提供了对元素标签名,子节点及特性的访问。所有的HTML元素都是由HTMLElement类型表示,HTMLElement类型直接继承自element并添加了一些属性:id,title,lang,dir,className.

注意事项

1.对id或lang的修改对用户而言是透明不可见的(假设没有基于透明的值设置的css样式)
2.title的修改只会体现在鼠标移动到这个元素上时会显示出来。
3.对dir的修改只会体现在属性被重写的那一刻,立刻影响页面中文本的左右对齐方式。
4.修改className时,如果新类型关联了与此前不同的css样式,那么就会立刻应用新的样式。


四、Attr类型


五、Text类型

六、DOM扩展

1.Selectors API扩展:querySelector()方法和querySelectorAll()方法
注意事项
querySelector只返回匹配的第一个元素,如果没有匹配项,返回null。

querySelectorAll返回匹配的元素集合,如果没有匹配项,返回空的nodelist(节点数组)。 并且返回的结果是静态的,之后对document结构的改变不会影响到之前取到的结果。
目前IE8+,ff,chrome都支持此api(IE8中的selector string只支持css2.1的)。

关于两者的详细区别,我前面看过一篇博客:http://www.cnblogs.com/QingFlye/p/4006484.html

2.HTML5扩展:新增getElementByClassName方法

总结

DOM操作往往是JavaScript程序中开销最大的部分,访问nodeList导致的问题最多。NodeList对象都是动态的,意味着每次访问该对象,都会进行一次查询,有鉴于此,最好的办法是:减少DOM操作。
关于前端性能优化问题,比较耳熟能详的是Yahoo14条军规与前端性能优化:http://www.cnblogs.com/QingFlye/p/3891980.html
关于DOM兼容性问题,前面也看过别人的一篇博客(http://www.cnblogs.com/QingFlye/p/4302099.html
在知乎里也看过:http://www.zhihu.com/question/29072028/answer/43095799

js DOM之基础详解的更多相关文章

  1. 深入浅出DOM基础——《DOM探索之基础详解篇》学习笔记

    来源于:https://github.com/jawil/blog/issues/9 之前通过深入学习DOM的相关知识,看了慕课网DOM探索之基础详解篇这个视频(在最近看第三遍的时候,准备记录一点东西 ...

  2. Dom探索之基础详解

    认识DOM DOM级别 注::DOM 0级标准实际并不存在,只是历史坐标系的一个参照点而已,具体的说,它指IE4.0和Netscape Navigator4.0最初支持的DHTML. 节点类型 注:1 ...

  3. js调试工具Console命令详解

    这篇文章主要介绍了js调试工具Console命令详解,需要的朋友可以参考下   一.显示信息的命令 复制代码 代码如下: < !DOCTYPE html> < html> &l ...

  4. Android中Canvas绘图基础详解(附源码下载) (转)

    Android中Canvas绘图基础详解(附源码下载) 原文链接  http://blog.csdn.net/iispring/article/details/49770651   AndroidCa ...

  5. javaScript基础详解(1)

    javaScript基础详解 首先讲javaScript的摆放位置:<script> 与 </script> 可以放在head和body之间,也可以body中或者head中 J ...

  6. Python学习一:序列基础详解

    作者:NiceCui 本文谢绝转载,如需转载需征得作者本人同意,谢谢. 本文链接:http://www.cnblogs.com/NiceCui/p/7858473.html 邮箱:moyi@moyib ...

  7. Python学习二:词典基础详解

    作者:NiceCui 本文谢绝转载,如需转载需征得作者本人同意,谢谢. 本文链接:http://www.cnblogs.com/NiceCui/p/7862377.html 邮箱:moyi@moyib ...

  8. JQ的offset().top与js的offsetTop区别详解

    一.前言 最近在做一个图片懒加载的插件,就纵轴(Y轴)而言,我需要时时获取图片的上偏移量,好判断是否已进入视图区域,而我所理解的是offsetTop应该是跟offset().top一样的,然后陷入了因 ...

  9. 三剑客基础详解(grep、sed、awk)

    目录 三剑客基础详解 三剑客之grep详解 1.通配符 2.基础正则 3.grep 讲解 4.拓展正则 5.POSIX字符类 三剑客之sed讲解 1.sed的执行流程 2.语法格式 三剑客之Awk 1 ...

随机推荐

  1. Swiper4的基本使用

    基本介绍: 中文文档地址:https://www.swiper.com.cn/ 它是一个开源,免费,强大的触摸滑动插件. 它是用纯Javascript打造的滑动特效插件,既可用于PC端,也可用于移动端 ...

  2. ubuntu16.04安装openssh中报错解决

    在使用apt-get直接进行安装时会报错: sudo apt-get install openssh-server 正在读取软件包列表... 完成 正在分析软件包的依赖关系树       正在读取状态 ...

  3. 使用Hybris commerce的promotion rule进行促销活动

    backoffice Marketing菜单下面,新建一个Promotion rule: Promotion的条件,设置成针对商城里所有的数码相机: Promotion触发条件在Conditions区 ...

  4. .net 获取CPU频率 内存 磁盘大小,域名 端口 虚拟目录等

    CPU个数: @Environment.GetEnvironmentVariable("NUMBER_OF_PROCESSORS") CPU类型: @Environment.Get ...

  5. C# DataTable 和List之间相互转换的方法(转载)

    来源:https://www.cnblogs.com/shiyh/p/7478241.html 一.List<T>/IEnumerable转换到DataTable/DataView 方法一 ...

  6. php的多功能文件操作类

    本类为文件操作类,实现了文件的建立,写入,删除,修改,复制,移动,创建目录,删除目录,列出目录里的文件等功能,路径后面别忘了加"/" 创建指定路径下的指定文件 * @param s ...

  7. Walle实现自动发布

    walle是啥?能干啥?有啥用?这些我都不会去一一道来,如果你还没有明白前面提出的三个问题就不用往下看了,这里这回将walle安装了怎么去使用.如果都要面面俱到不是一两篇博客可以解决的问题,如果希望将 ...

  8. angular官网实例(综合)

    第一部分: (应用的“外壳”) 1.新建项目: ng new mytest 2.进入项目目录,并启动这个应用. cd mytest ng serve --open 3.添加一个标题 打开 app.co ...

  9. gRPC应用C++

    1.  gRPC简述 RPC,远程方法调用,就是像调用本地方法一样调用远程方法. gRPC是Google实现的一种RPC框架,基于HTTP/2标准设计,带来诸如双向流.流控.头部压缩.单 TCP 连接 ...

  10. windows动态库和静态库VS导入

    1. 静态库和动态库 1.1 静态库(.lib) 函数和数据被编译进一个二进制文件(通常扩展名为.LIB).在使用静态库的情况下,在编译链接可执行文件时,链接器从库中复制这些函数和数据并把它们和应用程 ...