DOM对象

DOM

概念:Document Object Model，文档对象模型.
将标记语言的各个组成部分封装为对应的对象:
- Document:整个文档对象
- Element:元素对象
- Attribute:属性对象Text:文本对象
- Comment:注释对象

Element:元素对象

1. 获取Element元素对象

HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。
Document对象中提供了以下获取Element元素对象的函数:

根据id属性值获取，返回单个Element对象

 var h1 = document.getE1ementById( 'h1 ' ) ;

根据标签名称获取，返回Element对象数组

 var divs = document.getElementsByTagName( " div " );

根据name属性值获取，返回Element对象数组

 var hobbys = document.getElementsByName( " hobby ' );

根据class属性值获取，返回Element对象数组

 var clss = document.getElementsByclassName( 'cls ');

代码

  
<script>
 
    // 1.获取Element元素
    // 1.1获取元素 -根据id获取
    var img = document.getElementById('h1');
    alert(img);
 
    // 1.2获取元素-根据标签获取 -div
    var divs = document.getElementsByTagName('div');
    for (let i = 0; i < divs.length; i++) {
        alert(divs[i]);
    }
 
 
 
    // 1.3获取元素-根据name属性获取
    var ins = document.getElementsByName('hobby');
    for (let i = 0; i < ins.length; i++) {
        alert(ins[i]);
    }
 
    // 1.4获取元素-根据class属性获取
    var divs = document.getElementsByClassName('cls');
    for (let i = 0; i < divs.length; i++) {
        alert(divs[i]);
    }
 
 
</script>

2.查询参考手册、属性、方法

  
 
    // 2.查询参考手册，属性，方法
    var divs = document.getElementsByClassName('cls');
    //修改元素内容
    divs[0].innerHTML="烈烈";

DOM案例

  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM案例</title>
</head>
<body>
 
<img src="../../img/off.gif" id="h1" alt="这是一张图片">
<!--<img src="../../img/on.gif" id="h2" alt="这是一张图片">-->
<br>
<br>
<div class="cls">满汉全席</div>  <br>
<div class="cls">岑岑</div>  <br>
 
<input type="checkbox" name="hobby">电影
<input type="checkbox" name="hobby">旅游
<input type="checkbox" name="hobby">游戏
 
 
 
 
 
 
<script>
 
  //1.点亮灯泡：src属性值
  var img = document.getElementById('h1');
 
  img.src = "../../img/on.gif";
 
 
 
  // 2.将所有div标签的内容后面加上： very good(红色字体)
  var divs = document.getElementsByTagName('div');
  for (let i = 0; i < divs.length; i++) {
    const div= divs[i];
    div.innerHTML+="<font color=\"red\">very good</font>";
 
  }
 
 
  // 3.使所有的复选框呈现选中状态
  var ins = document.getElementsByName('hobby');
  for (let i = 0; i < ins.length; i++) {
    const check = ins[i];
    check.checked = true; //选中
  }
 
 
</script>
 
</body>
</html>

posted @ 2023-04-08 21:34 流浪猫老大阅读(29) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· BOM对象

· JSON对象

· DOM_概念和DOM_Document对象_获取Element方法

· DOM概述&Element对象获取与使用

· DOM概念和Document文档对象

公告

昵称：流浪猫老大
园龄： 1年11个月
粉丝： 0
关注： 1

+加关注

2025年3月

日

一

二

三

四

五

六

CenCen

DOM对象

DOM

Element:元素对象

1. 获取Element元素对象

2.查询参考手册、属性、方法

DOM案例

公告

搜索

常用链接

随笔分类

随笔档案

相册

阅读排行榜

推荐排行榜


	<script>

	// 1.获取Element元素
	// 1.1获取元素 -根据id获取
	var img = document.getElementById('h1');
	alert(img);

	// 1.2获取元素-根据标签获取 -div
	var divs = document.getElementsByTagName('div');
	for (let i = 0; i < divs.length; i++) {
	alert(divs[i]);
	}



	// 1.3获取元素-根据name属性获取
	var ins = document.getElementsByName('hobby');
	for (let i = 0; i < ins.length; i++) {
	alert(ins[i]);
	}

	// 1.4获取元素-根据class属性获取
	var divs = document.getElementsByClassName('cls');
	for (let i = 0; i < divs.length; i++) {
	alert(divs[i]);
	}


	</script>



	// 2.查询参考手册，属性，方法
	var divs = document.getElementsByClassName('cls');
	//修改元素内容
	divs[0].innerHTML="烈烈";


	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>DOM案例</title>
	</head>
	<body>

	<img src="../../img/off.gif" id="h1" alt="这是一张图片">
	<!--<img src="../../img/on.gif" id="h2" alt="这是一张图片">-->
	<br>
	<br>
	<div class="cls">满汉全席</div> <br>
	<div class="cls">岑岑</div> <br>

	<input type="checkbox" name="hobby">电影
	<input type="checkbox" name="hobby">旅游
	<input type="checkbox" name="hobby">游戏






	<script>

	//1.点亮灯泡：src属性值
	var img = document.getElementById('h1');

	img.src = "../../img/on.gif";



	// 2.将所有div标签的内容后面加上： very good(红色字体)
	var divs = document.getElementsByTagName('div');
	for (let i = 0; i < divs.length; i++) {
	const div= divs[i];
	div.innerHTML+="<font color=\"red\">very good</font>";

	}


	// 3.使所有的复选框呈现选中状态
	var ins = document.getElementsByName('hobby');
	for (let i = 0; i < ins.length; i++) {
	const check = ins[i];
	check.checked = true; //选中
	}


	</script>

	</body>
	</html>