JavaScript学习笔记9: 对象-DOM

JavaScript对象-DOM

当html标签被浏览器解析后, 会被分别封装成Document, Element, Attribute, Text, Comment五个对象

获取Element元素对象的函数

html

 <html>
<body>
    <img src="img/1.png" id="h1"> <br><br>
 
    <div class="cls">1</div> <br>
    <div class="cls">2</div> <br>
 
    <input type="checkbox" name="hobby"> a
    <input type="checkbox" name="hobby"> b
    <input type="checkbox" name="hobby"> c
</body>
</html>

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

 <script>
    //object HTMLImageElement
    var img = document.getElementById('h1');
</script>

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

 <script>
    //object HTMLCollection
    var divs = document.getElementsByTagName('div');
</script>

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

 <script>
    var names = document.getElementsByName('hobby');
</script>

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

 <script>
    var classes = document.getElementsByClassName('cls');
</script>

通过修改Element元素的属性，改变CSS样式

 <script>
    //将id为'tb1'的元素的style中的color属性修改为red
   document.getElementById('tb1').style.color="red"
</script>

posted @ 2024-03-20 00:17 HIK4RU44 阅读(3) 评论(0) 编辑收藏举报

刷新页面返回顶部

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

相关博文：

· JavaScript学习笔记8: 对象-BOM

· JavaScript学习笔记7: 对象 - 自定义对象&JSON

· JavaScript DOM

· js学习 -2024/10/9

· DOM对象

公告

昵称： HIK4RU44
园龄： 1年1个月
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

HIK4RU44

JavaScript学习笔记9: 对象-DOM

JavaScript对象-DOM

获取Element元素对象的函数

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

推荐排行榜

	<html>
	<body>
	<img src="img/1.png" id="h1"> <br><br>

	<div class="cls">1</div> <br>
	<div class="cls">2</div> <br>

	<input type="checkbox" name="hobby"> a
	<input type="checkbox" name="hobby"> b
	<input type="checkbox" name="hobby"> c
	</body>
	</html>

	<script>
	//object HTMLImageElement
	var img = document.getElementById('h1');
	</script>

	<script>
	//object HTMLCollection
	var divs = document.getElementsByTagName('div');
	</script>

	<script>
	var names = document.getElementsByName('hobby');
	</script>

	<script>
	var classes = document.getElementsByClassName('cls');
	</script>

	<script>
	//将id为'tb1'的元素的style中的color属性修改为red
	document.getElementById('tb1').style.color="red"
	</script>