DOM文档对象模型

DOM－Document Object Model ，它是W3C国际组织的一套Web标准
DOM是一种与浏览器、平台、语言无关的接口
在这里插入图片描述

document对象代表浏览器窗口中加载的整个HTML文档

常用属性

名称	描述
bgColor	页面的背景颜色
documentElement	获取对文档根结点****的引用
body	文档主体的开始和结束。
title	设置或获取页面的标题

常用获取dom对象方法

名称	描述
getElementById	获取指定ID的HTML页面元素对象
getElementsByName	获取一组指定name的HTML页面元素对象（数组）
getElementsByTagName	返回所有指定标签名的HTML页面元素对象（数组）

获取dom对象后可以通过对其属性的赋值进行属性的修改

注意：

1、dom对象可以进行样式修改通过style属性，但大多数不会直接进行修改

2、don对象设置属性与获取属性与css或标签直接设置的属性无关，如果获取初始值的dom属性为空字符串

innerHTML

innerHTML是DOM节点的一个属性，它表示节点的开始标签与结束标签之间的内容

获取的时当前标签中所有内容（包含其他标签）

outerHTML

outerHTML是DOM节点的一个属性，它表示节点的包括开始标签与结束标签之间的全部内容

获取的是包含当前标签在内的所有内容（包含其他标签）

innerText

innerText是DOM节点的一个属性，它表示节点的开始标签与结束标签之间的文本内容

outerText

outerText是DOM节点的一个属性，它表示节点的包括开始标签与结束标签之间的全部文本内容

区别：

1、获取内容

html会获取标签中的标签并返回，text仅仅只获取文本

2、设置内容

html会将设置的文本标签进行解析后在页面显示，text直接将文本进行设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function c() {
            var d1Dom = document.getElementById("d1");
            // alert(d1Dom.innerHTML)
            // alert(d1Dom.outerHTML)
            // alert(d1Dom.innerText)
            // alert(d1Dom.outerText)
            //  d1Dom.innerHTML = '修改后的文本';
            //  d1Dom.outerHTML = '<a href="#">修改后的文本</a>';
            //  d1Dom.innerText = '修改后的文本';
            d1Dom.outerText = '<a href="#">修改后的文本</a>';
        }
    </script>
</head>
<body>
    <div id="d1">aa<a href="">div内容</a>aa</div>
    <br>
    <a href="javascript:c()">改变文本内容</a>
</body>
</html>

visibility显示与隐藏

值	描述
visible	表示元素是可见的
hidden	表示元素是不可见的

visibility这个属性是操作指定元素是否可见，元素实际依然存在在指定位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 100px;
        }
        #d1 {
            background-color: aqua;
        }
        
        #d2 {
            background-color: green;
        }
    </style>
    <script>
        function noShow() {
            document.getElementById("d1").style.visibility = "hidden";
        }
        function show() {
            document.getElementById("d1").style.visibility = "visible";
        }
    </script>
</head>
<body>
    <button><a href="javascript:noShow()">隐藏</a></button>
    <button><a href="javascript:show()">显示</a></button>
    <div id="d1"></div>
    <div id="d2"></div>
    <br>
</body>
</html>

display显示与隐藏

值	描述
none	表示此元素不会被显示
block	表示此元素将显示为块级元素，此元素前后会带有换行符

display这个属性是操作指定元素是否可见并是否让出位置，元素实际依然存在在指定位置,类似于浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 100px;
        }
        #d1 {
            background-color: aqua;
        }
        #d2 {
            background-color: green;
        }
    </style>
    <script>
        function noShow() {
            document.getElementById("d1").style.display = "none";
        }

        function show() {
            document.getElementById("d1").style.display = "block";
        }

        function noShow1() {
            document.getElementById("d2").style.display = "none";
        }

        function show1() {
            document.getElementById("d2").style.display = "block";
        }
    </script>
</head>
<body>
    <button><a href="javascript:noShow()">隐藏</a></button>
    <button><a href="javascript:show()">显示</a></button>
    <div id="d1"></div>
    <br>
    <button><a href="javascript:noShow1()">隐藏</a></button>
    <button><a href="javascript:show1()">显示</a></button>
    <div id="d2"></div>
    <br>
</body>
</html>

区别：

visibility仅仅只控制元素的显示与隐藏会对原位置进行占用，display额外控制元素隐藏不占用原位置

DOM节点操作

节点属性

名称	描述
childNodes	当前节点的所有子节点
firstChild	当前节点的所有子节点中第一个节点
lastChild	当前节点的所有子节点中最后一个节点
parentNode	当前节点的父节点
nodeValue	节点值
nodeName	节点的名称
nodeType	节点的类型

节点方法

名称	描述
document.createElement（“标签名”）	创建指定标签元素对象
E.appendChild(节点对象)	为当前E元素末尾添加指定节点对象
E.removeChild(节点对象)	删除当前E元素中的指定节点对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </body>
    <script>
        function add() {
            var table = document.getElementById("tab")
            var tr = document.createElement("tr");
            table.appendChild(tr);
            var td1 = document.createElement("td");
            tr.appendChild(td1);
            td1.innerText = "1";
            var td2 = document.createElement("td");
            tr.appendChild(td2);
            td2.innerText = "2";
            var td3 = document.createElement("td");
            tr.appendChild(td3);
            td3.innerText = "3";

        }

        function del() {
            var table = document.getElementById("tab");
            var tr = table.lastChild;
            if (tr.nodeType == 3) {
                table.removeChild(tr);
                tr = table.lastChild;
            }
            table.removeChild(tr);

        }
    </script>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <td>商品名称</td>
                <td>数量</td>
                <td>单价</td>
            </tr>
        </thead>
        <tbody id="tab">

            <tr>
                <td>水</td>
                <td>1</td>
                <td>1</td>
            </tr>
        </tbody>
    </table>
    <input type="button" value="添加行" onclick="add()" />
    <input type="button" value="删除行" onclick="del()" />
</html>

原文链接：https://blog.csdn.net/Hu_Mingxiang/article/details/108813729