【小白学前端】化腐朽为神奇-JavaScript实现动态表单-操作DOM树（day03-1）

最新推荐文章于 2023-09-14 05:34:33 发布

长安紫薯

最新推荐文章于 2023-09-14 05:34:33 发布

阅读量158

点赞数

分类专栏： front-end 大前端文章标签： javascript 脚本语言 dom

本文链接：https://blog.csdn.net/nutony/article/details/116923014

版权

front-end 大前端专栏收录该内容

44 篇文章 1 订阅

订阅专栏

功能需求

根据JavaScript提供的DOM的api支持，我们来获取DOM上的内容

界面原型

在这里插入图片描述

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JavaScript脚本语言案例操作dom树</title>
	</head>
	<body>
		<h1 class="classh1" name="nameh1" id="idh1">JavaScript脚本语言之DOM树 api</h1>
		
		<div>
			<a href="http://www.taobao.com" target="_blank">淘宝</a>
			<a class="jd" href="http://www.jd.com" target="_blank">京东</a>
			<a name="pdd" href="http://www.pinduoduo.com" target="_blank">拼多多</a>
			<a id="cgb" href="http://act.codeboy.com" target="_blank">java培优</a>
		</div>
		
		<hr/>
		<div>
			<input type="button" value="网页标题" onclick="alert(document.title)"/>
			
			<input type="button" value="H1-tag" onclick="alert( document.getElementsByTagName('h1')[0].innerText )"/>
			<input type="button" value="H1-class" onclick="alert( document.getElementsByClassName('classh1')[0].innerText )"/>
			<input type="button" value="H1-name" onclick="alert( document.getElementsByName('nameh1')[0].innerText )"/>
			
			<input type="button" value="H1-id" onclick="alert( document.getElementById('idh1').innerText )"/>
		</div>
		
		<hr/>
		<div>
			<button onclick="alert( document.getElementsByTagName('a').length )">a标签的个数</button>
			
			<hr/>
			
			<button onclick="alert( document.getElementsByTagName('a')[0].href )">淘宝href</button>
			<button onclick="alert( document.getElementsByTagName('a')[0].innerText )">淘宝txt</button>
			
			<button onclick="alert( document.getElementsByClassName('jd')[0].href)">京东href</button>
			<button onclick="alert( document.getElementsByClassName('jd')[0].innerText)">京东txt</button>
			
			<button onclick="alert( document.getElementsByName('pdd')[0].href )">拼多多href</button>
			<button onclick="alert( document.getElementsByName('pdd')[0].innerText )">拼多多txt</button>
			
			<button onclick="alert( document.getElementById('cgb').href )">java培优href</button>
			<button onclick="alert( document.getElementById('cgb').innerText )">java培优txt</button>
		</div>
	</body>
</html>