javascript dom

一、概述

客户端Javascript的存在，是为了使静态的Html页面变成可交互的Web应用。可以脚本化Html页面的内容是JavaScript的核心目的。

二、选择文档元素

1、getElementByID();

每个文档的元素都可以赋一个在文档范围内唯一的id属性。在微软IE8之前的浏览器，该方法还会去匹配name属性，然后返回匹配的元素。

2、getElementsByName();

3、getElementsByTagName();

可以在document和element上调用

4、getElementByClassName();

可以在document和element上调用

5、querySelector()，querySelectorAll()

可以在document和element上调用，

三、文档结构与遍历

1、作为节点树：文档由节点组成，节点之间形成一棵树形的结构。文档对象，元素对象，文本对象都是节点。节点定义了以下重要属性：

parentNode：父节点，如果没有返回null，比如document没有父节点

childNodes：动态的子节点列表

firstChild,lastChild：第一个，最后一个子节点，如果没有返回null

nextSibling,previousSibling：下一个，上一个兄弟节点

nodeType：document=9，element=1，text=3，comments=8，document fragment=11

nodeValue：text或者comment节点的文本内容

nodeName：标签名称，转换成了大写

2、作为元素树：不考虑文档中的文本，抽取所有的元素作为一个树，元素对象的属性有：

children:  子元素列表

firstElementChild,lastElementChild:

nextElementSibling,previousElementSibling

childElementCount

四、属性 Attribute

1、Html 属性作为Element对象的属性

html属性不区分大小写，但是element对象区分，所以html属性转为element属性，属性名要做相应变化。

2、获取，设置，移除，判断是否存在某属性

getAttribute,setAttribute,removeAttribute,hasAttribute

3、html5中的dataset attribute

4、属性作为节点：document.body.attributes.bgcolor, document.body.attributes["onload"]

五、元素内容

1、作为html

innerHTML,outHTML,insertAdjacentHTML();

2、作为纯文本

textContent,innerText属性

3、作为文本节点

nodeValue,data属性

六、创建，插入，删除节点

1、创建

createElement（），createTextNode（），createComment（），createElementNS（），createDocumentFragment（）

cloneNode（），importNode（）

2、插入

appendChild（），insertBefore（）

如果插入的元素，在文档中已经存在，相当于把元素从原来的位置移动到插入的位置。

3、删除和替换节点

removeChild(), replaceChild()

4、使用documentFragment

一个新创建的documentFragment，是一个临时的节点容器，当把一个documentFragment插入到document中的时候，实际上是把documentFragment里的所有子节点当做一个整体插入的。

七、文档和元素的图形化，以及滚动

本节讨论文档元素的渲染，文档元素的位置通过像素坐标确定的。有2个坐标概念：文档坐标，和视图坐标。

两套坐标系相差一个滚动条的位置。不同的浏览器获取滚动条位置的方法不一样。

1、从元素获取位置：getBoundingClientRect(), getClientRects()

2、从位置获取元素：elementFromPoint()

3、滚动页面：window对象的方法：scrollTo(),scroll(),scrollBy(),scrollIntoView()