简单的DOM操作
通过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 事件会在页面或图像加载完成后立即发生。