跳到主要内容

HTML Javascript脚本

使用 Javascript 为HTML页面添加动态效果和用户交互。

使用<script>​

HTML <script>元素用于定义客户端脚本 （Javascript）。

<script>元素要么包含javascript代码，要么通过src属性引用javascript文件。

包含javascript代码
<script>
    const btn = document.querySelector('#btn');
    btn.addEventListener('click', function () {
        alert('点击了按钮');
    }, false);
</script>

引用javascript文件
<script src="./script.js"></script>

  • 选择一个元素
    • document.getElementById() 通过ID选择元素，旧有方式
          <script>
              let navbar = document.getElementById('navbar');
          </script>
    • document.querySelector() 选择一个元素，通用方法，可以是class、id、tagname等，更现代的选择器
          <script>
              let navbar = document.querySelector('#navbar'); //ID选择器
              let h1 = document.querySelector('h1'); // 标签选择器
              let panel = document.querySelector('.panel'); // 类选择器
              let main = document.querySelector('div[class="main"]'); // 属性选择器
              // 更复杂的选择器
              let search = document.querySelector('div.navbar:not(.main) input[name="search"]'); 
          </script>
  • 选择多个元素
    • document.getElementsByTagName() 通过标签名称匹配，返回一个数组。
    • document.getElementsByName() 通过标签name属性匹配，返回一个数组。
    • document.getElementsByClassName() 通过类名称匹配，返回一个数组。
    • document.querySelectorAll() 选择多个元素， 用法与document.querySelector()一致，只是该方法返回一个包含元素的数组。

示例​

<html>
    <body>
        <button>改变文字</button>
        <button>获取时间</button>
        <p>Hello, World!</p>
        <script>
            let button = document.querySelector("button");
            let button2 = document.querySelector('button:nth-child(2)');
            button.addEventListener('click',()=>{
                document.querySelector('p').innerHTML = "你好，世界!";
            },false);
            button2.addEventListener('click',()=>{
                let date = new Date();
                document.querySelector('p').innerHTML = `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
            },false)
        </script>
    </body>
</html>

about:blank

<noscript>​

<noscript>元素定义备用内容。只有当浏览器禁用了Javascript脚本或浏览器不支持Javascript脚本的时候才会显示：

<script>
    let btn = document.querySelector('button');
</script>

<noscript>您的浏览器不支持或禁用了Javascript脚本，网站功能受限。建议取消禁用或者更换现代浏览器。<noscript>

HTML 参考​

名称描述