先给你看下面两段代码:
<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----三元表达式。