javascript 如何获得html DOM节点的属性值

JavaScript016

javascript 如何获得html DOM节点的属性值,第1张

先给你看下面两段代码:

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

<script>

   console.log(document.getElementById("div1"))  //这个能够获得值

</script> <script>

   console.log(document.getElementById("div1"))  //这个不能获得值!

</script>

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

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

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

<script>

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

      console.log(document.getElementById("div1")) //这时候就能获得了

   }

</script>

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

您好,HTML5规范文档中指出:如果一个元素符合下面两条规则中的任一条,则window对象中必须要有与之对应的一个属性,属性值就是这个对象.

如果一个元素拥有ID属性,那么ID属性的属性值就会成为window对象的属性名.

如果一个元素拥有name属性,那么name属性的属性值就会成为window对象的属性名.但这个元素的标签名必须是: a, applet, area, embed, form, frame, frameset, iframe, img, object,其中的一个。

>"foo" in window

false

>typeof foo // 这个全局变量到底有木有?

object

//错误控制台输出了下面的警告.//Element referenced by ID/NAME in the global scope.

//Use W3C standard document.getElementById() instead.

>foo

[object HTMLDivElement]

//错误控制台输出了下面的警告.//Element referenced by ID/NAME in the global scope.

//Use W3C standard document.getElementById() instead.>"foo" in window true

利用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

=

a.nextElementSibling//获取下一个节点

alert(nextnode.innerHTML)

var

a

=

parseInt(nextnode.innerHTML)

a

+=

1

nextnode.innerHTML

=

a

}

function

jian(a)

{

var

previousnode

=

a.previousElementSibling

var

a

=

parseInt(previousnode.innerHTML)

a

-=

1

a

=

a

>

0

?

a

:

0

previousnode.innerHTML

=

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----三元表达式。