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

来源：互联网发布：数据分析报告怎么做编辑：程序博客网时间：2024/05/16 15:35
<!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>
0 0