JavaScript语法基础之DOM基础

发布于：2024-08-22 ⋅ 阅读:(81) ⋅ 点赞:(0)

目录

1. DOM 基础

1.1. DOM 是什么？

1.1.1. DOM 对象

1.1.2. DOM 结构

1.2. 节点类型

1.3. 获取元素

1.3.1. getElementById()

1.3.2. getElementsByTagName()

1.3.3. getElementsByClassName()

1.3.4. getElementsByName()

1.4.如何去操作对象

修改属性（css）

1.5.如何动态的创建对象

1. DOM 基础

1.1. DOM 是什么？

1.1.1. DOM 对象

  • DOM全称Document Object Model（文档对象模型），它是由 W3C 定义的一个标准。
  • 我们有时候遇到鼠标移到某个元素上面时就改变颜色，或者动态添加元素或者删除元素等，其实这些效果就是通过DOM提供的方法来实现的。
  • 简单来说，DOM 里面有很多方法，我们通过它提供的方法来操作一个页面中的某个元素，例如：改变这个元素的颜色、点击这个元素实现某些效果、直接把这个元素删除等。
  • 一句话总结就是：DOM 操作，可以简单理解成“元素操作”。

1.1.2. DOM 结构

  • DOM采用的是树形结构，用树节点形式来表示页面中的每一个元素，我们先看下面一个例子：
  • <!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
<body>
    <h1>Gok</h1>
    <ui>
        <li>Gok是一个……</li>
        <li>Gok成立于……</li>
</body>
</html>
  • 对于上面这个 HTML 文档，DOM 会将其解析为如下图所示的树形结构。

  • 是不是很像一棵树呢？其实，这也叫做DOM 树。在这棵树上html 元素是树根，也叫根元素。
  • 接下来深入一层，我们发现有 head 和 body 这两个分支，它们位于同一层次上，并且有着共同的父节点（即 html），所以它们是兄弟节点。
  • head 有 2 个子节点：title、meta（这两个是兄弟节点）。
  • body 有 3 个子节点：h1、p、p。
  • 利用这种简单的家谱关系我们可以把各节点之间的关系清晰地表达出来。
  • 那么为什么要把一个HTML页面用树形结构表示呢？这也是为了更好地给每一个元素进行定位，以便让我们找到想要的元素。
  • 每一个元素就是一个节点，而每一个节点就是一个对象。
  • 也就是说，我们在操作元素时，其实就是把这个元素看成一个对象，然后使用这个对象的属性和方法来进行相关操作（这句话对理解 DOM 操作太重要了）。

1.2. 节点类型

  • 在 JavaScript 中，节点也是分为很多类型的。
  • DOM 节点共有12种类型，不过常见的只有 3 种（其他的不用管）。
    • 元素节点(标签)
    • 属性节点（属性名）
    • 文本节点（文本）
  • 很多人看到下面这句代码，就认为只有一个节点，因为只有 div 这一个元素嘛。
  • 实际上，这里有 3 个节点：
<div id="wrapper">Gok</div>

1.3. 获取元素

获取元素，准确来说，就是获取元素节点（注意不是属性节点或文本节点）。

对于一个页面，我们想要对某个元素进行操作，就必须通过一定的方式来获取该元素。只有获取到了，才能对其进行相应的操作。

咦，这不跟 CSS 选择器相似吗？只不过选择器是 CSS 的操作方式，而 JavaScript 却有着属于自己的另一套方法。

在 JavaScript 中，我们可以通过以下 6 种方式来获取指定元素：

    • getElementById()
    • getElementsByTagName()
    • getElementsByClassName()
    • getElementsByName()
    • querySelector()、querySelectorAll()
    • document.title、document.body
  • 上面每一种方法都非常重要，我们要一个个地认真学透。
  • 请注意，JavaScript 是严格区分大小写的，所以在书写的时候，就不要把这些方法写错了。

1.3.1. getElementById()

  • 在 JavaScript 中，如果想通过 id 来选中元素，我们可以使用 getElementById() 来实现。
  • getElementById 这个方法的名字看似很复杂，其实根据英文来理解就很容易了，也就是get element by id（通过 id 来获取元素）的意思。
  • 实际上，getElementById() 类似于 CSS 中的 id 选择器，只不过 getElementById() 是 JavaScript 的操作方式。
  • 语法：
document.getElementById("id名")
  • 举例：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
      window.onload = function () {
        var oDiv = document.getElementById("div1");
        oDiv.innertext = " ";
          oDiv.innerhtml = "imag";
      };
    </script>
  </head>
  <body>
    <div id="div1" style="color:pink"></div>
  </body>
</html>
  • 这个例子的 JavaScript 代码在HTML代码的上面，如果没有 window.onload，浏览器解析到 document.getElementById("div1") 就会报错，因为它不知道id为"div1"的元素究竟是哪位兄弟。
  • 因此我们必须使用 window.onload，使得浏览器把整个页面解析完了再去解析window.onload内部的代码，这样就不会报错了。

1.3.2. getElementsByTagName()

  • 在JavaScript中，如果想通过标签名来选中元素，我们可以使用 getElementsByTagName() 方法来实现。
  • 同样，getElementsByTagName()类似于 CSS 中的元素选择器。
  • 语法：
document. getElementsByTagName("标签名")
  • 举例：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
      window.onload = function () {
        var oUl = document.getElementById("list");
        var oLi = oUl.getElementsByTagName("li");
        oLi[2].style.color = "red";
      };
    </script>
  </head>
  <body>
    <ul id="list">
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>jQuery</li>
      <li>Vue.js</li>
    </ul>
  </body>
</html>

1.3.3. getElementsByClassName()

  • 在 JavaScript 中，如果想通过 class 来选中元素，我们可以使用 getElementsByClassName() 方法来实现。
  • 同样，getElementsByClassName() 类似于 CSS 中的 class 选择器。
  • 语法：
document. getElementsByClassName("类名")
  • 举例：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
      window.onload = function () {
        var oLi = document.getElementsByClassName("select");
        oLi[0].style.color = "red";
      };
    </script>
  </head>
  <body>
    <ul id="list">
      <li>HTML</li>
      <li>CSS</li>
      <li class="select">JavaScript</li>
      <li class="select">jQuery</li>
      <li class="select">Vue.js</li>
    </ul>
  </body>
</html>

1.3.4. getElementsByName()

  • 对于表单元素来说，它有一个一般元素都没有的 name 属性。如果想要通过 name 属性来获取表单元素，我们可以使用 getElementsByName() 方法来实现。
  • 语法：
document.getElementsByName("name名")
  • 举例：单选按钮
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
      window.onload = function () {
        var oInput = document.getElementsByName("status");
        oInput[2].checked = true;
      };
    </script>
  </head>
  <body>
    你的最高学历:
    <label><input type="radio" name="status" value="本科" />本科</label>
    <label><input type="radio" name="status" value="硕士" />硕士</label>
    <label><input type="radio" name="status" value="博士" />博士</label>
  </body>
</html>
  • 举例：复选框
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
      window.onload = function () {
        var oInput = document.getElementsByName("fruit");
        for (var i = 0; i < oInput.length; i++) {
          oInput[i].checked = true;
        }
      };
    </script>
  </head>
  <body>
    你喜欢的水果:
    <label><input id =1 type="checkbox" name="fruit" value="苹果" />苹果</label>
    <label><input type="checkbox" name="fruit" value="香蕉" />香蕉</label>
    <label><input type="checkbox" name="fruit" value="西瓜" />西瓜</label>
  </body>
</html>

1.4.如何去操作对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作DOM对象</title>
</head>
<body>
<div class="container">程咬金</div> 						==》container
<input type="text" name="userName" value="程咬金">			==》userName
<br/>
<button id="change">修改</button>							==》change
</body>
<script>
    // 1. 找对象
    var container = document.getElementsByClassName("container")[0];
    var change = document.getElementById("change");
    var userName = document.getElementsByName("userName")[0];
    // 2. 操作对象
    change.onclick = function () {
    // 改变纯文本
        container.innerText = "苏烈";
    // 修改超文本
        container.innerHTML = "<h1 style='color: red'>苏烈</h1>";
    // 修改value属性
        userName.value = "牛魔";
    }
</script>
</html>
修改属性（css）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作DOM对象</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: blue;
            border-radius: 200px;
        }
    </style>
</head>
<body>
<div class="box"></div>
<br>
<button id="change">修改</button>
</body>
<script>
    // 1. 找对象
    var box = document.getElementsByClassName("box")[0];
    var change = document.getElementById("change");
    // 2. 操作对象
    change.onclick = function () {
        box.style.backgroundColor = "green";
        box.style.width = "200px";
        box.style.height = "50px";
    }
</script>
</html>

1.5.如何动态的创建对象

// 动态创建元素
document.createElement("标签名字");
// 追加元素： 父级追加子级
父级对象.append(子级对象);
// 获取父级对象
子级对象.parentNode;
// 删除对象
dom对象.remove();

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM对象的动态创建</title>
    <style>
        tr{
            text-align: center;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="box">
    <label>姓名:</label> <input type="text" value="嬴政" name="userName">
    <br>
    <br>
    <label>年龄:</label> <input type="number" value="45" name="userAge">
    <br>
    <br>
    <label>性别:</label>
    <input type="radio" name="userGender" value="男" checked> 男
    <input type="radio" name="userGender" value="女"> 女
    <br>
    <br>
    <input type="submit" id="add" value="添加">
</div>
<br>
<table style="width:500px ;border:1px"  id="data-table">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
</table>
<script>
    // 找对象
    var dataTable = document.getElementById("data-table");
    var userName = document.getElementsByName("userName")[0];
    var userAge = document.getElementsByName("userAge")[0];
    var userGenders = document.getElementsByName("userGender");
    var add = document.getElementById("add");
    // 操作对象
    add.onclick = function () {
// 获取值
        var userNameValue = userName.value;
        var userAgeValue = userAge.value;
// 获取性别的值
        var userGenderValue = userGenders[0].checked ? "男" : "女";
// 动态创建标签
// 创建行
        var tr = document.createElement("tr");
// 创建列
        var userNameTd = document.createElement("td");
        userNameTd.innerText = userNameValue;
// 给TD绑定双击事件
        userNameTd.ondblclick = function () {
// 先获取文本值
            var value = this.innerText;
// 清除文本
            this.innerText = "";
// 动态创建input输入框
            var input = document.createElement("input");
            input.value = value;
// 给input绑定失去焦点的事件
            input.onblur = function () {
                userNameTd.innerText = this.value;
            };
            this.append(input);
        };
        var userAgeTd = document.createElement("td");
        userAgeTd.innerText = userAgeValue;
        var userGenderTd = document.createElement("td");
        userGenderTd.innerText = userGenderValue;
        var doTd = document.createElement("td");
// 动态创建一个删除按钮
        var delBtn = document.createElement("button");
        delBtn.innerText = "删除";
// 给删除按钮绑定事件
        delBtn.onclick = function(){
// 删除的逻辑
            var delTr = this.parentNode.parentNode;
// 删除
            delTr.remove();
        };
// 将删除按钮追加到doTd中
        doTd.append(delBtn);
// 将td 追加到 tr
        tr.append(userNameTd);
        tr.append(userAgeTd);
        tr.append(userGenderTd);
        tr.append(doTd);
// 将 tr 追加到 table
        dataTable.append(tr);
    }
</script>
</body>
</html>

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布