java web-2.9DOM对象

最新推荐文章于 2024-03-26 20:19:25 发布

zhendeWD

最新推荐文章于 2024-03-26 20:19:25 发布

阅读量151

点赞数

分类专栏： Javaweb 文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_39795049/article/details/104714069

版权

Javaweb 专栏收录该内容

58 篇文章 0 订阅

订阅专栏

DOM_概述

DOM(Document Object Model) 文档对象模型
将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD动态操作
在这里插入图片描述
W3C DOM标准被分为3个不同的部分

核心DOM：针对任何结构化文档的标准模型
Document：文档对象 Element：元素对象 Attribute：属性对象
Text:文本对象 Comment：注释对象
Node：节点对象。是其它5个的父对象
XML DOM：针对XML文档的标准模型
HTML DOM：针对HTML文档的标准模型

DOM_Document对象_获取Element对象

1.创建：在html dom模型中可以使用window对象来获取
window.document或者document
2.方法：
（1）获取Element：
①getElementById():根据id属性值来获取元素，id属性值一般唯一
②getElementByTagName():根据元素名称获取袁术对象们。返回值是一个数组。
③getElementsByClassName():根据class属性值获取元素对象们。返回值是一个数组
④getElementsByName():根据name属性值获取元素对象们
在这里插入图片描述

(2)创建其他DOM对象
createAttribute（name）
createComment（）
createElement（）
createTextNode（）

DOM_Element对象

1.获取/创建：通过documen来获取创建
2.方法：
（1）removeAttribute():删除属性
（2）setAttribute（）：设置属性
在这里插入图片描述

DOM_Node对象

节点对象，其他5个的父对象
1.特点：所有dom对象都可以被认为是一个节点
2.方法：
（1）CRUD dom树：
appendChild（）：向节点的子节点列表的结尾添加新的子节点
removeChild（）：删除（并返回）当前节点的指定子节点
replaceChild（）：用新节点替换一个子节点

<!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>
       var element_a = document.getElementById("del1");
       element_a.onclick=function(){
           var div1 = document.getElementById("div1");
           var div2 = document.getElementById("div2");
           div1.removeChild(div2);
       }
       /*
       超链接功能：
       1.可以被点击，样式
       2.点击之后跳转到href指定的url
       需求保留1功能，去掉2功能
      实现：href=“JavaScript：void（0）；”
        */
       var element_add= document.getElementById("add");
       element_add.onclick=function(){
           var div1 = document.getElementById("div1");
           var div3 = document.createElement("div");
           div3.setAttribute("id","div3");
           div1.appendChild(div3);
       }
    </script>
</body>
</html>

3.属性：parentNode：返回节点的父节点

 var div2 = document.getElementById("div2");
 var div1 = div2.parentNode;
 alert(div1);

HTMLDOM_innerHTML

在这里插入图片描述
使用innerHTML追加表格（动态表格添加）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用innerHTML追加表格</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>
    <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.给添加按钮绑定单击事件
   //使用innerHTML添加
    document.getElementById("btn_add").onclick = function () {
        //2.获取文本框内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;
        //获取table
        var table = document.getElementsByTagName("table")[0];
        //追加一行
        table.innerHTML += "<tr>\n" +
            "        <td>"+id+"</td>\n" +
            "        <td>"+name+"</td>\n" +
            "        <td>"+gender +"</td>\n" +
            "        <td><a href=\"javascript:void (0);\" onclick=\"delTr(this);\">删除</a> </td>\n" +
            "    </tr>"
    }
   
    /*
    删除：
    确定点击的是哪一个超链接；
    怎么删除
     */
    function delTr(obj) {
         var table = obj.parentNode.parentNode.parentNode;
         var tr = obj.parentNode.parentNode;

         table.removeChild(tr);
    }
</script>
</body>
</html>

HTMLDOM_样式控制

1.使用元素的style属性来设置
2.提前定义好类选择器的样式，通过元素的classname属性来设置class属性值

<!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">
    div
</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";
   }
    //修改样式方式2
   var div2 = document.getElementById("div2")
    div2.onclick = function () {
        div2.className = "d1";
    }
</script>
</body>
</html>