javascript 操作HTML DOM元素:简单地说:就是对HTML中的DOM元素的节点操作。
DOM元素有以下三种常见的节点:
1. 元素节点;如:<html>、<body>、<p>、<div>等
2. 文本节点,即向用户展示的内容;如:<p>.... </p> 和<li>....</li>中展示的文本内容
3. 属性节点:元素的属性, 如<a href="http://www.baidu.com">百度</a> 中的链接 属性。
对DOM元素进行操作,首先得找到该元素对象。一般利用ID获取元素对象。
一、通过ID获取元素
语法:document.getElementById("id");
注:这种方法获取的是整个对象,而不能得到对象的具体内容是什么
<p id="con">JavaScript</p>
<script type="text/javascript">
var mychar= document.getElementById("con"); //获取元素存储在对象mychar中
document.write("结果:"+mychar); //输出获取的P标签。
</script>
结果运行图:
这里结果中第二行显示的内容就是说“p”是一个段落元素。
二、获取ID元素的具体内容
语法:对象.innerHTML
<p id="con">JavaScript</p>
<script type="text/javascript">
var mychar= document.getElementById("con"); //获取元素存储在对象mychar中
document.write("结果:"+mychar+"<br>"); //输出获取的P标签。
document.write("具体内容为:"+mychar.innerHTML); //输出获取p的内容
</script>
结果运行图:
还可以用该用法来改变元素内容:对象.innerHTML="修改后的内容";
三、改变DOM元素样式
获得元素对象后,就可以对元素进行改变样式的操作了。
语法:对象.style.property=value
基本属性表(property):
属性 | 说明 |
---|---|
backgroundColor | 元素的背景颜色 |
color | 文本颜色 |
diaplay | 显示(value值为block)与隐藏(value值为none) |
fongFamily | 字体样式 |
fongSize | 字体大小 |
height | 元素高度 |
weight | 元素宽度 |
样例代码:
<h2 id="con">I love JavaScript</H2>
<p> JavaScript基础知识</p>
<script type="text/javascript">
var mychar= document.getElementById("con");//对象mychar为h2
mychar.style.color="red";//h2字体颜色为红色
mychar.style.backgroundColor="green";//h2背景颜色为绿色
mychar.style.width="300px";//h2的宽度为300像素
</script>
结果运行图: