JS学习笔记六：js中的DOM操作

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获取子节点

1、使用childNodes获取子节点的时候，childNotes返回的是子节点的集合，是一个数组的格式，他会把换行和空格也当成节点信息。

2、children：返回的是元素节点，不会返回文本节点。

DOM获取父节点

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添加一个子节点，在最后添加

插入元素

insertBefore(节点，原有节点) 在已有元素前插入

删除DOM元素

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.tHead
table1.tFoot

DOM获取表体

table1.tBodies

获取到的是一个集合，因为可以存在多个tBody

获取行数的集合，即获取表格对象里的tr行数的集合

rows

获取行里面单元格td的数量，是一个集合，所以获取内部第一个要用cell[0]获取

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>

JS学习笔记六：js中的DOM操作相关推荐

js学习笔记2 -- js使用方法
js学习笔记2 -- js使用方法方法一,使用外部js文件(推荐使用) 方法二,写在script标签中方法三,写到标签的onclick属性中方法四,使用超链接方法一,使用外部js文件(推荐使用 ...
Vue.js 学习笔记六 v-model 双向绑定数据
之前说的v-bind指令,可以绑定数据,但是是单向的,从model向view绑定,下面介绍v-model,可以双向绑定数据 <div id="divApp"><p ...
【theano-windows】学习笔记六——theano中的循环函数scan
前言 Scan是Theano中最基础的循环函数, 官方教程主要是通过大量的例子来说明用法. 不过在学习的时候我比较习惯先看看用途, 然后是参数说明, 最后再是研究实例. 国际惯例, 参考网址官网关于 ...
JS学习笔记——高级编程中compose函数的介绍和基本实现
1.前言在之前探讨redux的中间件的时候,applyMiddleware源码中有遇到过compose()函数,当时不太明白起作用,所以就上网好好查了一下,做了个总结. 2.普通函数在函数式编程当 ...
3、Angular JS 学习笔记 – Controllers [翻译中]
2019独角兽企业重金招聘Python工程师标准>>> 理解控制器在Angular中,一个控制器是一个javascript构造函数用于填充Angular作用域. 当一个控制器通过使 ...
js学习笔记——在html中嵌入脚本
一.在html中嵌入js代码: 在html文件里嵌入js代码主要有四种形式: 第一种是通过<script></script>标记,这种一般用来定义一些函数,放在body外: 第 ...
three.js学习笔记(六)——创建简单鬼屋
初始场景一个平面,一个球体用来测试环境光和月光,测得光源正常后移除球体创建房屋组别因为我们房屋可能包含许多东西像是门.屋顶之类的,所以需要创建一个房屋组,将所有属于屋子的物体给添加到这个组里面, ...
Three.js学习笔记-Tween.js插件
TweenJS中文文档了解插件的API 缓动函数 Linear:线性匀速运动效果: Quadratic:二次方的缓动(t^2): Cubic:三次方的缓动(t^3): Quartic:四次方的缓动(t ...
Linux学习笔记-标准库中的管道操作
目录理论例子理论 stdio.h里面有标志库管道操作 FILE *popen(const char* cmdstring, const char *type);返回值:成功返回文件指针,出错返回 ...

JS学习笔记六：js中的DOM操作

1. JS学习笔记六：js中的DOM操作

文章目录

1.1. 获取Dom节点

1.2. 元素属性的操作方式

1.3. DOM节点的创建、插入和删除

1.4. 文档碎片以及文档碎片的作用

1.5. DOM快速操作表格元素

JS学习笔记六：js中的DOM操作相关推荐

最新文章

热门文章