DOM树节点关系

DOM是JS中专门操作HTML页面内容的

他的三种基本使用方法是：

1.  document.getElementById('')；  ——>选取html页面中带有Id的属性名；

2.document.getElementsByClassName('')； ——>选取html页面中属性名为class的内容；

3.document.getElementsByTagName(''")； ——>选取html页面中特指的标签属性。

 

在HTML中的每一个元素：元素，属性，文本都是一个节点对象（node），document对象是整棵树的根节点。

 

节点父子关系：

1.  node.ParentNode ：获得节点的父节点；

　  node.ChildNode ：获得node的所有子节点；

     node.firstChild：获得node下最后一个子节点。

节点兄弟关系：

2.  node.PreivousSibling ：返回当前节点的前一个兄弟节点；

　  node.nextSibling ：返回当前节点的下一个兄弟节点；

*网页中的一切都是节点，包括换行和空字符

 

元素树之间的关系：仅包含元素节点的树结构（仅是节点数的子集）

　1.父子关系：

　　elem.parentElement：返回一个父元素对象；

　　elem.child（IE8支持）返回一个子元素对象集合；

　　elem.firstElementChild 返回第一个子元素对象；

　　elem.lastElementChild 返回最后一个子元素。

　 2.兄弟关系：

　　elem.preivousElementSibling： 返回当前节点的前一个兄弟元素；

　　elem.nextElementSibling ： 返回当前节点的下一个兄弟元素。

　　

选择器查找：查找一些条件复杂的元素，既可以找一个元素，也可以找多个元素，Selector可以写css的选择器

　　语法：var elem=parent.querySelector("seletor")；单个　

　　　　　var elem=parent.querySelectorAll("seletor")；多个

　　返回非动态集合：实际存储的数据，不会返回访问DOM树

 

getxx和SeletorAPIde差别：

　　1.返回值：get返回动态集合；selectorAPI返回非动态集合

　　2.效率：get首次 查找效率高；selectorAPI首次查找效率低

　　3.易用性selector更简单，get更繁琐

推荐：

　　一个条件能找到的元素就用 get；

　　若条件过多时就用selector

 

获取或修改HTML内容：

elem.innerHTML

获取或修改元素

elem.classname="标签"

 

追加到DOM树，只有添加到DOM树中，才能显示在网页中

1.在父元素的结尾添加新元素

　　Parent.appendChild（elem）

2.插入：在现有子元素插入新元素

　　Parent.insertBefore（elem，oldElem）；

3.替换：替换现有子元素

　　Parent.replaceChild(elem,oldelem)

 

option ：获得select下的所有option对象

.option.length

.length 也可以直接获得option的个数

.value:

　　1.如果选中的option有value属性，则返回value属性；

　　2.如果选中的option没有value属性，则返回对标签中的内容

.selectedIndex  ： 获得当前