当前位置:首页 > 日记 > 正文

JavaScript原生节点操作小结

JavaScript原生节点操作小结

前言:原生是Javascript的基础,还是需要多多重视,时间长都忘记了,现在整理一下。

获取子节点

children 不是标准的dom属性,但是几乎被所有浏览器支持。不包含文本节点.

注意:在IE中,children包含注释节点。

childNodes 是标准属性。返回所有子节点。包括文本节点。

获取第一个子节点

1.firstChild

document.getElementById('b_pole').childNodes[0].childNodes[0].firstChild

获取最后一个子节点

1.lastChild

document.getElementById('b_pole').childNodes[0].childNodes[0].lastChild

判断是否有子节点

1.hasChildNodes()

document.getElementById('b_pole').childNodes[0].childNodes[0].hasChildNodes()

判断节点类型与节点名称

1.nodeType

    1:元素

    2:属性

    3:文本

2.nodeName

document.getElementById('b_pole').childNodes[0].childNodes[0].nodeType //1document.getElementById('b_pole').childNodes[0].childNodes[0].nodeName //UL

创建DOM结构

1.创建元素节点 createElement

2.创建文本节点 createTextNode

document.createElement('div')document.createTextNode('ok')

插入节点

1.insertBefore

2.appendChild

document.getElementById('b_pole').insertBefore(document.createTextNode('div'),document.getElementById('b_pole').firstChild)
document.getElementById('b_tween').childNodes[0].nextSibling.previousSibling.appendChild(document.createTextNode('ZQZQZQZQZ'))

移除节点

1.removeChild

document.getElementById('b_pole').removeChild(document.getElementById('b_pole').childNodes[0])

并返回被删除的节点dom

获取元素的下一个节点(同胞)

1.nextSibling

document.getElementById('b_pole').nextSibling

获取元素的上一个节点(同胞)

1.previousSibling

document.getElementById('b_pole').previousSibling

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!

相关文章

excel表格间隔求和的方法excel表格

excel表格间隔求和的方法excel表格

方法,间隔,表格,电脑软件,excel,  Excel中的表格具体该如何间隔求和呢?下面是由小编分享的excel表格间隔求和的方法,以供大家阅读和学习。excel表格间隔求和的方法表格间隔求和步骤1:我们看到图中的颜色标记,我们是隔行求和,每隔一行求和一次…

jQuery动画_动力节点节点Java学院

jQuery动画_动力节点节点Java学院

节点,动画,学院,动力,电脑软件,用JavaScript实现动画,原理非常简单:我们只需要以固定的时间间隔(例如,0.1秒),每次把DOM元素的CSS样式修改一点(例如,高宽各增加10%),看起来就像动画了。但是要用JavaScript手动实现动画效果,需要编写非常复杂的代码。如…

前端框架学习总结之Angular、React

前端框架学习总结之Angular、React

学习,前端框架,详解,电脑软件,React,近几年前端的技术发展很快,细分下来,主要可以分成四个方面: 1.开发语言技术,主要是ES6&7,coffeescript,typescript等; 2.开发框架,如Angular,React,Vue.js,Angular2等; 3.开发工具的丰富和前端工…

ppt2007设置定时循环播放

ppt2007设置定时循环播放

设置,循环播放,方法,电脑软件,  平时使用课件时需要PPT以幻灯片的方式放映图片,这种放映方式在PPT上能够自由设置比图片软件好得多。那么如何ppt2007设置定时循环播放呢?接下来小编带大家了解一下吧。ppt2007设置定时循环播放的方法先打开…

js实现文字列表无缝滚动效果

js实现文字列表无缝滚动效果

文字,滚动效果,列表,电脑软件,js,本文实例为大家分享了js文字列表无缝滚动的具体代码,供大家参考,具体内容如下HTML代码:<div id="rule"> <div class="list" id="list"> <p>用户185****0000 获得XXX优惠券</p> …

Excel中进行输入数字变成E+的解决

Excel中进行输入数字变成E+的解决

输入,数字,步骤,解决方法,电脑软件,  对于很多人来说,并不需要经常使用Excel的,有些人刚接触excel发现输入一些挺长的数字比如学号,工号,身份证等就变成了E+的形式了。今天,小编就教大家在Excel中进行输入数字变成E+的解决方法。Excel中进行输…

excel设置标题栏为常见的方法步骤

excel设置标题栏为常见的方法步骤

方法,设置,标题栏,步骤,常见,  Excel中的表格拥有这庞大的数据,在对比数据的时候经常需要看到标题栏进行对比,设置标题栏为常见具体该如何进行操作呢?下面是由小编分享的excel设置标题栏为常见的方法,以供大家阅读和学习。excel设置标题栏为…

excel2010分类汇总批量合并相同单

excel2010分类汇总批量合并相同单

方法,分类,合并,批量,单元格,  在Excel中录入好数据以后经常需要用到分类汇总进行批量合并相同单元格,这个要求改如何实现呢?接下来是小编为大家带来的excel2010分类汇总批量合并相同单元格的方法,供大家参考。excel2010分类汇总批量合并相…

在Word2007文档中怎么插入表格题注

在Word2007文档中怎么插入表格题注

文档,表格,题注,电脑软件,  在Word2007文档中,用户可以通过插入表格题注为表格编号,从而更清晰规范地管理和查找表格。为表格插入题注在Word文档中含有大量表格的情况下尤其适用。以下是小编为您带来的关于在Word2007文档中插入表格题注,希…

js求数组中全部数字可拼接出的最大

js求数组中全部数字可拼接出的最大

示例代码,数字,整数,组中,电脑软件,前言最近在工作碰到一个问题,就是用javascript求数组中所有数字能拼接出的最大整数,数组的每一项为单独的拼接项,不能再拆开,例如[2,34]中2和34分别为要被拼接的数字,而不是说34还能继续拆分为3和4。具体需求…

怎么用PPT来制作海报用PPT来制作海

怎么用PPT来制作海报用PPT来制作海

步骤,教程,海报,电脑软件,PPT,  我们经常会看到各种炫酷的海报,告示着我们各种活动的召开时间和地点...如何制作一张属于自己的海报呢? 其实用PPT就能帮我们实现。下面小编来告诉你怎么做吧。▼▼▼了解更多PPT的操作技巧,欢迎点击▼▼▼※…

ppt标题怎么设置动画效果ppt标题设

ppt标题怎么设置动画效果ppt标题设

设置,动画效果,步骤,方法,标题,  在制作ppt时为了视觉效果和表达起来比较形象,我们会把ppt的标题和内容都设置动画效果。下面小编教你具体怎么做吧。ppt标题设置动画效果的步骤首先新建一个ppt输入你要输入的标题和内容或者打开一个已经完…