[转]《精通Javascript》笔记:第五章(DOM)
《精通Javascript》笔记:第五章(DOM)
- DOM是一个表达XML文档的标准(由W3C制定的)。它未必是最快的方式,也未必是最轻量级的或者最容易使用的,但确实应用最广泛的。
- 访问根元素<html>:document.documentElement
- 处理DOM中的空格:终于知道前几天看的as程序中为啥要清空格了。
Firefox下任何空格、换行、tab都会被认为是一个childnode,而IE下只有内联元素(如em,span)后的换行、空格、tab会被认为是一个childnode。 - 元素:1,document.ELEMENT_NODE
文本:3,document.TEXT_NODE
文档:9,document.DOCUMENT_NODE
常量只对非IE浏览器有效 - Firefox、Safari、Opera中存在一个强大的对象原型(Object Prototype)叫HTMLElement。幸运的是,jason Karl Davis为两个不支持的浏览器写了一个支持访问HTMLElement的库。
- 通过getElementsByTagName返回的nodeList数组,不支持pop(), push(), shift()等数组的常用方法。
- 浏览器的渲染和操作顺序大致如下:
1) HTML解析完毕
2) 外部脚本和样式表加载完毕
3) 脚本在文档内解析并执行
4) HTML DOM完全构造起来
5) 图片和外部内容加载
6) 网页完成加载 - Selector:CSS1 CSS2 CSS3 cssQuery XPath 1.0 XPath 2.0
- 获取元素内文本内容的一个窍门是,需要记住元素并不是直接包含文本的,而是包含在一个子文本节点中。
- 存取属性:className, htmlFor, cssFloat, cssText
- 可以设置和获取非传统的属性,就是自创的属性。(比如菜单展开的时候,设置open=true)
- 记住insertBefore(insert, before)的参数顺序:看函数名,insert第一个,before第二个。
- 根据http://quirksmode.org的说法,用innerHTML注入html比DOM方法快很多。
- 转化一个DOM节点/HTML字符串混合型参数数组为纯粹的DOM节点数组
function cleanWhiteSpace(elem) { elem = elem || document; var cur = elem.firstChild; while (!cur) { if (cur.noteType == 3 && !/\S/.test(cur.nodeValue)) { elem.removeChild(cur); } else if (cur.nodeType == 1) { cleanWhiteSpace(cur); } cur = cur.nextSibling; } }
function domReady(f) { if (domReady.done) return f(); if (domReady.timer) { domReady.ready.push(f); } else { addEvent(window, ‘load’, isDOMReady); domReady.ready = [f]; domReady.timer = setInterval(isDOMReady, 13); } } function isDOMReady() { if (domReady.done) return false; if (document && document.getElementsByTagName && document.getElementById && document.body) { clearInterval(domReady.timer); domReady.timer = null; for (var i=0; i<domReady.ready.length; i++) { domReady.ready[i](); } domReady.ready = null; domReady.done = true; } }
elem.innerText; // 非Mozilla浏览器 elem.firstChild.nodeValue; // 其他浏览器 // 一个获取元素文本内容的通用函数 function text(e) { var t = ”; e = e.childNodes || e; for (var i=0; i<e.length; i++) { t += e[i].nodeType != 1 ? e[i].nodeValue : text(e[i].childNodes); } return t; }
function checkElem(a) { var r = []; if (a.constructor != Array) a = [a]; for (var i=0; i<a.length; i++) { if (a[i].constructor == String) { var div = document.createElement(’div’); div.innerHTML = a[i]; for (var j=0; j<div.childNodes.length; j++) { r[r.length] = div.childNodes[j]; } } else if (a[i].length) { for (var j=0; j<a[i].length; j++) { r[r.length] = a[i][j]; } } else { r[r.length] = a[i]; } } return r; }

作者:QLeelulu
出处:http://QLeelulu.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利

出处:http://QLeelulu.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利
分类:
WEB标准 & CSS
, JavaScript
标签:
javascript
, CSS
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· [AI/GPT/综述] AI Agent的设计模式综述