高三dom笔记

http://www.cnblogs.com/cmptlgg/ 我的博客园

每个节点都有一个 childNodes 属性，其中保存着一个 NodeList 对象。 NodeList 是一种类数组
对象，用于保存一组有序的节点，可以通过位置来访问这些节点。请注意，虽然可以通过方括号语法来
访问 NodeList 的值，而且这个对象也有 length 属性，但它并不是 Array 的实例。 NodeList 对象的
独特之处在于，它实际上是基于 DOM 结构动态执行查询的结果，因此 DOM 结构的变化能够自动反映
在 NodeList 对象中。我们常说， NodeList 是有生命、有呼吸的对象，而不是在我们第一次访问它们
的某个瞬间拍摄下来的一张快照。 DOM中的集合对象都是动态的;

在这些节点对象关系中，如果需要遍历查询多个节点对象.  childNodes 属性与其他属性相比更方便一些.
hasChildNodes()也是一个非常有用
的方法，这个方法在节点包含一或多个子节点的情况下返回 true；应该说，这是比查询 childNodes
列表的 length 属性更简单的方法。

 
JS DOM中所有 节点类都继承Node类;  既是类也是对象；
Node>    Document(文档类)>HtmlDocumet>doucmnet
 类-对象   类-对象           类-象       实例对象

Node>Element(元素类)>HTMLElement-由此类产产生的所有HTML元素类-对象比如(HTMLHtmlElement)>所有html元素对象 比如(html对象)>attributes(特性对象)->NamedNodeMap(特性类-对象)
                                                                                                              (所有html元素对象的属性)
Node> CharacterData> Text>  text> 
类-对象   类-对象      类-对象  对象                   
所有这些节点类型(类)。当然还有其他的一些类型(类)之间的关系就不说了。用的比较少。
所有节点类-对象 之间都有着这样那样的关系。最终构成DOM

 

appendChild(node)，用于向 childNodes 列表的末尾添加一个节点。添加节点后， childNodes 的新增
节点、父节点及以前的最后一个子节点的关系指针都会相应地得到更新。更新完成后， appendChild()
返回新增的节点

传入到 appendChild()中的节点已经是文档的一部分了，那结果就是将该节点从原来的位置
转移到新位置。即使可以将 DOM 树看成是由一系列指针连接起来的，但任何 DOM 节点也不能同时出
现在文档中的多个位置上。因此，如果在调用 appendChild()时传入了父节点的第一个子节点，那么
该节点就会成为父节点的最后一个子节点


replaceChild(newnode,oldnode)此方法父节点不能替换子节点，子节点可以替换子节点和父节点

 

所有节点都有的最后一个属性是 ownerDocument，该属性指向表示整个文档的文档节点。这种关
系表示的是任何节点都属于它所在的文档，任何节点都不能同时存在于两个或更多个文档中。通过这个
属性，我们可以不必在节点层次中通过层层回溯到达顶端，而是可以直接访问文档节点。

因为节点关系对象指针都是只读的，（只能访问属性）;
IE8 及更早版
本与其他浏览器处理空白字符的方式不一样。 IE9 之前的版本不会为空白符创建节点

cloneNode()方法不会复制添加到 DOM 节点中的 JavaScript 属性，例如事件处
理程序等。这个方法只复制特性、（在明确指定的情况下也复制）子节点，其他一切
都不会复制。 IE 在此存在一个 bug，即它会复制事件处理程序，所以我们建议在复制
之前最好先移除事件处理程序。
最新版的谷歌火狐getElementsByName()函数返回NodeList对象而不是 HTMLCollectioin对象。IE返回HTMLCollectioin对象；
DocumentFragment类型可以避免致浏览器反复渲染（呈现）新信息

dom元素大小：1. 偏移量
首先要介绍的属性涉及偏移量（offset dimension），包括元素在屏幕上占用的所有可见的空间。元素
的可见大小由其高度、宽度决定，包括所有内边距、滚动条和边框大小（注意，不包括外边距）。通过
下列 4 个属性可以取得元素的偏移量。
offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）
水平滚动条的高度、上边框高度和下边框高度。包括padding border;不包含maring;

offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、（可见的）垂
直滚动条的宽度、左边框宽度和右边框宽度。包括padding border;不包含maring;

offsetLeft：元素的左外边距至包含元素(一直到祖先元素)的(左)padding||margin||border之间的像素距离。

offsetTop：元素的上外边距至包含元素(一直到祖先元素)的(上)padding||margin||border之间的像素距离。

所有这些偏移量属性都是只读的，而且每次访问它们都需要重新计算。因此，应
该尽量避免重复访问这些属性；如果需要重复使用其中某些属性的值，可以将它们保
存在局部变量中，以提高性能。

clientTop和clientLeft:这 组 属 性 可 以 获 取 元 素 设 置 了 左 边 框 和 上 边 框 的 大 小    

通过 scrollLeft 和 scrollTop 属性既可以确定元素当前滚动的状态，也可以设置元素的滚动位
置。在元素尚未被滚动时，这两个属性的值都等于 0。如果元素被垂直滚动了，那么 scrollTop 的值
会大于 0，且表示元素上方不可见内容的像素高度。如果元素被水平滚动了，那么 scrollLeft 的值会
大于 0，且表示元素左侧不可见内容的像素宽度。这两个属性都是可以设置的，因此将元素的
scrollLeft 和 scrollTop 设置为 0，就可以重置元素的滚动位置。下面这个函数会检测元素是否位
于顶部，scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。
scrollTop：被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。


 客户区大小：
元素的客户区大小（client dimension），指的是元素内容及其内边距所占据的空间大小。有关客户区
大小的属性有两个： clientWidth 和 clientHeight。其中， clientWidth 属性是元素内容区宽度加
上左右内边距宽度； clientHeight 属性是元素内容区高度加上上下内边距高度；不包含margin||border||滚动条 与偏移量相似，客户区大小也是只读的，也是每次访问都要重新计算的

 web前端||后端||winapp 162791594交流学习群