文档对象模型DOM

文档节点部分层次结构

通过标签获取元素的方式：

1、document.getElementById();属于document对象的

2、document.getElementsName();属于HTMLDocument类中

只用于表单，iframe,image.元素的name属性会在document对象上自动创建相应的属性。快捷属性：forms,images,links.还有一个属性是anchors，指有name属性，没有href属性的a标签。还有scripts属性。

总的来说是document有forms,images,links,anchors,scripts属性。

3、document.getElementsByClassName()返回的是NodeList对象

4、document.getElementsByTagName()返回的是NodeList对象

5、document.querySelector();如果后续增加节点，querySelector不更新

document.querySelectorAll();返回一个NodeList对象。

所以总的来说返回NodeList对象的有getElementsByTagName,getElementsByClassName,querySelectorAll.

返回HTMLCollection对象的有

getElementsName,forms...

document的属性有:

forms,images,links,anchors,scripts

document主要是选取元素，那节点与节点之间的关系可以从Node类中定义

获取关系节点：parentNode,childsNode,firstChild,lastChild,nextSibling,previoursSibling,nodeType,

nodeValue,nodeName

也可以通过element对象上获取元素

children(获取该元素的所有的element子元素，必须是element)

还有类似node对象的属性如：firstElementChild...

所以，总的来说原生获取元素有三种方法，

document对象的方法，node对象的属性，element对象的属性。

可移植的文档遍历函数

//e是当前元素，n是需要获取的第几层父节点

function parent(e, n){

if(n===undefined) n = 1;

while(n--&&e) e= e.parentNode;

if(!e||e.nodeType!==1) return null

return e;

}

function sibling(e, n){

while(e && n!==0){

if(n>0){

if(e.nextElementSibling)

e= e.nextElementSibling;

else{

for(e=e.nextSibling;e&&e.nodeType!==1;e=e.nextSibling)

}

n--;

}

else{

if(e.nextElementSibling)

e= e.previousElementSibling;

else{

for(e=e.previousSibling;e&&e.nodeType!==1;e=e.previousSibling)

}

n++;

}

}

return e;

}

属性：

获取属性的方式：

1、通用的属性：

id,lang,dir,title,className

元素特定属性：

src,action.....

通用属性与特定属性的获取方式：node.属性,但是这种方式不能删除属性

2、getAttribute(),setAtrribute(),removeAtrribute(),hasAttribute()

3、自定义属性data-

使用dataset.自定义属性，获取自定义属性，但是不是所有的浏览器都支持，可以使用getAttribute获取自定义属性。

4、attributes

document.body.attributes返回body的属性集。

attributes是Node对象的属性。

讲完属性到元素内的内容

获取元素的内容的方式：

1、innerHTML

2、outerHTML

3、纯文本内容--textContent属性

4、innerText

之前讲的都是获取节点，现在讲的是创建，插入，删除，替换节点

创建节点：

document.createElement()

document.createTextNode()

document.createComment()

documentFra

插入节点：

同级：

insertBefore()

insertAfter()

子元素：

appendChild()

删除节点：

removeChild()

替换节点：

replaceChild(newNode,oldNode)

所以总的来说一个元素大概也有生命周期：

被创建--插入--被操作--删除或替换

页面加载的过程包括构建DOM树，布局，渲染

在构建好DOM抽象树之后，就要计算元素在实际浏览器页面的位置。获取元素在浏览器的位置信息的属性是：

视口(窗口)坐标：

clientX,clientY，getBoundingClientRect()(获取元素相对视口的top,left,bottom,right),elementFromPoint()

文档坐标（页面）：

pageX,pageY

屏幕坐标：

screenX,screenY

偏移量：

offsetX,offsetY

滚动：

scrollTop,scrollLeft

宽度：

offsetWidth,offsetHeight(元素的占用的空间，包括边框)

clientWidth,clientHeight(元素的内容区)

scrollWidth,scrollHeight(包含滚动内容)

表单和元素属性：

表单：

elements,action,method,encoding,target

方法：submit(),reset()

元素：

type,name,form,value

document的属性：

cookie,url,location,referrer,title,domain,lastModified,body,forms.documentElement

选取内容

window.getSelection,document.selection.createRange().text

可编辑内容

contenteditable