1. JS学习笔记六：js中的DOM操作
文章目录
1. JS学习笔记六：js中的DOM操作1.1. 获取Dom节点1.2. 元素属性的操作方式1.3. DOM节点的创建、插入和删除1.4. 文档碎片以及文档碎片的作用1.5. DOM快速操作表格元素1.1. 获取Dom节点
DOM节点分为元素节点（也就是代码中的标签）一个是文本节点即：一些空格，换行和一些字符。DOM获取子节点DOM获取父节点1、使用childNodes获取子节点的时候，childNotes返回的是子节点的集合，是一个数组的格式，他会把换行和空格也当成节点信息。
2、children：返回的是元素节点，不会返回文本节点。
判断节点类型1、parentNode:
获取的是当前元素的直接父元素，是w3c的标准。（元素节点的父元素只能是元素节点，不可能是文本节点，文本节点的父元素可能为元素节点）
2、parentElement:
获取的是当前元素的直接父元素，是ie的标准。
3、offsetParent：
获取离当前节点最近的一个有定位的父节点或祖父节点，如果没有即为获取body
nodeType：1为元素节点，3为文本节点，（即空格或换行，字符）
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">#bigdiv{position:relative;}</style></head><body><div id="bigdiv"><div id="div1"><div>1111</div><div>222</div></div></div><script type="text/javascript">var oDiv=document.getElementById('div1')//childNode获取子节点会获取到文本节点console.log(oDiv.childNodes)//children获取子节点不会获取到文本节点console.log(oDiv.children)//下面两个获取的内容是一样的，只是标准不同而已。var odiv1=oDiv.childNodesconsole.log(oDiv.parentNode)console.log(oDiv.parentElement)//offsetParent会获取离当前节点最近的有定位的console.log(oDiv.offsetParent)//这个会获取bigdiv元素节点//nodeType 判断该节点的类型，如果返回1则表示元素节点，3,则表示文本节点console.log(odiv1[0].nodeType,'我是文本节点')console.log(odiv1[1].nodeType,'我是元素节点')</script></body></html>
获取第一个子节点
获取最后一个子节点firstChild：有可能会匹配到的是空白或换行的节点信息
firstElementChild：不会匹配换行或空白的节点信息，（获取到的是元素的节点，不会获取到文本节点）
获取兄弟节点lastChild：有可能会匹配到的是空白或换行的节点信息
lastElementChild：不会匹配空白或换行的节点信息（获取到的是元素节点，不会获取到文本节点）
previousSibling和privousElementSibling：获取上一个兄弟节点，区别与上面一样。
nextSibling和nextElementSibling：获取下一个兄弟节点
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><div id="div1"><div>我是第一个</div><div>我是第二个</div><div id="three">我是第三个</div><div>我是第四个</div><div>我是第五个</div></div><script type="text/javascript">var oDiv=document.getElementById('div1')var three=document.getElementById('three')//获取第一个子节点console.log(oDiv.firstElementChild)//获取最后一个子节点console.log(oDiv.lastElementChild)//获取上一个兄弟节点console.log(three.previousElementSibling)//获取下一个兄弟节点console.log(three.nextElementSibling)</script></body></html>
1.2. 元素属性的操作方式
有三种方式获取元素属性1、oDiv.style.display=“block”
2、oDiv.style[“display”]=“block”
3、通过Dom方式获取元素属性
获取：getAttribute(属性名称)
设置：setAttribute(属性名称，值)
删除：removeAttribute(属性名称)
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><div id="div1" value="2">123</div><script type="text/javascript">var oDiv =document.getElementById('div1')//第一种oDiv.style.color='red'//第二种,中括号里面的一定要带引号，因为不带的话会被认为是传过来的变量。oDiv.style['color']='yellow'//第三种，是dom的方式oDiv.getAttribute('id')//获取属性console.log("我是改变前的id:"+oDiv.getAttribute('id'))console.log("我是改变前的value:"+oDiv.getAttribute('value'))//改变属性oDiv.setAttribute('id','tim')oDiv.setAttribute('value','100')console.log("我是改变后的id:"+oDiv.getAttribute('id'))console.log("我是改变后的value:"+oDiv.getAttribute('value'))//删除oDiv.removeAttribute('value')</script></body></html>
1.3. DOM节点的创建、插入和删除
创建并添加Dom元素插入元素document.createElement(‘标签名’) 创建一个DOM节点
appendChild(DOM节点) 为某个DOM添加一个子节点，在最后添加
删除DOM元素insertBefore(节点，原有节点) 在已有元素前插入
removeChild(节点) 删除一个节点。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><ul id="ullist"><li>我是第一个</li><li>我是第二个</li><li>我是第三个</li><li>我是第四个</li></ul><script type="text/javascript">var oul=document.getElementById('ullist')var oLi=oul.getElementsByTagName('li')//创建Dom节点var li=document.createElement('li')li.innerHTML='我是新创建的li'//将dom节点添加到最后面oul.appendChild(li)//如何在指定位置添加dom节点？oul.insertBefore(li,oLi[2])//删除dom节点oul.removeChild(oLi[0])</script></body></html>
1.4. 文档碎片以及文档碎片的作用
document.createDocumentFragement()：创建文档碎片节点 是一个虚拟的节点对象。文档碎片存在的意义就是减少页面渲染DOM的次数。理论上文档碎片可以提高DOM操作性能。比如：在一个列表里面不断的插入li
<ul id="ul1"></ul>
如果没有创建文档碎片，每生成一个li,就会插入一次，需要插入100次。
var oul=document.getElementById('ul');for(var i=0;i<100;i++){var oLi=document.createElement('li');oUl.appendChild(oLi);}
如果使用文档碎片，每次把li插入虚拟的节点文档碎片节点，最后只插入一次即可。只会重新渲染一次页面。
var oUl=document.getElementById('ul1')var OFrag=document.createDocumentFragment();for(var i=0;i<100;i++){var oLi=document.createElement('li');oFrag.appendChild(oLi);}oUl.appendChild(oFrag);
1.5. DOM快速操作表格元素
DOM获取表头表尾,table1表示整个表格。table1.tHeadtable1.tFoot
DOM获取表体
获取行数的集合，即获取表格对象里的tr行数的集合table1.tBodies
获取到的是一个集合，因为可以存在多个tBody
获取行里面单元格td的数量，是一个集合，所以获取内部第一个要用cell[0]获取rows
cells
<!DOCTYPE html><html><head><title></title></head><body><table id="table1" border="1"><thead><td>姓名</td><td>年龄</td><td>身高</td></thead><tbody><tr><td>张三</td><td>18</td><td>180cm</td></tr><tr><td>李四</td><td>19</td><td>190cm</td></tr><tr><td>王五</td><td>20</td><td>170cm</td></tr></tbody></table><script type="text/javascript">var table1=document.getElementById('table1')// alert(table1.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[0].getElementsByTagName('td')[0].innerHTML)// alert(table1.tBodies[0].rows[0].cells[0].innerHTML)table1.tBodies[0].rows[0].cells[0].innerHTML='tim'</script></body></html>
