JavaScrip 基础之DOM 进阶

获取元素方法

1.利用DOM提供的方法获取元素

//通过id获取的元素是一个元素对象，获取不到就是null

document.getElementByld('id名')

//通过指定的上下文获取的指定的标签，获取的结果是一个集合，如果没有获取到那就是空集合（通过数组方法获取元素）

document.getElementByTagName('标签名')

//在整个文档中，通过name属性值获取一组节点集合（在ie中只有表单元素才能够识别）

getElementByNmae('标签名)

//通过指定的上下文或者按照指定class属性指定的标签，获取一个元素集合（通过数组方法获取元素）

getElementClassName('类名')


//===============================================================

//使用css选择器进行选择

//在指定上下文中通过选择器获取第一个元素，只能获取一个（就近原则）

querySelector('选择器')

//在指定上下文中通过选择器获取一组元素，获取不到就是空（通过数组方法获取元素）

querySelectorAll

2.利用层级关系进行元素的获取（逻辑性强但是兼容性差）

1.父级节点(返回最近一个父亲节点，如果没有父亲节点返货null)

node.parentNode

2.子节点

父节点.childNodes() //标准--但是不提倡使用，因为会提取所有的节点，包括文本节点

children // 非标准--但是只返回元素节点，所以提倡使用，本章节后面的只讲只提取元素节点的

3.兄弟节点

nextElementSibling // 返回当前元素节点下一个的元素节点

previousElementSibing  //  返回当前元素的上一个节点

4.创建节点

document.createElement ( ' 元素节点 '  )

5.添加节点

appendChild( '元素节点 ' ) // 将一个节点添加到指定父节点的末尾

insertBefore(  ' ' , ' ' )  // 有两个参数，是指将第一个参数节点放在第二个指定节点之前

6.删除节点

removeChild ( ' 节点名称 ')  //删除一个指定的节点

---

 2.创建表格对象

1.Table对象集合

集合：

cells ：返回包含表格中所有单元格的一个数组   w3标准：NO

rows ：返回含表格中所有行的一个数组              w3标准：Yes

2.table对象方法

方法：

deletRow：在表格中删除一行 w3标准：YES

insertRow：从表格中插入一个新行  w3标准 YES

---

3.HTML DOM tr 对象

tr 对象

cells：返回表格中所有<td>和<th>的集合 w3标准：YES

tr对象方法

deleteCell() ：删除行中指定的单元格

insertCell() ：在指定的一行中插入一个空行，也就是一个空的元素