理解HTML DOM
DOM(Document Object Model)全称文档对象模型。DOM其实是JavaScript操作网页的一套API接口,定义了访问和操作HTML文档的标准。定义了所有HTML元素的对象和属性,以及访问他们的方法。浏览器会根据DOM模型,将结构化文档解析成一系列的节点,再由这些节点组成一个树状结构,所以它的作用是将网页转为一个个节点对象,从而可以用脚本对其进行各种操作获取,修改,添加或删除HTML元素。
1.DOM节点
文档对象是由不同类型的节点对象组成的,所以要操作文档对象,我们得知道有哪些节点对象。节点对象都有一个nodeType属性,通常是由一个数值常量表示
(1)常见的节点对象:
ELEMENT_NODE(1),元素节点对象
ATTRIBUTE_NODE(2),属性节点对象
TEXT_NODE(3),文本节点对象
COMMENT_NODE(8),注释节点对象
DOCUMENT_NODE(9),文档节点对象
DOCUMENT_TYPE_NODE(10),文档类型节点对象
DOCUMENT_FRAGMENT_NODE(11),文档片段节点对象
(2)节点对象之间的关系
整个文档对象,是由不同的节点对象组成,这些节点之间都存在在关系,常见的关系有:
parentNode,父节点
previousSibling,前一个兄弟节点
nextSibling,后一个兄弟节点
firstChild,第一个子节点
lastChild,最后一个字节点
childNodes,子节点集合
ownerDocument, 顶层文档对象,即document对象。
parentElement,返回当前节点的父Element节点
(3)操作节点对象的方法
appendChild(node);向childNodes列表的末尾添加一个节点
insertBefore(newnode,position);往childNodes列表中的某个固定的位置插入一个节点,要是参照节点为null,默认加在末尾
replaceChild(newnode,position)替换某个节点
removeChild(node);删除某个节点
cloneNode(true/false);克隆对象
contains(),接受一个节点作为参数,返回一个布尔值,表示参数节点是否为当前节点的后代节点。
isEqualNode(),
normalize(), 清理当前节点内部的所有Text节点
hasChildNodes()
理解HTML DOM的更多相关文章
- 深度理解 Virtual DOM
目录: 1 前言 2 技术发展史 3 Virtual DOM 算法 4 Virtual DOM 实现 5 Virtual DOM 树的差异(Diff算法) 6 结语 7 参考链接 1 前言 我会尽量把 ...
- 全面理解虚拟DOM(1)
最近一两年前端最火的技术莫过于 reactjs,angularJS,vuejs,即便你没用过也可能听过,像ReactJS由业界顶尖的互联网公司facebook提出,其本身有很多先进的设计思路,比如页面 ...
- 全面理解虚拟DOM,实现虚拟DOM
1.为什么需要虚拟DOM DOM是很慢的,其元素非常庞大,页面的性能问题鲜有由JS引起的,大部分都是由DOM操作引起的.如果对前端工作进行抽象的话,主要就是维护状态和更新视图:而更新视图和维护状态都需 ...
- 抛开react,如何理解virtual dom和immutability
去年以来,React的出现为前端框架设计和编程模式吹来了一阵春风.很多概念,无论是原本已有的.还是由React首先提出的,都因为React的流行而倍受关注,成为大家研究和学习的热点.本篇分享主要就聚焦 ...
- 理解Shadow DOM(一)
1. 什么是Shadow DOM? Shadow DOM 如果按照英文翻译的话可以理解为 影子DOM, 何为影子DOM呢?可以理解为一般情况下使用肉眼看不到的DOM结构,那如果一般情况下看不到的话,那 ...
- 如何理解Virtual DOM
什么是虚拟DOM 接下来用vdom(Virtual DOM)来简称为虚拟DOM. 指的是用JS模拟的DOM结构,将DOM变化的对比放在JS层来做.换而言之,虚拟DOM就是JS对象.如下DOM结构: & ...
- 理解 Virtual DOM(摘)及评价
框架并没有提高web的性能,只是让开发者更加专注的完成业务逻辑,而不用过渡的考虑性能上的优化.如果以性能来比的话,框架是绝对比不过优化后的原生代码的. 二.什么是Virtual DOM Virtual ...
- 怎么理解虚拟 DOM?
一.前言 现在web前端的开发,对于MVVM框架的运用,那是信手拈来,用的飞起.一个xxx-cli工具,就能初始化一套模板,再填充业务代码,打包部署即可.但是会用,是一个方面,大家有没有底层深入思考一 ...
- Virtual DOM 虚拟DOM的理解(转)
作者:戴嘉华 转载请注明出处并保留原文链接( #13 )和作者信息. 目录: 1 前言 2 对前端应用状态管理思考 3 Virtual DOM 算法 4 算法实现 4.1 步骤一:用JS对象模拟DOM ...
随机推荐
- 一个Json、数组、Dictionary转换和数组对比的C#实例
最近做了一个程序,里面一段代码用到Json.数组.Dictionary转换和数组对比的一些知识,虽然在实际碰到类似问题时候有更好的方法,但这就当是一次基础知识的回顾,现在分享一下. 先介绍下要实现的业 ...
- type=file的change事件只能执行一次的解决方案
最近帮朋友做个项目中遇到了type=file change事件只能执行一次的问题,度娘了一下,发现提供了各种解决方案,所以决定记录一下我的思考方向和最终解决方式. 起初帮朋友做个项目,项目中遇到上传文 ...
- git必会必知
1 前言 git前身是BitKeeper,但是他不是开源软件,不符合当时开源趋势,于是就会有了开源的git,git开发只用了十天时间.目前git是公司开发必不可少的一个工具,用于多人开发的分布式版本控 ...
- VirtualBox虚拟机Centos7网络配置
Centos7要实现虚拟机可以链接网络,主机与虚拟机可以互相通过ip地址访问,需要配置两种网卡,两张网卡配置不同的网络链接方式 virtualBox 网络链接讲解地址:https://www.cnbl ...
- 梯度寻优与logistic算法
一.一些基本概念 最优化:在给定约束之下如何寻求某些因素(的量),以使某一(或某些)指标达到最优.高中学过的线性规划就是一类典型的最优化问题. 凸集:在集合空间中,凸集就是一个向四周凸起的图形.用数学 ...
- hdu 3091 Necklace 状态压缩dp *******
Necklace Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 327680/327680 K (Java/Others)Total ...
- thinkphp下判断状态值语法
在thinkphp框架下我们经常会用到状态值的判断:但是这样写会引起语法错误. <div> <if condition="{$res.status} eq '0'" ...
- MySQL聚合函数在计算时,不会自动匹配与之相对应的数据
学习mysql过程中遇到了一个困惑,纠结了我半天时间,刚刚又重新复习了一下,终于知道问题所在 以下是一个需求: 取得平均薪水最高的部门的部门编号 代码如下: select deptno, avg(sa ...
- 原生js模拟jquery写法
function $_custom(fun) { document.onreadystatechange = function() { if (document.readyState == " ...
- javascript多浏览器的兼容
一.document.formName.item(”itemName”) 问题 问题说明:IE下,可以使用 document.formName.item(”itemName”) 或 document. ...