DOM操作指南-优快云博客

本文介绍DOM的基本概念及其在网页开发中的应用，包括元素选取、样式及文本操作等，并演示了如何利用DOM实现事件处理和功能封装。

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

DOM简介:

   //DOM - document object model 文档对象模型
    //其实dom的作用就是给了我们一些属性和方法，让我们可以操作页面中的标签
    
    //页面元素 ： 标签
    
复制代码

获取元素的第一种方式:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>今天天气不错</title>
  <script>
    //书写方式，驼峰命名法
    //传入一个字符串类型的id名即可
    //console.log(document.getElementById("box"));
    //发现获取结果为null，说明没有获取到对应的元素
    
    //入口函数：
    window.onload = function () {
      //作用：内部书写的所有代码，会在页面完全加载（结构，图片）后执行。
      console.log("这是入口函数中获取的标签");
      console.log(document.getElementById("box"));
    };
  </script>
</head>
<body>
<div id="box"></div>

<script>
  // 标签的获取方式：
  // 方式1：可以将js代码书写在body的最底部，可以保证所有的标签先进行加载。
  console.log(document.getElementById("box"));
  
  // 方式2：可以使用入口函数的形式(见head中的代码)

</script>
</body>
</html>
复制代码

样式操作:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>今天天气不错</title>
</head>
<body>

<div id="box"></div>

<script>
  //1 获取元素
  var box = document.getElementById("box");
  
  //2 样式操作
  //通过js设置的样式，在标签的行内生效
  
  //第一步需要先用标签.style，可以获取到这个标签的所有样式
  //console.log(box.style);
  //第二步是用标签.style.具体的样式名
  //设置的样式值为字符串类型，如果有单位，加单位
  box.style.width = "100px";
  box.style.height = "100px";
  //在css中加-的样式名，在js中使用时去除-，并且后面的首字母大写（驼峰命名法）
  //z-index  zIndex     font-size  fontSize
  box.style.backgroundColor = "red";


</script>
</body>
</html>
复制代码

文本操作:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>今天天气不错</title>
</head>
<body>

<div id="box">
  我是内容
  <p>我是p标签</p>
</div>
<script>
  var box = document.getElementById("box");
  //1 标签设置文本使用innerHTML属性
  //1.1 设置纯文本
  //box.innerHTML = "我是box的内容";
  //1.2 设置文本和标签
  //如果在设置的内容中含有标签的形式，innerHTML属性执行时会进行标签的生成
  box.innerHTML = "我是内容<p>我是子标签p</p>";
  
  //2 获取内容
  console.log(box.innerHTML);
  
  //覆盖的问题：
  //当我们使用innerHTML属性进行内容设置时，会对原内容进行覆盖
  //box.innerHTML = "我是新的内容";
  
  //解决的方式：
  //可以使用innerHTML+=的方式防止覆盖
  //box.innerHTML = box.innerHTML + "我是新的内容";
  box.innerHTML += "我是新的内容";//简化后
  //新的问题：虽然新旧内容同时存在，但是实际上内部的子标签新旧是不同的（重新生成，长得一样）。
</script>
</body>
</html>
复制代码

getElementsByTagName的基本使用:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>今天天气不错</title>
</head>
<body>

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

<script>
  //注意：我们在DOM中获取的所有数组形式的数据，均为伪数组形式
  
  //元素的获取方式2：根据标签名获取元素（可以同时操作多个标签）
  // 基本语法： document.getElementsByTagName("标签名");
  //var divs = document.getElementsByTagName("div");
  //console.log(divs);
  //我们发现，获取的结果调用数组方法报错，说明不支持数组方法，是伪数组。
arr= [1,2,4,5]
  arr.push();

  /*//需求：给每个div设置样式
  //1 遍历divs
  for (var i = 0; i < divs.length; i++) {
    //2 取出伪数组divs中的每个标签后才能进行样式操作
    divs[i].style.width = "100px";
    divs[i].style.height = "100px";
    divs[i].style.backgroundColor = "red";
    divs[i].style.marginBottom = "10px";
  }*/


</script>
</body>
</html>
复制代码

在某个标签内部根据标签名获取元素:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>今天天气不错</title>
</head>
<body>

<div id="box">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

<script>
  //getElementsByTagName前面的元素是可以更改的
  //如果使用 标签.getElementsByTagName() 表示在这个标签内部根据标签名获取元素
  var box = document.getElementById("box");
  var divs = box.getElementsByTagName("div");//只获取到了box内部的div
  
  //console.log(divs);
  for (var i = 0; i < divs.length; i++) {
    divs[i].style.width = "100px";
    divs[i].style.height = "100px";
    divs[i].style.backgroundColor = "red";
    divs[i].style.marginBottom = "10px";
  }


</script>
</body>
</html>
复制代码

其他需要注意的问题：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>今天天气不错</title>
</head>
<body>

<div id="box"></div>


<p></p>

<script>
  //1 根据id名,由于id名具有唯一性，获取的时候getElementById的前面的元素不能修改
  // document.getElementById()
  
  //2 由于id名的唯一性，所以浏览器允许不获取直接使用
  // 不是规范写法，不推荐使用
  //console.log(box);
  
  //3 我们也可以使用标签名的获取元素获取单一的一个元素
  //var text = document.getElementsByTagName("p");
  //console.log(text);
  ////注意，尽管获取的标签只有一个，结果依然是伪数组，需要取出内部的标签后再进行操作。
  ////text.style.width = "100px";
  //text[0].style.width = "100px";

  //简化方式：
  var text = document.getElementsByTagName("p")[0];


</script>

</body>
</html>
复制代码

隔行变色：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>今天天气不错</title>
</head>
<body>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<script>
  //1 获取元素
  var lis = document.getElementsByTagName("li");
  
  //2 遍历取出所有li
  for (var i = 0; i < lis.length; i++) {
    //lis[i] 是每个li
    //3 需要根据奇偶不同，设置不同背景色
    if (i % 2 == 0) {
      //i为偶数，lis[i]是奇数行
      lis[i].style.backgroundColor = "red";
    } else {
      //i为奇数，lis[i]是偶数行
      lis[i].style.backgroundColor = "blue";
    }
  }


</script>
</body>
</html>
复制代码

效果展示

常用功能的封装

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>今天天气不错</title>
</head>
<body>

<div id="box"></div>
<script>
  //为什么要封装函数功能?
  //1 方便代码的使用（写起来更方便）
  //2 增加代码的可读性
  
  //根据id名获取元素的封装：
  var box = id("box");
  
  /**
   * 根据id名获取元素
   * @param idName 传入字符串的id名
   * @returns {Element} 返回获取到的标签
   */
  function id(idName) {
    return document.getElementById(idName);
  }
  
  //样式设置操作的基本封装：
  //box.style.width = "100px";//原生的书写方式
  //    setCss(box, "width", "100px");//我们期望的使用方式
  //    setCss(box, "height", "100px");
  //    setCss(box, "backgroundColor", "red");
  
  function setCss(tag, styleName, styleValue) {
    //注意，styleName的值是用户传入的字符串，所以使用的时候需要使用[]的属性访问方式
    tag.style[styleName] = styleValue;
  }
  
  
  //同样的功能，在使用时需要多次调用，对性能的消耗较大
  //所以需要对setCss功能进行修改，使这个函数可以一次进行多个样式的设置
  //setCss(box, "width", "100px", "height", "100px");
  //我们发现，传入多个需要修改的样式时，参数个数不定，使用时不太方便
  //可以采用对象的传入方式
  
  setCss(box, {
    width: "150px",
    height: "150px",
    backgroundColor: "red"
  });
  
  function setCss(tag, obj) {
    //需要将用户设置的每一组数据取出，依次进行样式设置操作即可
    for (var k in obj) {
      //k - 属性名 - 字符串类型 - 也就是需要设置的样式名
      //obj[k] - 属性值 - 代表了要设置的样式值
      tag.style[k] = obj[k];
    }
  }
  
  //关于返回值问题的说明：
  //1 所有的设置操作不需要返回值。
  //2 所有的获取操作均需要返回值。


</script>
</body>
</html>
复制代码

事件

点击事件效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>今天天气不错</title>
</head>
<body>
<button id="btn">按钮</button>

<script>
  //点击按钮，弹出一个提示框，提示今天天气不错
  
  //事件源 - 按钮
  //事件类型 - 点击 - onclick
  //事件处理程序 - 弹出一个提示框，提示今天天气不错
  
  var btn = document.getElementById("btn");
  //事件源.事件类型 = function () {
  //事件处理程序
  //}
  btn.onclick = function () {
    alert("今天天气不错");
  };


</script>
</body>
</html>
复制代码

标签行内属性操作

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>今天天气不错</title>
</head>
<body>

<div id="box" title="呵呵"></div>

<script>
  //标签行内自带的属性
  //可以通过 标签.属性名 的方式进行访问
  var box = document.getElementById("box");
  //获取操作:
  console.log(box.id);
  //设置操作:
  box.id = "box3";
  console.log(box.title) // 呵呵

</script>

</body>
</html>
复制代码

图片切换

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>今天天气不错</title>
</head>
<body>
<button id="btn1">切换为图片2</button>
<button id="btn2">切换为图片1</button>
![](images/111.jpg)

<script>
  //1 获取元素
  var btn1 = document.getElementById("btn1");
  var btn2 = document.getElementById("btn2");
  var pic = document.getElementById("pic");
  
  //2 按钮1 点击后切换图片为222.jpg
  btn1.onclick = function () {
    pic.src = "images/222.jpg";
  };
  
  //3 按钮2 点击后切换为111.jpg
  btn2.onclick = function () {
    pic.src = "images/111.jpg";
  };


</script>
</body>
</html>
复制代码

DOM应用