DOM 节点
文章平均质量分 94
nicexibeidage
这个作者很懒,什么都没留下…
展开
-
深入理解DOM节点类型第七篇——文档节点DOCUMENT
前面的话 文档节点document,隶属于表示浏览器的window对象,它表示网页页面,又被称为根节点。本文将详细介绍文档节点document的内容 特征 文档节点的三个node属性——nodeType、nodeValue、nodeName分别是9、'#document'和null 由于它是根节点,所以其父节点parentNode指向null,ow转载 2018-01-05 12:01:47 · 444 阅读 · 0 评论 -
深入理解javascript选择器API系列第一篇——4种元素选择器
前面的话 说到最常见的DOM应用,恐怕就要数取得特定的某个或某组元素的引用了。DOM定义了许多方式来选取元素,包括getElementById()、getElementsByTagName()、getElementsByName()和document.all4种。接下来,将对这4种方法进行详细介绍 getElementById() 任何HTML元素可以有一个转载 2017-12-21 15:35:25 · 197 阅读 · 0 评论 -
区分元素特性attribute和对象属性property
前面的话 其实attribute和property两个单词,翻译出来都是属性,但是《javascript高级程序设计》将它们翻译为特性和属性,以示区分。本文将详细介绍特性和属性的不同之处 定义 元素特性attribute是指HTML元素标签的特性 下面的id、class、title、a都是特性,其中a叫做自定义特性 div id="id1"转载 2017-12-26 14:33:45 · 178 阅读 · 0 评论 -
深入理解javascript描述元素内容的5个属性
前面的话 p>This is a i>simplei> documentp> 上面这行代码中,元素的内容是什么呢?答案一:内容是HTML字符串"This is a simple document";答案二:内容是纯文本字符串"This is a simple document";答案三:内容是一个Text文本节点、一个包含了Text文本子节点的Element元素节点和另外一个T转载 2017-12-26 17:19:27 · 166 阅读 · 0 评论 -
深入理解DOM节点类型第一篇——12种DOM节点类型概述
前面的话 DOM是javascript操作网页的接口,全称为文档对象模型(Document Object Model)。它的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容)。浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组成一个树状结构。DOM的最小组成单位叫做节点(node),文档的树形结构(DOM树)由1...转载 2018-01-02 11:36:50 · 316 阅读 · 0 评论 -
深入理解DOM节点类型第五篇——元素节点Element
前面的话 元素节点Element非常常用,是DOM文档树的主要节点;元素节点是HTML标签元素的DOM化结果。元素节点主要提供了对元素标签名、子节点及特性的访问,本文将详细介绍元素节点的主要内容 特征 元素节点的三个node属性——nodeType、nodeName、nodeValue分别是1、元素的大写标签名和null,其父节点parentNode指向包含转载 2018-01-04 12:45:12 · 272 阅读 · 0 评论 -
深入理解DOM节点类型第六篇——特性节点Attribute
前面的话 元素的特性在DOM中以Attr类型表示,从技术角度讲,特性是存在于元素的attributes属性中的节点。尽管特性是节点,但却不是DOM节点树的一部分。本文将详细介绍该部分内容 特征 特性节点的三个node属性————nodeType、nodeName、nodeValue分别是2、特性名称和特性值,其父节点parentNode是null转载 2018-01-04 14:20:27 · 241 阅读 · 0 评论 -
深入理解DOM节点类型第二篇——文本节点Text
前面的话 文本节点顾名思义指向文本的节点,网页上看到的文字内容都属于文本节点。该节点简单直观,本文将详细介绍该部分内容 特征 文本节点由Text类型表示,包含的是纯文本内容,但文本节点是对象类型 div id="box">内容div> script> console.log(box.firstChild);//"内容" console.转载 2018-01-04 15:25:04 · 762 阅读 · 0 评论 -
深入理解DOM节点类型第三篇——注释节点和文档类型节点
前面的话 把注释节点和文档类型节点放在一起是因为IE8-浏览器的一个bug。IE8-浏览器将标签名为"!"的元素视作注释节点,所以文档声明也被视作注释节点。本文将详细介绍这两部分的内容 注释节点 【特征】 注释在DOM中是通过Comment类型来表示,注释节点的三个node属性——nodeType、nodeName、nodeValue分别是8、'#comm转载 2018-01-04 15:54:43 · 1044 阅读 · 0 评论 -
深入理解DOM节点类型第四篇——文档片段节点DocumentFragment
前面的话 在所有节点类型中,只有文档片段节点DocumentFragment在文档中没有对应的标记。DOM规定文档片段(document fragment)是一种“轻量级”的文档,可以包含和控制节点,但不会像完整的文档那样占用额外的资源 特征 创建文档片段,要使用document.createDocumentFragment()方法。文档片段继承了Node的转载 2018-01-04 16:08:12 · 528 阅读 · 0 评论 -
深入理解javascript选择器API系列第二篇——getElementsByClassName
前面的话 既然有getElementById()和getElementsByTagName()方法,为什么没有getElementsByClassName()呢?id属性、标签名、class属性并没有什么优劣之分啊。终于,HTML5新增了getElementsByClassName()方法,由于在CSS布局中类名的广泛使用,该方法正好切中痛点,使得通过类名选取元素不再困难,成为最受欢迎的转载 2018-01-04 17:14:10 · 419 阅读 · 0 评论 -
深入理解javascript中的动态集合——NodeList、HTMLCollection和NamedNodeMap
前面的话 一说起动态集合,多数人可能都有所了解。但是,如果再深入些,有哪些动态集合,以及这些动态集合有什么表现、区别和联系?可能好多人就要摇头了。本文就javascript中的动态集合做详细介绍 NodeList NodeList实例对象是一个类数组对象,它的成员是节点对象,包括childNodes和querySelectorAll()方法返回值转载 2018-01-04 17:39:35 · 363 阅读 · 0 评论 -
深入理解DOM节点关系
前面的话 DOM可以将任何HTML描绘成一个由多层节点构成的结构。节点分为12种不同类型,每种类型分别表示文档中不同的信息及标记。每个节点都拥有各自的特点、数据和方法,也与其他节点存在某种关系。节点之间的关系构成了层次,而所有页面标记则表现为一个以特定节点为根节点的树形结构。本文将详细描述DOM间的节点关系 节点中的各种关系可以用传统的家族关系来描述,相当于把文档树比喻成家转载 2018-01-04 18:14:06 · 171 阅读 · 0 评论 -
深入理解DOM节点操作
前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节点操作方法 前提 DOM提供节点操作的方法是因为DOM节点关系指针都是只读的 下列代码中想通过修改myUl的父级节点来修改其节点关系,但由于parentNode属性是只读的,所以修改无效,在IE8-浏览器下甚至会报错转载 2018-01-05 10:48:44 · 222 阅读 · 0 评论 -
DOM遍历
前面的话 DOM遍历模块定义了用于辅助完成顺序遍历DOM结构的类型:Nodeiterator和TreeWalker,它们能够基于给定的起点对DOM结构执行深度优先(depth-first)的遍历操作。本文将详细介绍DOM遍历 [注意]IE8-浏览器不支持 定义 DOM遍历是深度优先的DOM结构遍历,遍历以给定节点为根,不可能向上超出DOM树的根节点转载 2018-01-05 11:24:02 · 387 阅读 · 0 评论 -
DOM范围
前面的话 为了让开发人员更方便地控制页面,DOM定义了“范围”(range)接口。通过范围可以选择文档中的一个区域,而不必考虑节点的界限(选择在后台完成,对用户是不可见的)。在常规的DOM操作不能更有效地修改文挡时,使用范围往往可以达到目的。本文将详细介绍DOM范围 创建范围 Document类型中定义了createRange()方法。在兼容DOM的浏览器中转载 2018-01-05 11:26:56 · 201 阅读 · 0 评论 -
深入理解javascript选择器API系列第三篇——HTML5新增的3种selector方法
前面的话 尽管DOM作为API已经非常完善了,但是为了实现更多的功能,DOM仍然进行了扩展,其中一个重要的扩展就是对选择器API的扩展。人们对jQuery的称赞,很多是由于jQuery方便的元素选择器。除了前面已经介绍过的getElementsByClassName()方法外,DOM拓展了querySelectorAll()、querySelector()和matchesSelector转载 2017-12-20 11:57:19 · 516 阅读 · 0 评论