【JS】浏览器中的JS和获取Dom元素***重点掌握 - PHP前端

首页 > 博客列表 > 【JS】浏览器中的JS和获取Dom元素***重点掌握

博主信息

博文 94

粉丝 0

访问量 111248

专题推荐

更多>

浏览器中的JS和获取Dom元素*重点掌握

1.浏览器中的JS

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>浏览器中的JS</title>
  </head>
  <body>
    <!--
        CSS 类型
        1. 行内样式：Style 属性，当前元素
        2. 文档样式：style 标签，当前文档
        3. 外部样式：link 标签，引用文档 
    -->
    <!--
        JS 类型
        1. 行内样式：事件属性，当前元素
        2. 文档样式：script 标签，当前文档
        3. 外部样式：script.src 属性，引用文档
    -->
    <!--1. 行内脚本：事件属性-->
    <button onclick="alert('登录成功！')">登录</button>
    <!--2. 文档脚本：script-->
    <script>
      document.body.style.backgroundColor = 'wheat';
    </script>
    <!--3.外部脚本：script.src-->
    <button onclick="like(this)">点赞+<span>100</span></button>
    <script src="js/func.js"></script>
    <!--
        外部JS相比内部JS，多了一个下载过程
        当执行JS时，HTML停止解析，为了防止卡住
        defer:下载与HTML解析同步，等页面完成后执行JS
        async:下载完成再执行，不等html解析完
        把JS写到文档最底部就是最安全的
    -->
  </body>
</html>

2.获取Dom元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>获取Dom元素</title>
  </head>
  <body>
    <ul class="list">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
      <li>item6</li>
    </ul>
    <script>
      // document.getElementById
      // document.getElementsByClassName
      // 以上过时了，用以下代码
      /**
       * * 1. 一组：querySelectorAll()
       * * 2. 一个：querySelector()
       * * 参数：CSS 选择器
       */
      // 1. querySelectorAll:集合
      const items = document.querySelectorAll('.list > *');
      console.log(items);
      //items是类数组（对象）
      items.forEach((item) => (item.style.color = 'red'));
      //第一个item => blue
      //items[0].style.color='blue'
      // 2. querySelector():集合中的第一个
      //匹配满足条件的集合的第一个元素，类似于 id
      const item = document.querySelector('.list > *')
      console.log(item)
      //以上两个API，也可以在元素上面调用
      const list = document.querySelector('.list')
      console.log(list)
      const lis = list.querySelectorAll('li')
      lis.forEach(li => (li.style.border='1px solid'))
    </script>
  </body>
</html>