Javascript高级程序设计第二版第十章--DOM--笔记
今天给诸位分享一下,js高级程序设计第二版,第十章
有人会说,为什么没有第九章呀,
因为第九章是浏览器检测,哥直接略过了。
第十章 DOM
如果说BOM是一个页面内html以外的东西,那么dom就是页面内html以内的东西。
一般的结构可以这样理解:
document -> html -> head + body
一般是:本身而言,上有父:parentNode,下有子:childeNodes,平辈的还有兄弟姐妹,哥有:previousSibling,
弟有:nextSlibling,长子有:firstChild,末弟有:lastChild
操作 dom 的几大 curd 法宝:
c: 有appendChild,根据先有节点添加节点。createElement,未知节点创建节点.创建后在把他们添加到body节点上。还有个insertBefore代码实现为:document.body.appendChild(element);
u: replaceChild(newNode, oldNode);替换修改节点
r: 查找,getElmentById,getElementsByTagName,getElementsByName,
d: removeChild 删除节点
还有就是节点有几大类型检测。
换句话说,节点的三大属性,
nodyType,nodeName,nodeValue;
常用的是nodyType,
比如:<p id="haoqing">haoqing</p>
这个,
就是
nodeType = 1 是p元素
nodeType = 2 id=haoqing 属性节点
有人会说,为什么没有第九章呀,
因为第九章是浏览器检测,哥直接略过了。
第十章 DOM
如果说BOM是一个页面内html以外的东西,那么dom就是页面内html以内的东西。
一般的结构可以这样理解:
document -> html -> head + body
所以,好多的方法document.getElementById,document.getELmenetsByTagName,document.getElementsByName 都是从这儿来的。
而且以上属性只有getElementById,element后面没有s,其它的都有s,复数形式嘛。
一般是:本身而言,上有父:parentNode,下有子:childeNodes,平辈的还有兄弟姐妹,哥有:previousSibling,
弟有:nextSlibling,长子有:firstChild,末弟有:lastChild
操作 dom 的几大 curd 法宝:
c: 有appendChild,根据先有节点添加节点。createElement,未知节点创建节点.创建后在把他们添加到body节点上。还有个insertBefore代码实现为:document.body.appendChild(element);
u: replaceChild(newNode, oldNode);替换修改节点
r: 查找,getElmentById,getElementsByTagName,getElementsByName,
d: removeChild 删除节点
还有就是节点有几大类型检测。
换句话说,节点的三大属性,
nodyType,nodeName,nodeValue;
常用的是nodyType,
比如:<p id="haoqing">haoqing</p>
这个,
就是
nodeType = 1 是p元素
nodeType = 2 id=haoqing 属性节点
nodeType = 3 haoqing 文本节点
8 是注释节点,9 是文档节点 11是文档片断
还有一个节点属性,
cloneNode(true | false)
复制节点,true 会复制子节点,false 不会复制。一般称复制子节点为深度复制。
还有几个重要的属性,innerText inerHTML,outText,
几个浏览器通用的是 innerHTML,其它的都是only ie,可以不加关注。
而innerHTML的各个浏览器的解析也是不一样的。
一般,前端面试会问到 node 是如何 curd,如何移动的。
分类:
JavaScript
【推荐】国内首个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 重磅开源!
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· [AI/GPT/综述] AI Agent的设计模式综述