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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,807评论 0 8
  • vv 我发现现如今每个人都在渴望倾诉,渴望被理解,愿意倾听的却越来越少,其实,大家都在忙着爱自己。 物欲横流催化了...
    viviv阅读 518评论 2 1
  • 不怕不喜欢,怕再也不见。 其实,缘分断的早,只怕世界太大。 想你,不是爱情,不是世俗...
    殷殷囷囷阅读 245评论 0 1
  • 作者:好望角 每个人的生命历程都各不一样,拥有自己的特点与轨迹。但都像一条条河...
    东方辉阅读 674评论 0 3
  • 文/刘彩霞 手捧经书 心出般若 丈量世上最远的距离 是生死之间望尘莫及 还是你我 不能言说的期许 经书里有没有花儿...
    彩霞漫天阅读 493评论 3 1