js DOM之基础详解
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
转载于:https://www.cnblogs.com/ljk001/p/8011952.html
js DOM之基础详解相关推荐
- 03 html基础详解
02html基础详解 文章目录 02html基础详解 1.HTML编辑器 2.标签 html常用标签 3.元素 4.属性 常用属性 5.标题 水平线 注释 6.段落 折行 7.格式化标签 属性dir ...
- 微信小程序详解 php,微信小程序canvas基础详解
canvas 元素用于在网页上绘制图形.HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像.本文主要和大家分享微信小程序canvas基础详解,希望能帮助到大家. 一.了 ...
- JavaScript中DOM对象的详解
*** JavaScript中DOM对象的详解*** DOM对象:Document Object Model,文档对象模型.也称为document(文档对象),是HTML页面当前窗体的内容,是连接JS ...
- c 语言中 %是什么运算符,C 语言基础----详解C中的运算符
C语言中又有哪些运算符呢? 如下所示: ※ 算术运算符 ※ 赋值运算符 ※ 关系运算符 ※ 逻辑运算符 ※ 三目运算符 C语言基本算术运算符如下表: 除法运算中注意: 如果相除的两个数都是整数的话,则 ...
- nodejs 本地php服务器,node.js创建本地服务器详解
本文主要和大家分享node.js创建本地服务器详解,简易上手node.js后,我们就可以在自己电脑上创建本地服务器了.希望能帮助到大家. 一.先上代码.//请求Node.js自带的http模块. va ...
- Python学习二:词典基础详解
作者:NiceCui 本文谢绝转载,如需转载需征得作者本人同意,谢谢. 本文链接:http://www.cnblogs.com/NiceCui/p/7862377.html 邮箱:moyi@moyib ...
- 【云原生之k8s】k8s基础详解
[云原生之k8s]k8s基础详解 前言 一.kubernetes介绍 (1)kubernetes简介 (2)应用部署方式的演变 二.kubernetes组件 (1)kubernetes架构 (2)ma ...
- js打印三角形超详解
js打印三角形超详解 j控制星星的总行数,i控制每行星星的打印个数 打印图形如下: (1) (2) //str=""用来存储星星// 理解步骤1:在一行输出6个星星如何操作,在循环 ...
- 线程状态,优先级,守护线程基础详解
线程状态,优先级,守护线程基础详解 线程状态 停止线程 线程休眠 线程礼让 线程强制执行 线程状态检测 线程的优先级 守护线程 线程同步 线程状态 创建状态(new 之后就是创建状态 就绪状态(调用s ...
最新文章
- CVPR 2020满分论文 | FineGym:面向细粒度动作分析的层级化高质量数据集
- Apache Commons fileUpload实现文件上传
- 自己常用的PHP方法
- 190603每日一句
- 自动优化Windows Xp批处理文件
- 判断在ios系统中打开微信浏览器
- kettle连接mysql教程_KETTLE初学者使用教程
- 什么是计算机?计算机的硬件系统组成有哪些?
- mysql语句解决查询乱码_mysql5.0用命令行查询正常,但用sql就乱码,已经加了useUnicode=truecharacterEncoding=GBK,该如何处理 _ 搞代码...
- 计算机怎么给文档加密文件,整个文件夹怎么加密,如何给电脑文档加密
- 来自19位科技大亨的励志箴言(绝对值得收藏)
- 【十大思想实验之中的一个】电车难题
- GIT 知识收集-GIT banch 没有显示
- [数据结构]递归树:借助树求解递归算法的时间复杂度
- 鸿蒙掉不掉凤羽符,装备各部件灌注符的获取方式(和肝燕面基成功,给萌新的福利)...
- 网易企业邮箱:三道防御、七项措施,切实保障企业邮箱安全【企业邮箱申请】
- iOS快捷指令 | iPicGo,随时随地用手机上传图片到图床
- (步骤详细)MATLAB/SIMULINK全局变量设置
- smurf分布式攻击(DDOS)
- idea hybris integration 插件未生效