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>