javaScript之DOM操作（一）

最新推荐文章于 2025-08-12 06:02:38 发布

琦琦安卓进阶

最新推荐文章于 2025-08-12 06:02:38 发布

阅读量467

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： dom html 文档 javascript

本文链接：https://blog.youkuaiyun.com/qq_28695619/article/details/54336836

javascript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了DOM的基本概念及其在HTML文档中的应用。详细讲述了如何通过ID获取元素、使用innerHTML属性获取和替换内容、改变HTML样式、控制元素显示与隐藏及类名等关键操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在我们就开始认识什么是DOM？

DOM-文档对象模型（Document Object Moel）,定义访问和处理HTML文档的标准方法。

DOM将HTML文档呈现为带有元素，属性和文本的树结构（节点树）

HTML文档由以下三种节点构成

1.元素节点:<html><head><body><p>等都是元素节点，即标签；

2.属性节点:元素属性，<input>标签的type属性可以是button，text等；

3.文本节点:向用户展示的内容，如<li>...<li>中的JavaScript,DOM,CSS等文本；

例子

<div id="" class="">Hello</div>//<div>是元素节点，id，class是属性节点，Hello是文本节点

1.通过ID获取元素

标签的id属性值是唯一的，我们可以通过id找到指定的标签再对其操作

语法:

document.getElementById(“id”) ;

key:这里获取的元素是一个对象，如果要对元素进行操作必须通过他的属性和方法。

2.innerHTML属性-用于获取和替换HTML元素的内容

语法:Object.innerHTML

key:innerHTML区分大小写

  var mychar=  document.getElementById("test").innerHTML;
  document.write("结果:"+mychar); //输出获取的id名为test的内容（文本节点）

3.改变 HTML 样式

语法:Object.style.property = new style;

例子如下

 var mychar= document.getElementById("test");
    mychar.style.color = "white";
    mychar.style.fontSize = "20px";
    mychar.style.backgroundColor='#ccc';
    mychar.style.width="300px"

在这里介绍一点基本属性，只包括一小部分CSS样式属性，其他样式也可以通过该方法进行设置和修改

属性描述

font 在一行设置所有字体属性

fontSize 字体大小

fontFamily 字体系列

color 字体颜色

width 元素宽度

height 元素高度

backgroundColor 元素背景颜色

这个例子是动态改变字体的大小

<div style="width:200px;height:120px;" id="test">测试改变字体大小</div>  
    <input name="" type="button" onclick="document.getElementById('test').style.fontSize='20px';" value="big"/>  
    <input name="" type="button" onclick="document.getElementById('test').style.fontSize='16px';" value="medium"/>  
    <input name="" type="button" onclick="document.getElementById('test').style.fontSize='12px';" value="small"/>

key:更改属性的时候记得带上单位px，注意css样式属性的驼峰命名法

4.显示和隐藏（display属性)

语法:Object.style.display = value

value取值:

none 此元素不会被现实

block 此元素被显示为块级元素

key:使用的时候记得带上双引号

5.控制类名（className 属性)-设置或返回元素的class属性

语法:Object.className = classname

作用:1.获取元素的class属性

2.为网页内的某一个元素指定一个css样式来更改该元素的外观

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>className属性</title>
<style>
    body{ font-size:16px;}
    .one{ border:1px solid #eee;
	  width:230px;
	  height:50px;
	  background:#ccc;
	  color:red;}
	.two{  border:1px solid #ccc;
	       width:230px;
	       height:50px;
	       background:#9CF;
	       color:blue;}
</style>
</head>
<body>
    <p id="p1" > 为网页内的某一元素指定一个css样式</p>
    <input type="button" value="添加样式" onclick="add()"/>
	<p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    <input type="button" value="更改外观" onclick="modify()"/>
	<script type="text/javascript">
	   function add(){
	      var p1 = document.getElementById("p1");
	      p1.className="one";
   	   }
	   function modify(){
	      var p2 = document.getElementById("p2");
	      p2.className="two";
	   }
	</script>
</body>
</html>

这是一个综合性的小例子

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<title>javascript</title>
<style type="text/css">
body{font-size:12px;}
#txt{
    height:400px;
    width:600px;
    border:#333 solid 1px;
    padding:5px;}
p{  line-height:18px;
    text-indent:2em;}
</style>
</head>
<body>
  <h2 id="con">JavaScript课程</H2>
  <div id="txt"> 
     <h5>JavaScript学习</h5>
  	<p>1. JavaScript入门</p>
        <p>2. JavaScript进阶，掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>
        <p>3. 深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>
  </div>
<form>
  <!--当点击相应按钮，执行相应操作，为按钮添加相应事件-->
    <input type="button" value="改变颜色" onclick="changeColor()">  
    <input type="button" value="改变宽高" onclick='changeWandH()'>
    <input type="button" value="隐藏内容" onclick="hideContent()">
    <input type="button" value="显示内容" onclick="displayContent()">
    <input type="button" value="取消设置" onclick="cancelSetting()">
  </form>
  <script type="text/javascript">
  	var txt = document.getElementById('txt');
	//定义"改变颜色"的函数
    function changeColor(){
        txt.style.color="#ff0000";
      	txt.style.backgroundColor='#124512';
    }
	//定义"改变宽高"的函数
    function changeWandH(){
        txt.style.width="200px";
        txt.style.height="300px";
    }
	//定义"显示内容"的函数
    function displayContent(){
         txt.style.display="block"
    }
	//定义"隐藏内容"的函数
    function hideContent(){
        txt.style.display="none"
    }
	//定义"取消设置"的函数
    function cancelSetting(){
        if(confirm("确定取消设置？")){
            txt.removeAttribute('style');
        }
    }
</script>
</body>
</html>