原生js的dom操作

父节点
parentNode

 

第一个子节点 只会获取到元素节点

firstElementChild ★★★★★    ​

 

第一个子节点 (如果有文本节点将会获取到文本节点)

firstChild

​ 

最后一个节点 只会获取到元素节点

lastElementChild ★★★★★

 

最后一个子节点 (如果有文本节点将会获取到文本节点)

lastChild    ​ 

当前节点的后一个（下一个）节点 注：只会获取到元素节点(dom操作推荐使用这种方法,IE9测试兼容,IE8未测试)

nextElementSibling ★★★★★

 

​ ​ 当前节点的后一个（下一个）节点 (如果下一个节点是文本节点的话将获取到文件节点)

nextSibling

​ 当前节点的前一个（上一个）节点 注：只会获取到元素节点(dom操作推荐使用这种方法,IE9测试兼容,IE8未测试)

previousElementSibling ★★★★★

 

​ 当前节点的前一个（上一个）节点 注：如果上一个节点是文本节点的话将获取到文件节点

previousSibling

当前节点的子节点 注：只会获取到元素节点(IE9测试兼容,IE8未测试)

children ★★★★★

当前节点的子节点 注：子节点中如果有文本节点，那么也会同时获取到

childNodes

 

​ 节点（元素）的属性

attributes

li.attributes //将会输出li节点的所有属性值 注：是属性和值
li.attributes.id //将会输出li节点的id属性值 注：是属性和值
 

​ 把指定属性设置或修改为指定的值。

setAttribute()

li.setAttribute("要修改的属性","修改的值")
 

创建一个节点（元素）

document.createElement("div")
 

 在指定的子节点前面插入新的子节点。

insertBefore()

"父元素".insertBefore("要插入的节点","父元素.children[0]");//将元素插入到父元素的第一个子元素
 

插入新的子节点

appendChild(node)

ul.appendChild(li) //将li节点插入到ul子节点的最后
 

删除子节点

removeChild(node)

ul.removeChild(li) 删除ul的子节点中的li节点
 

删除当前节点  注：IE9不兼容

remove()
 

替换元素节点

//父元素.replaceChild (新元素,旧元素 )
node.replaceChild (newnode,oldnode )
 

插入HTML或者字符串

innerHTML && innerText

h1.innerHTML='<span>插入的标签</span>' //可以插入带标签
h1.innertext = '文字' //只能插入文字
 

表单

td&&tr 获取到自己所在的索引

td.cellIndex//返回td所在tr的索引
tr.rowIndex//返回tr所在tbody的索引
 

获取自定义属性

'要获取自定义属性的对象'.getAttribute ( 'data-name' )