Javascript高级程序设计第二版第十章--DOM--笔记

今天给诸位分享一下，js高级程序设计第二版，第十章

有人会说，为什么没有第九章呀，

因为第九章是浏览器检测，哥直接略过了。

第十章 DOM

如果说BOM是一个页面内html以外的东西，那么dom就是页面内html以内的东西。

一般的结构可以这样理解：

document -> html -> head + body

所以，好多的方法document.getElementById,document.getELmenetsByTagName,document.getElementsByName 都是从这儿来的。

而且以上属性只有getElementById，element后面没有s，其它的都有s，复数形式嘛。

dom 的结构有几种复杂的关系：

一般是：本身而言，上有父：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，如何移动的。