<html> <body> <h1>My First Web Page</h1> <p id="demo">A Paragraph.</p> <button type="button" onclick="myFunction()">点击这里</button> <script> function myFunction() { document.getElementById("demo").innerHTML="My First JavaScript Function"; } </script> </body> </html>
js 查找 HTML 元素
- 1通过 id 找到 HTML 元素
- 2通过标签名找到 HTML 元素
- 3通过类名找到 HTML 元素
1：通过 id 找到 HTML 元素
<html> <body> <p id="intro">Hello World!</p> <p>本例演示 <b>getElementById</b> 方法！</p> <script> x=document.getElementById("intro"); document.write('<p>id="intro" 的段落中的文本是：' + x.innerHTML + '</p>'); </script> </body> </html>
2：通过标签名找到 HTML 元素
<html> <body> <p>Hello World!</p> <div id="main"> <p>The DOM is very useful.</p> <p>本例演示 <b>getElementsByTagName</b> 方法。</p> </div> <script> var x=document.getElementById("main"); var y=x.getElementsByTagName("p"); document.write('id 为 "main" 的 div 中的第一段文本是：' + y[0].innerHTML); </script> </body> </html>
js被引入html网页中的方式：
1html的head和body中的引用：
<html> <body> <h1>My First Web Page</h1> <p id="demo">A Paragraph.</p> <button type="button" onclick="myFunction()">点击这里</button> <script> function myFunction() { document.getElementById("demo").innerHTML="My First JavaScript Function"; } </script> </body> </html>
2:html外部引用：
<html> <body> <h1>My Web Page</h1> <p id="demo">A Paragraph.</p> <button type="button" onclick="myFunction()">点击这里</button> <p><b>注释：</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p> <script type="text/javascript" src="/js/myScript.js"></script> </body> </html>