javascript操作DOM元素

最新推荐文章于 2024-04-30 16:57:21 发布

huiting_liu

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量271

点赞数

文章标签： javascript html dom

本文链接：https://blog.csdn.net/huiting_liu/article/details/53575535

版权

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>