再读javascript（三）

原生javascript

上接再读javascript（二）
本章主要记录DOM（文档对象模型）

1、DOM1级获取节点信息

nodeType: 节点类型。
nodeName 和 nodeValue，对于元素节点，nodeName对应元素标签，nodeValue始终为null。
someNode.childNodes[n] 或者 someNode.childNodes.item(n)获取指定索引节点
nextSibling 和 previousSibling访问后一、前一兄弟节点。
firstChild 和 lastChild访问第一个和最后一个子节点。
parentNode 和 childNodes访问父节点和子节点们

2、DOM1级操作节点

appendChild(),从父节点的末尾插入，成为父节点最后一个节点。
insertBefore(),参数一：要插入的节点；参数二：作为参照的节点。插入的节点作为参照的节点前一个兄弟节点。
replaceChild（），参数一：要插入的节点；参数二：要替换的节点
removeChild（），移除指定节点
cloneChild（），复制某个节点，参数true：深复制，复制本节点及子节点；参数false：浅复制，只复制本节点

3、document对象类型

是HTMLDocument的一个实例，表示整个HTML，也是window对象的一个属性。
documentElement属性始终指向元素，body属性直接指向元素
URL、domain、referrer属性

document.URL 获取完整的URL
document.domain 获取完整的域名
document.referrer 取得来源页面的URL

document特殊属性集合：

document.anchors 所有带name特性的元素
document.forms 所有form元素
document.images 所有img元素
document.links 所有带href特性的元素

4、element对象类型

可以直接通过element.访问和设置相应属性。
getAttribute()、setAttribute()、removeAttribute()
创建元素 document.createElement()
tips：在操作元素节点前（尤其是遍历一个元素数组），先判断元素类型element.nodeType == 1时，可以进行正常的element操作。

5、text对象类型、comment对象类型

个人感觉用到的不多

6、DOM扩展

html5之前获取元素的两种方法，getElementByID、getElementsBytagName；HTML5补充了querySelector和querySelectorAll方法，可以根据元素的tag、id、className来获取指定元素

document.querySelector: 在文档范围内搜索。
element.querySelector: 在元素后代范围内查找

7、HTML5焦点管理

document.activeElement 属性，始终会引用DOM中当前获得了焦点的元素。
元素获得焦点方式：页面加载、用户输入（Tab键切换）、代码中调用focus()事件

8、HTML5插入标记

innerHTML: 替换调用元素子节点
outerHTML: 替换调用元素

9、innerText

firefox不支持innerText属性，但是有个textContent属性。

兼容Firefox： typeof element.textContent == 'string' ,为true，则调用textContent属性，否则调用innetText属性

10、滚动

scrollIntoView(): 将调用的元素滚动至浏览器视口内。传入true，与上边框对齐；传入false，尽可能与下边框对齐。
scrollIntoViewIfNeeded(): 只当元素不在视口内有效。传入true参数，尽量显示视口垂直方向中部。
scrollByLines(): 将元素内容滚动指定行高
scrollByPages(): 将元素内容滚动指定的页面高度

11、DOM2级

访问和设置元素的样式：element.style.（只能访问和设定style属性中的样式，不可访问外部样式）

float是javascript保留字，访问float样式可以通过cssFloat（非ie），styleFloat（ie）

12、计算元素大小

• offsetHeight、offsetWidth 元素占用空间的宽高
  offsetLeft、offsetTop 元素与包含元素的作、上边框的像素距离
  

  取一个元素在页面上的偏移量，将这个元素的offsetLeft和offsetTop语气offsetParent的相同属性相加，如此循环直至根元素。

function getElementTop(element){
    var toptalTop = element.offsetTop;
    var current = element.offsetParent;
    while(current !== null){
        totalTop += current.offfsetTop;
        current = current.offsetParent;
    }
    return totalTop;
}

• clientWidth、clientHeight 元素内容及其内边距所占空间大小。
• scrollTop、scrollLeft、scrollHeight、scrollWidth（滚动大小）
  

  在没有滚动条的情况下scrollHeight、scrollWidth等于内容的总高度和宽度
  scrollLeft、scrollTop被隐藏在内容区域左方和上方的像素数。可以改变这个属性改变元素滚动的位置

13、确定元素大小

getBoundingClientRect()方法。

该方法返回一个矩形对象。包含left、top、right、bottom属性。分别对应元素在页面中相对视口的位置。

14、页面滚动

页面滚动：scrollTo、scrollBy：均接收两个参数，参数一表示水平方向，参数二表示垂直方向。前者表示滚动到指定坐标。后者表示滚动指定像素。