使用JavaScript操作网页：选择、事件与样式修改-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_57860459/article/details/122215655

本文介绍了如何使用JavaScript与用户交互，包括通过querySelector和querySelectorAll选择元素，添加事件，以及操作网页内容、样式和属性。具体涉及innerText、innerHTML用于内容修改，style属性用于样式修改，以及获取和设置元素属性的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js可以用来跟用户进行交互, 具体就是用户发出一个动作, 我们根据需要用js去操作网页, 操作网页包括:

添加事件, 修改网页内容, 修改网页样式, 修改网页属性等

1.选择标签

querySelector(选择器) 选择一个元素节点对象
querySelectorAll(选择器) 选择多个元素节点对象

<!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>Document</title>
</head>
<body>
   <div id="app">box1</div>
   <div class="aa">box2</div>

   <ul>
      <li>1.xxx</li>
      <li>2.xxx</li>
      <li>3.xxx</li>
   </ul>

   <script>
      // 选择(获取)#pp节点对象,querySelector只能选择一个
      var $app = document.querySelector('#app');
      console.log('$app',$app);
      var $aa = document.querySelector('.aa')
      console.log('$aa',$aa);

      var $liList = document.querySelectorAll('ul>li');
      console.log('$liList',$liList);
   </script>
</body>
</html>

2.添加事件

<!-- 方式1 -->
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
</head>
<body>
   <button onclick="alert('哈哈哈')">按钮1</button> 
   <button onclick="say()">按钮2</button>

   <script>
      function say() {
         alert('我是老胡, 哈哈哈哈');
      }
   </script>
</body>
</html>

<!-- 方式2 -->
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
</head>
<body> 
   <button>按钮</button>

   <script>
      // 1. 获取dom节点对象
      var $btn = document.querySelector('button');
      // 2. 给dom节点对象添加onlcick属性
      $btn.onclick = function() {
         alert('我是老胡,哈哈哈哈');
      }
   </script>
</body>
</html>

<!-- 给所有li添加事件 -->
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
</head>
<body>   
   <ul>
      <li>xxxx</li>
      <li>xxxx</li>
      <li>xxxx</li>
      <li>xxxx</li>
      <li>xxxx</li>
   </ul>

   <script>  
      // 给所有li添加事件
       $liList[0].onclick = function() { alert('li'); } 
       $liList[1].onclick = function() { alert('li'); } 
       $liList[2].onclick = function() { alert('li'); } 
       $liList[3].onclick = function() { alert('li'); } 
       $liList[4].onclick = function() { alert('li'); } 
   </script>
</body>
</html>

3.操作网页

元素的内容
元素的样式
元素的属性

1)获取和修改元素内容

innerText 只能获取元素内的文本
innerHTML 获取元素内容包含了标签
给上面两个重新赋值可以修改其内容

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
</head>
<body>   
   <div class="box1">box1</div> 
   <div class="box2">
      <button>按钮</button>
      <span>啊啊啊</span>
   </div>
   <div class="box3"></div>

   <script>  
      var $box1 =document.querySelector('.box1');
      // 获取元素内容
      console.log($box1.innerText);

      // 获取元素内容
      var $box2 = document.querySelector('.box2');
      console.log($box2.innerText);
      console.log($box2.innerHTML);

      // 给元素添加内容
      var $box3 = document.querySelector('.box3');
      $box3.innerText = 'hello web'; // 会被下一句覆盖
      debugger;
      $box3.innerHTML = '<input/> <button>按钮</button>';
   </script>
</body>
</html>

2. 获取和修改元素样式

本文所讲例子仅限于行内样式

获取元素节点对象
获取节点样式
- dom对象.style.color // 获取颜色
- dom对象.style.fontSize // 获取字体大小

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
</head>
<body>   
   <div style="color:red;font-size:22px;">元素节点样式</div>  

   <script>  
      var $div = document.querySelector('div');
      console.log('颜色',$div.style.color);  
      console.log('字体大小', $div.style.fontSize);

      // 修改样式
      $div.style.color = 'yellow';
      $div.style.fontSize = '30px';
      $div.style.border = '1px solid red';
   </script>
</body>
</html>

3. 获取和修改元素属性

获取dom节点
获取元素属性: dom对象.属性名(注意: 获取类名是dom对象.className)
修改元素属性: dom对象.属性名 = '新的值';

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
</head>
<body>    

    <input id="inp1" type="text" name="username"> 
    <input id="inp2" type="checkbox">
    <a href="http://www.baidu.com">百度</a>

   <script>  
      var $inp1 = document.querySelector('#inp1');
      console.log('类型',$inp1.type);
      $inp1.type = 'password';

      var $inp2 = document.querySelector('#inp2');
      console.log('checked',$inp2.checked);
      $inp2.checked = true;

      var $a = document.querySelector('a');
      $a.href = 'http://sina.com';
      $a.innerText = '新浪';
   </script>
</body>
</html>