文章关键字 ‘dom’

盘点HTML字符串转DOM的各种方法及细节

2021年02月16日,星期二

新年时钟DOM HTML字符串

HTML字符串转DOM方法有好几个,本文盘点下各个方法的特性和优缺点,以及您可能不知道的相关DOM API方法的其他细节,希望可以对大家的学习有所帮助。

阅读全文…

几个常见功能重合DOM API的细节差异

2020年12月25日,星期五

圣诞节快乐

介绍5组部分功能重叠的DOM API,带大家看看你可能不知道的一些细节差异,希望这些对比可以对您的学习有所帮助。

阅读全文…

幸好document.readyState还是有点锤子用的

2019年10月27日,星期日

document.readyState头图

原本以为document.readyState是个鸡肋属性,目前没机会使用,但是最近的实践发现还是存在一个场景,是需要借助document.readyState的,那就是开源或者大规模组件中的代码初始化的时候。

阅读全文…

小tips: JS DOM innerText和textContent的区别

2019年09月7日,星期六

innerText和textContent

innerText和textContent很多人会困惑,因为都可以用来获取文本内容,实际上,两者还是有很多区别的,本文就将介绍这两个属性的异同,希望可以对大家的学习有所帮助。

阅读全文…

聊聊JS DOM变化的监听检测与应用

2019年08月30日,星期五

DOM变化与检测

实际开发的时候,我们需要知道DOM元素是否发生了变化,或属性变化,或DOM节点的新增或删除,从IE9浏览器开始,浏览器启用了多种方法,可以监听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()……

阅读全文…