JavaScript的DOM模型对HTML增删改查

最新推荐文章于 2023-03-30 13:15:04 发布

先给自己打个气

最新推荐文章于 2023-03-30 13:15:04 发布

阅读量446

点赞数 1

分类专栏： JavaScript 文章标签： javascript js

本文链接：https://blog.csdn.net/qq_40641206/article/details/104234312

版权

JavaScript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

什么是DOM？

1、DOM，全称Document Object Model文档对象模型。
2、JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。
文档 – 文档表示的就是整个的HTML网页文档
对象 – 对象表示将网页中的每一个部分都转换为了一个对象，转换完对象以后，就可以以一种纯面向对象的形式来操作网页了
模型 – 使用模型来表示对象之间的关系，这样方便我们获取对象。
节点（Node）- 节点是构成网页的最基本的单元，网页中的每一个部分都可以称为是一个节点
- 常用的节点：

文档节点（Document），代表整个网页
元素节点（Element），代表网页中的标签
属性节点（Attribute），代表标签中的属性
文本节点（Text），代表网页中的文本内容

一、访问 HTML 元素

在网页中浏览器已经为我们提供了document对象，它代表的是整个网页，它是window对象的属性，可以在页面中直接使用。

1、根据 ID 访问 HTML 元素

document.getElementByld(“id属性值”)：返回文档中 id 属性值为 idVal 的 HTML 元素。
id值尽量唯一，js去寻找id时，只找第一个访问到的id。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var accessById = function(){
            alert(document.getElementById('a').innerHTML+'\n'
            +document.getElementById('b').value);
        }
    </script>
</head>
<body>
    <div id="a">猪八戒在这</div>
    <!-- 访问不到唐僧 -->
    <div id="a">唐僧能访问到吗？</div>
    <textarea  id="b" cols="30" rows="3">
        孙悟空文本域
    </textarea>
    <input type="button" value="访问两个元素" onclick="accessById();"/>
</body>
</html>

运行结果：
在这里插入图片描述
不仅可以获取属性的值，也可以修改（语法：元素.属性名 = 属性值）
举例：获取id为a，把背景设为red

document.getElementById('a').style.background='red';

扩充：

根据元素的name属性值查询一组元素节点对象:
- document.getElementsByName(“name属性值”);

2、根据 CSS 选择器访问 HTML 元素

Eelement querySelector(selectos)：该方法的参数既可是一个 CSS 选择器，也可是用逗号隔开的多个 CSS 选择器，该方法返回 HTML 文档中第一个符合选择器参数的 HTML 元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var accessById=function(){
            alert(document.querySelector('#a').innerHTML+'\n'
            +document.querySelector('#b').value);
        }
    </script>
</head>
<body>
    <div id="a">猪八戒在这</div>
    <!-- 访问不到唐僧 -->
    <div id="a">唐僧能访问到吗？</div>
    <textarea  id="b" cols="30" rows="3">
        孙悟空文本域
    </textarea>
    <input type="button" value="访问两个元素" onclick="accessById();"/>
</body>
</html>

运行结果：
在这里插入图片描述
Nodelist querySelectorAII(selectors)：该方法与前一个方法的用法类似，只是该方法将返回所有符合 CSS 选择器的 HTML 元素。作为一个NodeList数组返回。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var change = function(){
            // 获得元素为div的一个数组
            var divList=document.querySelectorAll("div");
            console.log(divList);
            for(var i in divList){
                divList[i].innerHTML = "测试内容"+i;
                divList[i].style.width="300px";
                divList[i].style.height="50px";
                divList[i].style.margin="10px";
                divList[i].style.background="red";
            }
            // querySelectorAll拿到的东西，因为property也是divList的一个元素，它里面没有innerHTML等属性
            // 所以报错，改进数组实际的长度不变
        }
    </script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <input type="button" onclick="change();" value="修改全部div元素"/>
</body>
</html>

运行结果：
在这里插入图片描述

querySelectorAll拿到的东西，因为property也是divList的一个元素，它里面没有innerHTML等属性，所以报错，通过上面发现数组实际的长度等于传进的元素个数，所以上面问题不能用for in来循环，而用普通的for循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var change = function(){
            // 获得元素为div的一个数组
            var divList=document.querySelectorAll("div");
            console.log(divList);
            for(var i=0;i<divList.length;i++){
                divList[i].innerHTML = "测试内容"+i;
                divList[i].style.width="300px";
                divList[i].style.height="50px";
                divList[i].style.margin="10px";
                divList[i].style.background="red";
            }
        }
    </script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <input type="button" onclick="change();" value="修改全部div元素"/>
</body>
</html>

报错消失：
在这里插入图片描述

3、利用节点关系访问 HTML 元素

利用节点关系访问 HTML 元素的属性和方法如下：

Node parentNode: 返回当前节点的父节点。只读属性。
Node previousSibling: 返回当前节点的前一个兄弟节点。只读属性。
Node nextSibling: 返回当前节点的后一个兄弟节点。只读属性。
Node[] childNodes: 返回当前节点的所有子节点。只读属性。
Node[] getElementsByTagName(tagName)：返回当前节点的具有指定标签名的所有子节点。
Node firstChild: 返回当前节点的第一个子节点。只读属性。
Node lastChild: 返回当前节点的最后一个子节点。只读属性。
代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .selected{
        background-color: #66f;
    }
    </style>
</head>
<body>
    <!-- 存在空白元素 -->
    <ol id="books">
        <li id="java">java1</li> <!-- 空白元素 -->
        <li id="ssh">ssh2</li>
        <li id="ajax" class="selected">ajax3</li>
        <li id="xml">xml4</li>
        <li id="ejb">ejb5</li>
        <li id="android">android</li>
    </ol>
    <input type="button" value="父节点" 
        onclick="change(curTarget.parentNode);">
    <input type="button" value="第一个"
        onclick="change(curTarget.parentNode.firstChild.nextSibling);">
    <input type="button" value="上一个"
        onclick="change(curTarget.previousSibling.previousSibling);">
    <input type="button" value="下一个"
        onclick="change(curTarget.nextSibling.nextSibling);">
    <input type="button" value="最后一个"
        onclick="change(curTarget.parentNode.lastChild.previousSibling);">
    <script>
        var curTarget = document.getElementById('ajax');
        var change = function(target){
            alert(target.innerHTML);
        }
    </script>
</body>
</html>

运行结果：
在这里插入图片描述
上述代码中：其父节点第一个孩子节点，由于存在回车键，<ol>与<li>标签之间有一处空白元素，所以第一个<li>标签要其父节点的第一个孩子节点的下一个节点才能访问到。

访问表单控件

表单在 DOM 中由 HTMLFormElement 对象表示,访问表单控件特有的几个常用属性：

action: 返回该表单的 action 属性值，该属性用于指定表单的提交地址。读写属性。
elements: 返回表单内全部表单控件所组成的数组。使用该数组可以访问该表单内的任何表单控件。只读属性。
---- formObj.elements[index]：返回表单中第 index 个表单控件。
---- formObj.elements[‘elementName’]：返回表单中 id 或 name 为 elementName 的表单控件。
length: 返回表单内表单域的个数，该属性等于 elements.length 的值。只读属性。
method: 返回该表单的 method 属性，该属性通常有 POST 和 GET 两个值，默认采用 GET 方式。该属性用于确定表单发送请求的方式。读写属性。
target: 用于确定提交表单时的结果窗门，可以是＿self、 _parent、 _top、 _blank 等值。读写属性。
除此之外， HTMLFormElement 对象还有如下两个常用方法。
- reset(）：重设表单，将所有表单域的值设置为初始值。
- submit(）：提交表单。

访问列表框、下拉菜单的选项

HTMLSelectElement 代表一个列表框或下拉菜单，如下几个额外的属性:

form: 返回列表框、下拉菜单所在的表单对象。只读属性。
length: 返回列表框、下拉菜单的选项个数。该属性的值可通过增加或删除列表框的选项来改变。只读属性。
options: 返回列表框、下拉菜单里所有选项组成的数组。只读属性。
selectedIndex: 返回下拉列表中选中选项的索引，如果有多个选项被选中，则只返回第一个被选中选项的索引。读写属性。
type: 返回下拉列表的类型，即是否允许多选。如果允许多选，则返回 select-multiple; 如果不支持多选，则返回 select-one。
HTMLSelectElement 的 options 属性可直接访问列表框、下拉菜单的所有列表项，传入指定索引即可访问指定列表项，语法格式如下。
select.options[index]：返回列表框、下拉菜单的第 index+1 个选项。
列表框、下拉菜单的选项由 HTMLOptionElement 对象表示，除了前面介绍的普通属性之外，该对象还提供了如下几个常用属性。
- form: 返回包含该选项所处列表框、下拉菜单的表单对象。
- defaultSelected: 返回该选项默认是否被选中。只读属性。
- index: 返回该选项在列表框、下拉菜单中的索引。只读属性。
- selected: 返回该选项是否被选中，通过修改该属性可以动态改变该选项是否被选中。
- text : 返回该选项呈现的文本，就是和之间的文本。对 HTMLOptionElement 而言，该属性与 innerHTML 属性相同。
- value: 返回每个选项的 value 属性，可以通过设置该属性来改变选项的 value 值。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <select name="mySelect" id="mySelect">
        <option value="java">java</option>
        <option value="ssh">ssh</option>
        <option value="ajax">ajax</option>
        <option value="xml">xml</option>
        <option value="ejb">ejb</option>
        <option value="android">android</option>
    </select><br/>
    <input type="button" value="第一个" 
        onclick="change(curTarget.options[0]);">
    <input type="button" value="上一个"
        onclick="change(curTarget.options[curTarget.selectedIndex-1]);">
    <input type="button" value="下一个"
        onclick="change(curTarget.options[curTarget.selectedIndex+1]);">
    <input type="button" value="最后一个"
        onclick="change(curTarget.options[curTarget.length-1]);">
    <script>
        var curTarget=document.getElementById("mySelect");
        var change = function(target){
            alert(target.text);
        }
    </script>
          
</body>
</html>

运行结果：
在这里插入图片描述

访问表格子元素

HTMLTableElement 代表表格， HTMLTableElement 对象额外的属性:

caption: 返回该表格的标题对象。可通过修改该属性来改变表格标题。
HTMLCollection rows: 返回该表格里的所有表格行，该属性会返回＜thead…/＞、 <tfoot…／＞和<tbody…／＞元素里的所有表格行。只读属性。
HTMLCollection tBodies: 返回该表格里所有<tbody…/＞元素组成的数组。
tFoot: 返回该表格里的<tfoot…／＞元素。
tHead: 返回该表格里的所有<thead…/>元素。
HTMLTableRowElement 代表表格行,还支持如下额外的属性:
cells: 返回该表格行内所有的单元格组成的数组。只读属性。
rowlndex: 返回该表格行在表格内的索引值。只读属性。
section Rawl ndex: 返回该表格行在其所在元素 <tbody…/>、＜thead.．／＞等元素）的索引值。只读属性。
HTMLTableCelLElement 代表单元格，还支持如下额外的属性:
cellIndex: 返回该单元格在该表格行内的索引值。只读属性。

在访问表格某一具体单元格时，必须通过某一行（rows）数组下的某一列（cells）数组来访问。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <table id="d" border="1">
        <caption>我是大标题</caption>
        <tr>
            <td>内容1</td>
            <td>内容11</td>
        </tr>
        <tr>
            <td>内容2</td>
            <td>内容22</td>
        </tr>
        <tr>
            <td>内容3</td>
            <td>内容33</td>
        </tr>
    </table>
    <input type="button" value="表格标题" onclick=
        "alert(document.getElementById('d').caption.innerHTML);">
    <input type="button" value="第一行，第一列" onclick=
        "alert(document.getElementById('d').rows[0].cells[0].innerHTML);">
    <input type="button" value="第二行，第二列" onclick=
         "alert(document.getElementById('d').rows[1].cells[1].innerHTML);">
    <input type="button" value="第三行，第二列" onclick=
         "alert(document.getElementById('d').rows[2].cells[1].innerHTML);">
</body>
</html>

运行结果：
在这里插入图片描述

二、修改 HTML 元素

修改 HTML 元素通常通过修改如下几个常用属性来实现。
► innerHTML: 大部分 HTML 页面元素如<div.．／>、＜td…/>的呈现内容由该属性控制。
► value: 表单控件如<input…/＞、＜textarea…/＞的呈现内容由该属性控制。
► className: 修改 HTML 元素的 CSS 样式，该属性的合法值是一个 class 选择器名。
► style: 修改 HTML 元素的内联 CSS 样式。
► options[index]：直接对<select…／＞元素的指定列表项赋值，可改变列表框、下拉菜单的指定列表项。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    改变第<input type="text" id="row" size="2"/> 行,
    第<input type="text" id="cel" size="2"/> 列的值为：
    <input type="text" id="celVal" size="16">
    <input  id="chg" type="button" value="改变" onclick="change();">

    <table id="d" border="6" style="width: 580px; border-collapse: collapse;">
        <tr>
            <td>内容1</td>
            <td>内容11</td>
        </tr>
        <tr>
            <td>内容2</td>
            <td>内容22</td>
        </tr>
        <tr>
            <td>内容3</td>
            <td>内容33</td>
        </tr>
    </table>

    <script>
        var change=function(){
            var td=document.getElementById('d');

            var row=document.getElementById('row').value;
            row=parseInt(row);
            if(isNaN(row)){
                alert("你所修改的行必须是整数");
                return false;
            }

            var cel = document.getElementById("cel").value;
            cel=parseInt(cel);
            if(isNaN(cel)){
                alert("你所修改的列必须是整数");
                return false;
            }

            if(row>td.rows.length || cel>td.rows.item(row).cells.length){
                alert("修改的单元格不在该表格内");
                return false;
            }
            // 修改值
            if(document.getElementById("celVal").value!=""){
                td.rows.item(row-1).cells.item(cel-1).innerHTML=document.getElementById("celVal").value;
            }
        }
    </script>
</body>
</html>

代码中rows.item(row)等价于rows[row]
运行结果：
在这里插入图片描述

三、增加 HTML 元素

当需要为页面增加 HTML 元素时，应按如下两个步骤操作。
1、创建或复制节点。
2、添加节点。
创建或复制节点的方法：
document.createElement(Tag)：创建 Tag 标签对应的节点。
-------传入的参数必须是一个合法的 HTML 标签。
创建节点开销可能过大，还可以复制已有节点：
Node cloneNode(boolean deep)：复制当前节点。
当 deep 为 true 时，表示在复制当前节点的同时，复制该节点的全部后代节点；当 deep 为 false 时，表示仅复制当前节点
添加节点
对于普通的节点，可采用 Node 对象的如下方法来添加节点：

appendChild(Node newNode)：将 newNode 添加成当前节点的最后一个子节点。
insertBefore(Node newNode, Node refNode)：在 refNode 节点之前插入 newNode 节点。
replaceChild(Node newChild, Node oldChild)：将 oldChild 节点替换成 newChild 节点。

代码示例：

<body>
    <ul id="d">
        <li>内容一</li>
    </ul>
    <script>
        var ul = document.getElementById('d');
        var li = d.firstChild.nextSibling.cloneNode(false);
        li.innerHTML = "内容二";
        ul.appendChild(li);
        for(var i=0;i<5;i++){
            li = d.firstChild.nextSibling.cloneNode(false);
            li.innerHTML="利用循环创建的节点---"+i;
            ul.appendChild(li);
        }
    </script>
</body>

在这里插入图片描述

为列表框、下拉菜单添加选项

1、调用 HTMLSelectElement 的 add(）方法添加选项。
2、 add(HTMLOptionElement option, HTMLOptionElement before)：在 before 选项之前添加 option 选项。如果想将 option 选项添加在最后，则将 before 指定为 null 即可；
3、使用之前介绍的 appendChild(option)添加亦可。

<body id="test">
    <script>
        var a=document.createElement("select");
        for(var i=0;i<10;i++){
            var op = document.createElement("option");
            op.innerHTML="新增的"+i;
            a.add(op,null);//加到列表框最后
        }
        a.size=5;
        document.getElementById("test").appendChild(a);    
    </script>
</body>

在这里插入图片描述
但是这种add(）方法时指定最后一个参数为 null,在早期的（IE8）以前的版本不支持。为了避免这种情况，可使用直接为指定选项赋值的方法来添加选项。创建选项除了可使用前面所示的 createElement(）方法之外，还可使用如下构造器。

new Option(text, value, defaultSelected, selected)

该构造器有 4 个参数，这 4 个参数说明如下。

text：该选项的文本，即该选项所呈现的“内容” 。
value: 选中该选项的值。
defaultSelected: 设置默认是否选中该选项。
selected: 设置该选项当前是否被选中。
四个参数不必都写出来，可以只写一个两个。

<body id="test">
    <script>
        var a=document.createElement("select");
        a.style.width="200px";
        for(var i=0;i<10;i++){
           var op = new Option("新增的选项"+i,i);
           a.options[i]=op;
        }
        a.size=5;
        document.getElementById("test").appendChild(a);    
    </script>
</body>

在这里插入图片描述

动态添加表格内容

► insertRow(index)：在 index 处插入一行。返回新创建的 HTMLTableRowElement。
► createCaption(）：为该表格创建标题。返回新创建的 HTMLTableCaptionElement。如果该表格已有标题，则返回已有的标题对象。
► insertCell(long index)：在 index 处创建一个单元格，返回新创建的单元格。

<body id="test">
    <script>
        var a = document.createElement("table");
        a.style.width="800px";
        a.style.borderCollapse="collapse" ;
        a.border=1;
        var caption = a.createCaption();
        caption.innerHTML="表格标题";
        
        for(var i=0;i<5;i++){
            var tr = a.insertRow(i);
            for(var j=0;j<7;j++){
                var td = tr.insertCell(j);
                td.style.padding="5px";
                td.innerHTML="单元格内容"+i+j;
            }
         }
         document.getElementById("test").appendChild(a);
    </script>
</body>

在这里插入图片描述
表格结构为 HTMLTableElement–HTMLRowElement–HTMLCellElement。每个表格元素包含若干个表格行子节点，每个表格行节点又包含若干个单元格子节点。整个表格看起来其实就是 DOM 树的子树。

四、删除 HTML 元素

删除节点

removeChild(old Node)：删除 oldNode 子节点。

删除列表框、下拉菜单的选项

删除列表框、下拉菜单的选项有两种方法：

利用 HTMLSelectElement 对象的 remove(）方法删除选项。
直接将指定选项赋为 null 即可。
对于 HTMLSelectElement 对象而言，它提供了如下方法用于删除选项。
----- remove(long index)：删除指定索引处的选项。index 是需要删除选项所在的索引值。

<body>
    输入内容:<input type="text" id="opValue">
    <input type="button" id="add" value="增加" onclick="add();">
    <input type="button" id="del" value="删除" onclick="del();"><br/>
    <select id="show" style="width: 180px;" size="4"></select>

    <script>
        var show = document.getElementById("show");
        var add = function(){
            var op = new Option(document.getElementById('opValue').value);
            show.options[show.options.length]=op;
        }

        var del = function(){
            if(show.options.length>0){
            //循环遍历option菜单
                for(var i=0;i<show.options.length;i++){
                //找到与其输入内容相同的值，删除
                    if(document.getElementById('opValue').value==show.options[i].value){
                        show.remove(i);
                    }
                }
            }
        }
    </script>
</body>

运行结果：
在这里插入图片描述
如果想要删除每个选项，将列表框或下拉菜单的 innerHTML 属性赋为 null, 即可一次性删除该列表框、下拉菜单的全部选项。

删除表格的行或单元格

删除表格的指定表格行使用 HTMLTableElement 对象的如下方法。

deleteRow(long index)：删除表格中 index 索引处的行。

删除表格行的指定单元格使用 HTMLRowElement 对象的如下方法。

deleteCell(long index)：删除某行 index 索引处的单元格。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="button" id="delrow" value="删除最后一行" onclick="delrow();"><br/>
    <input type="button" id="delrow" value="删除最后一行的最后一格" onclick="delcell();"><br/>
    <table id="test" border="1" style="width: 500px;">
        <caption>大标题</caption>
        <tr>
            <td>内容11</td>
            <td>内容12</td>
        </tr>
        <tr>
            <td>内容21</td>
            <td>内容22</td>
        </tr>
        <tr>
            <td>内容31</td>
            <td>内容32</td>
        </tr>
    </table>
    <script>
        var tab = document.getElementById("test");

        var delrow =function(){
            if(tab.rows.length>0){
                tab.deleteRow(tab.rows.length-1);
            }
            if(tab.rows.length==0){
                document.body.removeChild(tab);
            }
        }

        var delcell = function(){
            var rowList = tab.rows;
            var lastRow = rowList.item(rowList.length-1);
            if(lastRow && lastRow.cells.length>0){
                lastRow.deleteCell(lastRow.cells.length-1);             
            }
            if(lastRow && lastRow.cells.length==0){
                // 如果删到最后一行，删除整个表格
                delrow();
            }
                
        }
    </script>
</body>
</html>

运行结果：
在这里插入图片描述

先给自己打个气

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的DOM模型对HTML增删改查

什么是DOM？1、DOM，全称Document Object Model文档对象模型。2、JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。文档 – 文档表示的就是整个的HTML网页文档对象 – 对象表示将网页中的每一个部分都转换为了一个对象，转换完对象以后，就可以以一种纯面向对象的形式来操作网页了模型 – 使用模型来表示对象之间的关系，这样方便...
复制链接

扫一扫