您的位置：首页 > Web前端 > JavaScript

JavaScript学习笔记之通过DOM操作html

2016-09-10 11:51 726 查看

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<!-- 1、DOM 改变 HTML 输出流： -->
<p>Hello</p>
<button onclick="Test()">按钮</button>    <!-- 给<button>标签添加一个按钮点击事件(Test()). -->
<script>
function Test() {
document.write("World");         // 当按钮点击事件触发时，DOM会覆盖HTML输出流，即页面上会输出World，
// 覆盖掉<p>标签中的 Hello。
}
</script>

<!-- 2、寻找元素，改变html内容： -->
<p id="pid">我是标题</p>
<button onclick="Demo()">按钮</button><br /><br />
<script>
function Demo() {
var id = document.getElementById("pid");         // 通过 id 找到 p元素；
id.innerHTML = "我是新的标题";                    // 改变 p元素 的值；
}
</script>

<!-- 3、寻找元素，修改 html元素的属性： -->
<a id="aid" href="http://www.baidu.com">超链接</a><br />
<button onclick="ChangeHref()">按钮</button><br /><br />

<img src="1.jpg" id="iid" /><br />
<button onclick="ChangeSrc()">按钮</button><br /><br />

<script>
function ChangeHref() {
var id = document.getElementById("aid");    // 通过id获取html元素；
id.href = "https://zj.nuomi.com/";          // 修改a标签的href属性；
alert("a标签的属性以改变！");
}

function ChangeSrc() {
var id = document.getElementById("iid");
id.src = "2.jpg";
alert("img标签的属性以改变！");
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航