简单的DOM操作

2016-10-05  本文已影响3人  盗花

通过ID获取元素

document.getElementById("id")

获取的元素是一个对象,如想对元素进行操作,要使用它的属性或方法。
注意:
以上script代码最好放在包含“id”的html代码后面,否则获得的元素为null。

获得元素对象后,可使用以下方法:
1.innerHTML 属性

Object.innerHTML

innerHTML 属性用于获取或替换 HTML 元素的内容。
注意:
1)Object是获取的元素对象,如通过document.getElementById("ID")获取的元素。
2)注意书写,innerHTML区分大小写。

2.改变 HTML 样式

Object.style.property=new style

示例:

<p id="pcon">Hello World!</p>
<script>
   var mychar = document.getElementById("pcon");
   mychar.style.color="red";
   mychar.style.fontSize="20";
   mychar.style.backgroundColor ="blue";
</script>

3.显示和隐藏
网页中经常会看到显示和隐藏的效果,可通过display属性来设置。

Object.style.display=value

value的值可以为none或者block或者inline.

4.控制类名(className 属性
className 属性设置或返回元素的class 属性,为网页内的某个元素指定一个css样式来更改该元素的外观。

object.className = classname

JavaScript代码在网页中放置位置的影响

同样的代码oTab = document.getElementById("tabs"),若存放于网页开头的<head>中,则oTab的值为null,若存放于网页<body>的末尾位置,则oTab就能够获取到id为tabs的元素。原因是整个html网页按顺序加载,先加载<head>中的内容,因此此时存放在<head>中的javascript代码先执行,但是获取不到元素。
一个解决办法是将<head>中的javascript代码整体放入window.onload事件中。onload 事件会在页面或图像加载完成后立即发生。

上一篇下一篇

猜你喜欢

热点阅读