javascript获取dom的下一个节点方法

利用javascript

写一个在页面点击加减按钮实现数字的累加。

简略的html大概如此。看得懂就好不要在意这些细节啊

<input

type="button"

value="+"

onclick="jia(this)"

/>

<label

class="num">0</label>

<input

type="button"

value="-"

onclick="jian(this)"

/>

样子是这样的

javascript

代码如下

<script

type="text/javascript">

function

jia(a)

{

var

nextnode

=

anextElementSibling;//获取下一个节点

alert(nextnodeinnerHTML);

var

a

=

parseInt(nextnodeinnerHTML)

a

+=

1;

nextnodeinnerHTML

=

a;

}

function

jian(a)

{

var

previousnode

=

apreviousElementSibling;

var

a

=

parseInt(previousnodeinnerHTML)

a

-=

1;

a

=

a

>

0

a

:

0;

previousnodeinnerHTML

=

a;

}

</script>

解释一下：

function

jian(a）和

function

jia(a)就是当前点击的对象了。在onclick事件接的方法里加了this;

-

nextElementSibling

获取当前节点的下一个节点(获得下一个兄弟节点)

-

previousElementSibling

获取当前节点的上一个节点

注意：

IE将跳过在节点之间产生的空格文档节点（如：换行字符），而Mozilla不会这样——FF会把诸如空格换行之类的排版元素视作节点读取，因此，在ie

中用nextSibling便可读取到的下一个节点元素，在FF中就需要这样写：nextElementSibling了。

上面的解释的意思的使用

nextElementSibling

和previousElementSibling

获得下一个兄弟节点和上一个兄弟节点，可以去掉换行，空格上面之类的，直接找到我们标签元素。但是下面的两个

nextSibling

previousSibling

也是得下一个兄弟节点和上一个兄弟节点的，只是在IE中好用

--------------------关键字解释

parseInt

转化功能。

a

=

a

>

0

a

:

0;----三元表达式。

用来获取内容区的大小

PS：返回了元素大小，但没有单位，默认单位是px，如果你强行设置了单位，比如100em

之类，它还是会返回px 的大小。(CSS 获取的话，是照着你设置的样式获取)。

1增加边框，无变化，为200；

2增加外边距，无变化，为200；

3增加滚动条，最终值等于原本大小减去滚动条的大小，为184；

4增加内边距，最终值等于原本大小加上内边距的大小，为220；

PS：返回了元素大小，默认单位是px。如果没有设置任何CSS 的宽和高度，他会得到

计算后的宽度和高度。

1增加边框，最终值会等于原本大小加上边框大小，为220；

2增加内边距，最终值会等于原本大小加上内边距大小，为220；

3增加外边据，无变化；

4增加滚动条，无变化，不会减小；

PS：返回了元素大小，默认单位是px。如果没有设置任何CSS 的宽和高度，它会得到

计算后的宽度和高度。

1增加边框，不同浏览器有不同解释：

a) Firefox 和Opera 浏览器会增加边框的大小，220 x 220

b) IE、Chrome 和Safari 浏览器会忽略边框大小，200 x 200

c) IE 浏览器只显示它本来内容的高度，200 x 18

2增加内边距，最终值会等于原本大小加上内边距大小，220 x 220，IE 为220 x 38

3增加滚动条，最终值会等于原本大小减去滚动条大小，184 x 184，IE 为184 x 18

4增加外边据，无变化。

5增加内容溢出，Firefox、Chrome 和IE 获取实际内容高度，Opera 比前三个浏览

器获取的高度偏小，Safari 比前三个浏览器获取的高度偏大。

先给你看下面两段代码：

<div id="div1">test!</div>

<script>

   consolelog(documentgetElementById("div1"));  //这个能够获得值

</script><script>

   consolelog(documentgetElementById("div1"));  //这个不能获得值！

</script>

<div id="div1">test!</div>

看出原因没有？当js代码是先于html运行时，是获取不到DOM元素的！因为这时候该DOM元素尚未加载到内存，相当于不存在！

要想实现js代码放到任何位置都能获得DOM元素，就要保证代码在页面完全加载完毕后才开始运行，比如：

<script>

   windowonload=function(){  //网页完全加载完毕才会触发这个事件

      consolelog(documentgetElementById("div1")); //这时候就能获得了

   }

</script>

<div id="div1">test!</div>

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：indexhtml。

2、在indexhtml中的<script>标签，输入js代码：

var a = '通过id获取：' + $('#test')html();

var b = '通过标签名获取：' + $('div')html();

$('body')append('<br/>' + a);

$('body')append('<br/>' + b);

3、浏览器运行indexhtml页面，此时成功通过id和标签名称获取到了节点并打印了节点内容。

在vue中可以通过给标签加ref属性，就可以在js中利用ref去引用它，从而 *** 作该dom元素。

以下是个例子：

Vue系列产品为3D自然环境的动画制作和渲染提供了一系列的解决方案。Vue系列有很多不同的产品，这是为了满足不同阶层的用户的需要:可以满足专业的制作工作室，同样也能满足3D自由艺术家。

参与项目：

《阿凡达》《2012》《赤壁》《斯巴达克斯》《死不瞑目》《尸城30夜》《功夫熊猫》《异形大战铁血战士》《微光城市》《神奇四侠》《致命拜访》《冒牌天神》《与王一夜》《老友与钱》《加勒比海盗》《ALAUID》《假结婚》《特种部队》《失落的大陆》《终结者》《坠入地狱》《Dragonball Evolution》《女同志吸血鬼杀手》《爱丽丝梦游仙境》《诸神之战》《驯龙记》《狼人》《闰年》《可爱的骨头》《魔法奇幻秀》《美少女特工队》《吉诺密欧与朱丽叶》《纳尼亚传奇》《猫头鹰王国》《歪小子斯科特》《卑鄙的我》《最后的风之子》《怪物史瑞克》《波斯王子》《饥饿游戏》《地心历险记》《雨果》《亚瑟圣诞》《丁丁历险记》《惊天战神》《超级8》《雷神》《大战外星人》《本杰明·巴顿奇事》《马达加斯加》《澳洲乱世情》《空中杀手》《夺宝奇兵》《奇幻精灵事件簿》

以上就是关于javascript获取dom的下一个节点方法全部的内容，包括:javascript获取dom的下一个节点方法、获取DOM节点的大小、javascript 如何获得html DOM节点的属性值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！