和我一起入 JavaScript

作者：楠羽

2022 年 9 月 15 日
福建
本文字数：4213 字
阅读完需：约 14 分钟

3、JavaScript DOM

3.1、DOM 介绍

DOM(Document Object Model)：文档对象模型。
将 HTML 文档的各个组成部分，封装为对象。借助这些对象，可以对 HTML 文档进行增删改查的动态操作。

3.2、Element 元素的获取操作

具体方法
代码实现

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>元素的获取</title></head><body>    <div id="div1">div1</div>    <div id="div2">div2</div>    <div class="cls">div3</div>    <div class="cls">div4</div>    <input type="text" name="username"/></body><script>    //1. getElementById()   根据id属性值获取元素对象    let div1 = document.getElementById("div1");    //alert(div1);
    //2. getElementsByTagName()   根据元素名称获取元素对象们，返回数组    let divs = document.getElementsByTagName("div");    //alert(divs.length);
    //3. getElementsByClassName()  根据class属性值获取元素对象们，返回数组    let cls = document.getElementsByClassName("cls");    //alert(cls.length);
    //4. getElementsByName()   根据name属性值获取元素对象们，返回数组    let username = document.getElementsByName("username");    //alert(username.length);
    //5. 子元素对象.parentElement属性   获取当前元素的父元素    let body = div1.parentElement;    alert(body);</script></html>

复制代码

3.3、Element 元素的增删改操作

具体方法
代码实现

  <!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <meta name="viewport" content="width=device-width, initial-scale=1.0">      <title>元素的增删改</title>  </head>  <body>      <select id="s">          <option>---请选择---</option>          <option>北京</option>          <option>上海</option>          <option>广州</option>      </select>  </body>  <script>      //1. createElement()   创建新的元素      let option = document.createElement("option");      //为option添加文本内容      option.innerText = "深圳";        //2. appendChild()     将子元素添加到父元素中      let select = document.getElementById("s");      select.appendChild(option);        //3. removeChild()     通过父元素删除子元素      //select.removeChild(option);        //4. replaceChild()    用新元素替换老元素      let option2 = document.createElement("option");      option2.innerText = "杭州";      select.replaceChild(option2,option);    </script>  </html>

复制代码

3.4、Attribute 属性的操作

具体方法

代码实现

  <!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <meta name="viewport" content="width=device-width, initial-scale=1.0">      <title>属性的操作</title>      <style>          .aColor{              color: blue;          }      </style>  </head>  <body>      <a>点我呀</a>  </body>  <script>      //1. setAttribute()    添加属性      let a = document.getElementsByTagName("a")[0];      a.setAttribute("href","https://www.baidu.com");        //2. getAttribute()    获取属性      let value = a.getAttribute("href");      //alert(value);        //3. removeAttribute()  删除属性      //a.removeAttribute("href");        //4. style属性   添加样式      //a.style.color = "red";        //5. className属性   添加指定样式      a.className = "aColor";    </script>  </html>

复制代码

3.5、Text 文本的操作

具体方法

代码实现

  <!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <meta name="viewport" content="width=device-width, initial-scale=1.0">      <title>文本的操作</title>  </head>  <body>      <div id="div"></div>  </body>  <script>      //1. innerText   添加文本内容，不解析标签      let div = document.getElementById("div");      div.innerText = "我是div";      //div.innerText = "<b>我是div</b>";        //2. innerHTML   添加文本内容，解析标签      div.innerHTML = "<b>我是div</b>";    </script>  </html>

复制代码

3.6、DOM 小结

DOM(Document Object Model)：文档对象模型
Document：文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
元素的操作
getElementById()
getElementsByTagName()
getElementsByName()
getElementsByClassName()
子元素对象.parentElement 属性
createElement()
appendChild()
removeChild()
replaceChild()
属性的操作
setAtrribute()
getAtrribute()
removeAtrribute()
style 属性
文本的操作
innerText
innerHTML

4、JavaScript 事件

4.1、事件介绍

事件指的就是当某些组件执行了某些操作后，会触发某些代码的执行。

常用的事件

4.2、事件操作

绑定事件

方式一
通过标签中的事件属性进行绑定。

  <button id="btn" onclick="执行的功能"></button>

复制代码

方式二
通过 DOM 元素属性绑定。

  document.getElementById("btn").onclick = 执行的功能

复制代码

4.3、事件小结

事件指的就是当某些组件执行了某些操作后，会触发某些代码的执行。
常用的事件 onload onsubmit onclick ondblclick onblur onfocus onchange
绑定事件方式
方式一：通过标签中的事件属性进行绑定。
方式二：通过 DOM 元素属性绑定。

5、JavaScript 综合案例

5.1、案例效果介绍

在“姓名、年龄、性别”三个文本框中填写信息后，添加到“学生信息表”列表（表格）中。

5.2、添加功能的分析

为添加按钮绑定单击事件。
创建 tr 元素。
创建 4 个 td 元素。
将 td 添加到 tr 中。
获取文本框输入的信息。
创建 3 个文本元素。
将文本元素添加到对应的 td 中。
创建 a 元素。
将 a 元素添加到对应的 td 中。
将 tr 添加到 table 中。

5.3、添加功能的实现

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>动态表格</title>
    <style>        table{            border: 1px solid;            margin: auto;            width: 500px;        }
        td,th{            text-align: center;            border: 1px solid;        }        div{            text-align: center;            margin: 50px;        }    </style>
</head><body>
<div>    <input type="text" id="name" placeholder="请输入姓名" autocomplete="off">    <input type="text" id="age"  placeholder="请输入年龄" autocomplete="off">    <input type="text" id="gender"  placeholder="请输入性别" autocomplete="off">    <input type="button" value="添加" id="add"></div>
    <table id="tb">        <caption>学生信息表</caption>        <tr>            <th>姓名</th>            <th>年龄</th>            <th>性别</th>            <th>操作</th>        </tr>
        <tr>            <td>张三</td>            <td>23</td>            <td>男</td>            <td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td>        </tr>
        <tr>            <td>李四</td>            <td>24</td>            <td>男</td>            <td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td>        </tr>
    </table>
</body><script>    //一、添加功能    //1.为添加按钮绑定单击事件    document.getElementById("add").onclick = function(){        //2.创建行元素        let tr = document.createElement("tr");        //3.创建4个单元格元素        let nameTd = document.createElement("td");        let ageTd = document.createElement("td");        let genderTd = document.createElement("td");        let deleteTd = document.createElement("td");        //4.将td添加到tr中        tr.appendChild(nameTd);        tr.appendChild(ageTd);        tr.appendChild(genderTd);        tr.appendChild(deleteTd);        //5.获取输入框的文本信息        let name = document.getElementById("name").value;        let age = document.getElementById("age").value;        let gender = document.getElementById("gender").value;        //6.根据获取到的信息创建3个文本元素        let nameText = document.createTextNode(name);        let ageText = document.createTextNode(age);        let genderText = document.createTextNode(gender);        //7.将3个文本元素添加到td中        nameTd.appendChild(nameText);        ageTd.appendChild(ageText);        genderTd.appendChild(genderText);        //8.创建超链接元素和显示的文本以及添加href属性        let a = document.createElement("a");        let aText = document.createTextNode("删除");        a.setAttribute("href","JavaScript:void(0);");        a.setAttribute("onclick","drop(this)");        a.appendChild(aText);        //9.将超链接元素添加到td中        deleteTd.appendChild(a);        //10.获取table元素，将tr添加到table中        let table = document.getElementById("tb");        table.appendChild(tr);    }</script></html>

复制代码

5.4、删除功能的分析

删除功能介绍

删除功能分析

为每个删除超链接添加单击事件属性。
定义删除的方法。
获取 table 元素。
获取 tr 元素。
通过 table 删除 tr。

5.5、删除功能的实现

//二、删除的功能//1.为每个删除超链接标签添加单击事件的属性//2.定义删除的方法function drop(obj){//3.获取table元素let table = obj.parentElement.parentElement.parentElement;//4.获取tr元素let tr = obj.parentElement.parentElement;//5.通过table删除trtable.removeChild(tr);}

复制代码

发布于: 刚刚阅读数: 5

原文链接:【http://xie.infoq.cn/article/b56182f6262d53fff936530d5】。文章转载请联系作者。

楠羽

关注

还未添加个人签名 2022.08.04 加入

还未添加个人简介

发布

暂无评论

创作场景

和我一起入 JavaScript

3、JavaScript DOM

3.1、DOM 介绍

3.2、Element 元素的获取操作

3.3、Element 元素的增删改操作

3.4、Attribute 属性的操作

3.5、Text 文本的操作

3.6、DOM 小结

4、JavaScript 事件

4.1、事件介绍

4.2、事件操作

4.3、事件小结

5、JavaScript 综合案例

5.1、案例效果介绍

5.2、添加功能的分析

5.3、添加功能的实现

5.4、删除功能的分析

5.5、删除功能的实现

楠羽

评论