文章关键字 ‘dom’

DOMParser和XMLSerializer两个API简介

2019年06月23日,星期日

头图

本文介绍两个DOM API,DOMParser和XMLSerializer,一个是HTML字符串解析成DOM tree,另外一个是把DOM tree序列化成字符串,正好功能相反,有兴趣可以了解下。

阅读全文…

DOM小测28期 – DOM节点文档前后位置判断

2019年03月2日,星期六

DOM小测头图

本题主要考察如何判断DOM节点文档前后位置,父子关系等。我看了下最后的回答,近9成的回答使用了非常啰嗦的方法,比例之高,实在出乎意料。实际上,本题答案只需寥寥数行,因为有原生的API,contains()可以判断节点是否有包含关系;compareDocumentPosition()可以判定任意位置关系。

阅读全文…

深入Node.compareDocumentPosition API

2019年03月2日,星期六

DOM节点树位置对比头图

Node.compareDocumentPosition()方法可以用来对比两个HTML节点在文档中的位置关系,包括前后,父子,自身以及跨文档。不仅是DOM节点,文本节点,注释节点甚至属性节点的位置关系都可以判定,很强。

阅读全文…

DOM基础小测27期答疑文字版-窗体滚动二三事

2019年01月26日,星期六

小测头图

本次小测借一个简单案例跟大家讲讲CSSOM视图模式(CSSOM View Module)相关的一些API及其特性,适用场景等,总结出一些最佳实践,明确一些技术细节,让技术更加精纯。

阅读全文…

before(),after(),prepend(),append()等新DOM方法简介

2017年09月28日,星期四

接下来要介绍这些新增的DOM API方法,都比较新,其设计目的是可以像jQuery那样,使用非常简单的api,便利的操作dom元素。

这些api包括:before()after()replaceWith()append()prepend()……

阅读全文…

DOM元素querySelectorAll可能让你意外的特性表现

2015年11月5日,星期四

我们内容正如标题所示,就是介绍大家可能的对DOM元素querySelectorAll方法一些认知不清楚的地方。没有Demo页面,但是有源代码,有截图。本文内容还行,浅显易懂,也容易消化和吸收,算是不错的tips知识get点。

阅读全文…

jQuery诞生记-原理与机制

2013年07月17日,星期三

网上也有其他一些介绍jQuery原理或机制的文章,可能当事人自己理解,而阅读者本来就不懂,说来说去,越说越绕,可能更不懂了。

jQuery是很优秀,好比身为灵长类的人类。但是,其诞生显然是从简单开始的。因此,要了解人类,可以通过追溯其起源。如果你是上帝,要让你造一个人,你会怎么造,是一口气出来?女娲造人还要捏泥人呢!不妨从单细胞生物开始,随着自然进化,淘汰,自然而然,就会出现人类,上帝他就是这么干的。

jQuery的诞生也大致如此,要想了解jQuery,可以试试踏着本文jQuery的成长足迹,一点一点逐步深入,您就会了解为何jQuery要这么设计,它是如何设计的等。

虽然,内容由浅及深,但是,其中涉及的原型以及new构造函数的一些特性,对于新人而言,还是有一些理解门槛的,希望我的描述与解释可以让你有一丝豁然开朗,那就再好不过了。

阅读全文…

HTML5 DOM元素类名相关操作API classList简介

2013年07月15日,星期一

如果我们把元素的类名操作比作“切水果”游戏的话,其中一个单独的类名就好比“水果”或“炸弹”!
DOM Level 2时代,类名的获取与设置,多半使用className属性,className的生效近似切水果的“一刀切”。在web的初期,交互什么的其实很简单的来;就像切水果刚开始的时候,一次就一个水果飞上来,一刀“咔嚓”切了就好,就像使用className赋个类名值,就算偶尔冒出2个水果,className也可以一刀切搞定的。
但是,随着web的发展,交互的逐渐复杂……

阅读全文…

小tip: DOM appendHTML实现及insertAdjacentHTML

2013年05月10日,星期五

本文重点不在appendHTML方法实现的本身,而是相关的一些DOM节点处理的熟悉,例如文档片段,子节点们,节点的后插以及前插等等……有代码有demo有截图,如果您是JS新手,本文的内容应该能对您的学习提供一些帮助。

阅读全文…

github上html5shiv项目readme.md部分的翻译

2013年02月20日,星期三

html5shiv可以通过很简单的JS调用,让IE6-IE9浏览器都支持HTML5中的元素,本文内容就是该项目readme.md中的中文翻译。资质有限,如有错误,欢迎指正,希望本文的内容能够对您的学习有所帮助。

阅读全文…