2022/09/22、23 day11/12：JavaScript（四）

最新推荐文章于 2024-08-10 16:15:00 发布

上水若善

最新推荐文章于 2024-08-10 16:15:00 发布

阅读量93

点赞数

分类专栏： 09 JavaWeb 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/w2079930908/article/details/127017033

版权

09 JavaWeb 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

{toc]

今日内容

JavaScript：
1. ECMAScript：
2. BOM：
3. DOM：
  1. 事件
  2. …二

DOM

概念：Document Object Model 文档对象模型。（BOM：浏览器对象模型）
- 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言进行增删改查（CRUD）的动态操作。
W3C DOM 标准被分为3个不同的部分：
- 核心DOM - 针对任何结构化文档的标准模型
  - Document：文档对象【重点学习】
  - Element：元素对象【重点学习】
  - Attribute：属性对象
  - Text：文本对象
  - Comment：注释对象
  - Node：节点对象【以上5个对象的父对象】【重点学习】
- XML DOM - 针对XML文档的标准模型
- HTML DOM - 针对HTML文档的标准模型
核心DOM模型：
- Document：文档对象【重点学习】
  1. 创建（获取）：在html dom模型中可以使用Window对象来获取
    1. Window.document
    2. document
  2. 方法
    1. 获取Element对象：
      1. getElementById() 根据ID属性值来获取元素对象。ID属性值一般唯一。
      2. getElementsByTagName()：根据元素的名称来获取元素对象们。返回值是一个数组。
      3. getElementsByClassName()：根据class的属性值来获取元素对象们。返回值也是一个数组。
      4. getElementsByName()：根据name属性值来获取元素对象们。返回值也是一个数组。
    2. 创建其他DOM对象：
      1. createAttribute(name)
      2. createComment()
      3. createElement()
      4. createTextNode()
  3. 属性
- Element：元素对象【重点学习】
  1. 获取/创建：通过dicument来获取和创建
  2. 方法：
    1. removeAttribute()：删除属性
    2. setAttribute()：设置属性
- Node：节点对象【以上5个对象的父对象】【重点学习】
  - 特点：所有dom对象都可以被认为是一个节点。
  - 方法：
    - CRUD(增删改查) dom树：
      - appendChild()：向节点的子节点列表的结尾添加新的子节点。
      - removeChild()：删除（并返回）当前节点的指定子节点。
      - replaceChild()：用新节点替换一个子节点。
  - 属性：
    - parentNode 返回节点的父节点。
- 案例：动态表格：
  - 样式：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0kTd3Kks-1663933694741)(en-resource://database/5773:0)]
HTML DOM
1. 标签体的设置和获取：InnerHTML
2. 使用html元素对象的属性
3. 控制元素样式
  1. 使用元素的style属性来设置
    - 如：
      1. div1.style.border = “1px solid red”;
      2. div1.style.width = “200px”;
      3. //font-size–> fontSize
      4. div1.style.fontSize = “20px”；
  2. 提前定义好类选择器的样式，通过元素的className属性来设置class属性值。

代码1：Document对象

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

<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>

<div class="cls1">div4</div>
<div class="cls1">div5</div>

<input type="text" name="username">

<script>
/*
* Document：文档对象【重点学习】
        1. 创建（获取）：在html dom模型中可以使用Window对象来获取
            1. Window.document
            2. document
        2. 方法
            1. 获取Element对象：
                1. getElementById() 根据ID属性值来获取元素对象。ID属性值一般唯一。
                2. getElementsByTagName()：根据元素的名称来获取元素对象们。返回值是一个数组。
                3.  getElementsByClassName()：根据class的属性值来获取元素对象们。返回值也是一个数组。
                4.  getElementsByName()：根据name属性值来获取元素对象们。返回值也是一个数组。
            2. 创建其他DOM对象：
                1. createAttribute(name)
                2. createComment()
                3. createElement()
                4. createTextNode()
        3. 属性
    * Element：元素对象【重点学习】
    * Node：节点对象【以上5个对象的父对象】【重点学习】
 */

//2. 根据元素的名称来获取元素对象们。返回值是一个数组。
var divs = document.getElementsByTagName("div");
//alert(divs.length);
//3. 根据class的属性值来获取元素对象们。返回值也是一个数组。
var div_cls = document.getElementsByClassName("cls1");
//alert(div_cls.length);
//4. 根据name属性值来获取元素对象们。返回值也是一个数组。
var ele_username = document.getElementsByName("username");
//alert(ele_username);

var table = document.createElement("table");
alert(table);

</script>
</body>
</html>

代码2：Node方法和属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node对象</title>
  <style>
    div{
      border: 1px solid red;
    }
    #div1{
      width: 200px;
      height: 200px;
    }

    #div2{
      width: 100px;
      height: 100px;
    }
    #div3{
        width: 100px;
        height: 100px;
    }
  </style>

</head>
<body>
<div id="div1">
  <div id="div2"> div2 </div>
    div1
</div>

<a href="Javascript:void(0);" id="del">删除子节点</a>
<a href="Javascript:void(0);" id="add">添加子节点</a>
<!--<input type="button'" id="del" value="删除子节点">-->
<script>

  //1.获取超链接
  var element_a = document.getElementById("del");
  //2.绑定单击事件
  element_a.onclick = function (){
    var div1 = document.getElementById("div1");
    var div2 = document.getElementById("div2");
    div1.removeChild(div2);
  }


  //1.获取超链接
  var element_add = document.getElementById("add");
  //2.绑定单击事件
  element_add.onclick = function (){
      var div1 = document.getElementById("div1");
     //给div1添加子节点
      //创建div节点
      var div3 = document.createElement("div");
      div3.setAttribute("id","div3");
      div1.appendChild(div3);
  }
  /*
  超链接功能：
    1. 可以被点击：有样式
    2. 点击后，跳转到href指定的url
  需求：保留1功能，去掉2功能
  实现：href="Javascript:void(0);"

   */

  var div2 = document.getElementById("div2");
  var div1 = div2.parentNode;
  alert(div1);
</script>

</body>
</html>

代码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="id" placeholder="请输入编号">
    <input type="text" id="name"  placeholder="请输入姓名">
    <input type="text" id="gender"  placeholder="请输入性别">
    <input type="button" value="添加" id="btn_add">

</div>


<table id="table">
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>

    <tr>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0);"  onclick="delTr(this);">删除</a></td>
    </tr>

    <tr>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="javascript:void(0);"  onclick="delTr(this);">删除</a></td>
    </tr>


</table>



<script>

/*
       分析：
             1. 添加：
                1. 给添加按钮绑定单击事件
                2. 获取文本框的内容
                3. 创建td，设置td的文本为文本框的内容。
                4. 创建tr
                5. 将td添加到tr中
                6. 获取table，将tr添加到table中
            2. 删除
                1. 确定点击的是哪一个超链接
                2. 怎么删除
                
*/


    //1.获取btn
    var btn_add = document.getElementById("btn_add");
    //2.绑定单击事件
    btn_add.onclick = function(){
        //获取每一个输入框内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;

        //获取表格
        var table = document.getElementById("table");

        //创建tr
        var tr = document.createElement("tr");
        //创建td
        var td_id = document.createElement("td");
        var text_id = document.createTextNode(id);
        td_id.appendChild(text_id);
        tr.appendChild(td_id);

        var td_name = document.createElement("td");
        var text_name = document.createTextNode(name);
        td_name.appendChild(text_name);
        tr.appendChild(td_name);

        var td_gender = document.createElement("td");
        var text_gender = document.createTextNode(gender);
        td_gender.appendChild(text_gender);
        tr.appendChild(td_gender);

        var td_option = document.createElement("td");

        var a = document.createElement("a");
        a.setAttribute("href","javascript:void(0);");
        a.setAttribute("onclick","delTr(this)");
        var text_a = document.createTextNode("删除");
        a.appendChild(text_a);
        td_option.appendChild(a);
        tr.appendChild(td_option);

        table.appendChild(tr);

    }

    function delTr(obj){
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        table.removeChild(tr);
    }

</script>
</body>
</html>

代码4：HTMLDOM_控制样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制样式</title>

  <style>
    .d1{
      border: 1px solid red;
      width: 100px;
      height: 100px;
    }
    .d2{
      border: 1px solid blue;
      width: 200px;
      height: 200px;
    }


  </style>
</head>
<body>
<div id="div1">
  div1
</div>
<div id="div2">
  div2
</div>


<script>
  var div1 = document.getElementById("div1");
  div1.onclick = function (){
    //修改样式方式1
    div1.style.border = "1px solid red";
    div1.style.width = "200px";
    //font-size--> fontSize
    div1.style.fontSize = "20px";
  }

  var div2 = document.getElementById("div2");
  div2.onclick = function () {
      div2.className = "d1";
      
  }

</script>
</body>
</html>

                                                                                 ——此文档为学习笔记！

上水若善

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2022/09/22、23 day11/12：JavaScript（四）

DOM
复制链接

扫一扫

专栏目录