JavaScript的DOM学习笔记——2、操作DOM元素

最新推荐文章于 2025-11-24 03:12:01 发布

原创最新推荐文章于 2025-11-24 03:12:01 发布 · 1.1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #学习 #笔记 #dom

H5 专栏收录该内容

46 篇文章

订阅专栏

大家好，我是阿赵。继续学习JavaScript的DOM。这次学习的是操作修改元素内容。

一、改变文本内容

1、不识别标签

语法：

对象.innerText

作用：修改对象的文字内容，将文字内容添加或者更新到任意的标签，只是显示纯文本，不解析标签。
例子：

<body>
  <div>box1</div>
  <button>点击</button>
  <script>
    let btn = document.querySelector('button');
    btn.onclick = function () {
      let div = document.querySelector('div');
      div.innerText = 'this is a box';
    }
  </script>
</body>

显示：
在这里插入图片描述

点击按钮后：
在这里插入图片描述

2、识别标签

语法：

对象.innerHTML

作用：将文本内容添加或者更新到标签，会解析标签。
例子：

<body>
  <div>box1</div>
  <button>点击</button>
  <script>
    let btn = document.querySelector('button');
    btn.onclick = function () {
      let div = document.querySelector('div');
      div.innerHTML = '<strong>this is a box</strong>';
    }
  </script>
</body>

显示：
在这里插入图片描述

这次点击完按钮后，由于内容加了strong标签，所以内容显示也会加粗。

二、改变常见属性

对象里面有很多的场景属性，比如href、title、src等。这些属性的修改方式比较同意，都是：

对象.属性=’值’

举例：

<body>
  <img src="img/arr105.png" alt=""><br />
  <a href="https://www.baidu.com">百度</a><br />
  <button>点击</button>
  <script>
    let btn = document.querySelector('button');
    btn.onclick = function () {
      let img = document.querySelector('img');
      img.src = 'img/azhao.png';
      img.width = '100';
      img.height = '100';
      img.title = 'azhao';
      let aObj = document.querySelector('a');
      aObj.href = 'https://www.google.com';
      aObj.innerText = '谷歌';
    }
  </script>
</body>

显示：
在这里插入图片描述

当点击按钮的时候：
在这里插入图片描述

图片已经换成了阿赵的头像，图片大小、标题也该了。然后下面的超链接本身是百度的，也已经改成了谷歌了。
这里需要注意的是，如果通过属性来改变图片的大小，那么传进去的值是不需要带单位的，默认就是像素，也不能加px。

三、改变样式属性

改变样式指的就是改变对象的stlye属性了。写法是：

对象.style.样式属性=’值’

举例：

<body>
  <img src="img/arr105.png" alt=""><br />
  <button>点击</button>
  <script>
    let btn = document.querySelector('button');
    btn.onclick = function () {
      let img = document.querySelector('img');
      img.src = 'img/azhao.png';
      img.style.width = '100px';
      img.style.height = '100px';
      img.style.borderRadius = '50%';
      img.style.border = '1px solid #000';
      img.style.margin = '10px';
      img.style.boxShadow = '0 0 10px #000';
      img.style.filter = 'grayscale(100%)';

    }
  </script>
</body>

点击之后：
在这里插入图片描述

可以看到图片的样式已经设置成功了。

四、类名的操作

1、通过className修改样式

例子：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .newImg {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 1px solid #000;
      margin: 10px;
      box-shadow: 0 0 10px #000;
      filter: grayscale(100%);
    }
  </style>
</head>


<body>
  <img src="img/azhao.png" alt=""><br />
  <button>点击</button>
  <script>
    let btn = document.querySelector('button');
    btn.onclick = function () {
      let img = document.querySelector('img');
      img.className = 'newImg';
    }
  </script>
</body>

说明：
在body里面有一个img标签，里面原来是没有指定类名的。然后在head的style里面写了一个newImg类的css样式。
在点击按钮的时候，给img设置了className为newImg，然后newImg的样式就在img对象上面生效了

2、通过classList修改样式

由于一个标签是可以指定多个类名的，所以除了直接修改className，还可以通过classList修改对象身上的类名列表。

1. 增加

语法：

对象.classList.add(‘类名’)

举例：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .newImg {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 1px solid #000;
      margin: 10px;
      box-shadow: 0 0 10px #000;
      filter: grayscale(100%);
    }
  </style>
</head>


<body>
  <img src="img/azhao.png" alt=""><br />
  <button>点击</button>
  <script>
    let btn = document.querySelector('button');
    btn.onclick = function () {
      let img = document.querySelector('img');
      img.classList.add('newImg');
    }
  </script>
</body>

在这里插入图片描述

可以看到，img已经增加了newImg类了，重复的点击添加，相同的类名也只会有一个。

2. 删除

语法：

对象.classList.remove(‘类名’)

举例：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .newImg {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 1px solid #000;
      margin: 10px;
      box-shadow: 0 0 10px #000;
      filter: grayscale(100%);
    }
  </style>
</head>


<body>
  <img class="newImg" src="img/azhao.png" alt=""><br />
  <button>点击</button>
  <script>
    let btn = document.querySelector('button');
    btn.onclick = function () {
      let img = document.querySelector('img');
      img.classList.remove('newImg');
    }
  </script>
</body>

在这里插入图片描述

点击之后，原来指定了的newImg类名就没有了，newImg指定的样式也没有了。

3. 切换

语法：

对象.classList.toggle(‘类名’)

举例：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .newImg {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 1px solid #000;
      margin: 10px;
      box-shadow: 0 0 10px #000;
      filter: grayscale(100%);
    }
  </style>
</head>


<body>
  <img src="img/azhao.png" alt=""><br />
  <button>点击</button>
  <script>
    let btn = document.querySelector('button');
    btn.onclick = function () {
      let img = document.querySelector('img');
      img.classList.toggle('newImg');
    }
  </script>
</body>

切换的特点是，如果本来有这个类名，就删掉，如果没有，就添加。所以这时候会看到在点击的过程中，img是来回的切换样式的。

五、表单操作

1.获取设置表单的值

语法：

表单对象.value = ‘值’

例子：

<body>
  <input type="text" value="hello" id="txt">
  <br>
  <button>点击</button>
  <script>
    let clickCount = 0;

    let btn = document.querySelector('button');
    btn.onclick = function () {
      let inputObj = document.querySelector('input');
      inputObj.value = `点击了${++clickCount}次`;
      console.log(inputObj.value);
      console.log(inputObj.innerHTML);
    }
  </script>
</body>

显示：
在这里插入图片描述

从结果可以看出，input是表单的元素之一，它的设置值不能用之前的innerText或者innerHTML来设置，而要用value来设置。同样的，打印这个表单元素的值，也只能用value，不能用innerHTML之类。

2. 设置表单格式

语法：

表单对象.type = ‘格式类型’

例子：

<body>
  <input type="text" value="hello" id="txt">
  <br>
  <button>点击</button>
  <script>
    let btn = document.querySelector('button');
    btn.onclick = function () {
      let inputObj = document.querySelector('input');
      inputObj.type = 'password';
    }
  </script>
</body>

效果：
在这里插入图片描述

点击之后，input的格式就变成了密码了。

六、自定义属性

除了对象规定的属性以外，我们也可以自己定义一些想要的属性，这些属性写在标签上面，以“data-”开头。然后在DOM对象上，需要用dataset来获取
比如：

<body>
  <div data-subName="我不是卧底">我是阿赵</div>
  <br>
  <button>点击</button>
  <script>
    let btn = document.querySelector('button');
    btn.onclick = function () {
      let div = document.querySelector('div');
      div.dataset.subName = '我是卧底';
      console.log(div.dataset.subName);
    }
  </script>
</body>