小白学前端化腐朽为神奇-JavaScript实现动态表单-操作DOM树（day03-1）
Posted 长安紫薯
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小白学前端化腐朽为神奇-JavaScript实现动态表单-操作DOM树（day03-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>
以上是关于小白学前端化腐朽为神奇-JavaScript实现动态表单-操作DOM树（day03-1）的主要内容，如果未能解决你的问题，请参考以下文章
小白学前端化腐朽为神奇-Bootstrap实现表单美化（day02-6）
小白学前端化腐朽为神奇-HTML+CSS3实现永和小票（day01-2）
小白学前端化腐朽为神奇-HTML+CSS3实现圆头像（day02-1）
小白学前端化腐朽为神奇-HTML+CSS3实现电影票（day01-3）