DOM编程-CSDN博客

本文链接：https://blog.csdn.net/qq_62217605/article/details/123238045

本文详细介绍了DOM模型的基本概念，包括Element对象的常用属性和方法，如子元素操作、属性设置和获取，以及如何利用JavaScript动态操作HTML表格，包括插入、删除和替换节点。通过实例演示展示了表格操作技巧。

摘要由CSDN通过智能技术生成

DOM编程

DOM介绍
Element常用属性：
常用方法：
使用JS操作表格：

DOM介绍

javascript组成：
ECMAScript
BOM：浏览器对象模型
DOM(Document Object Model)：文档对象模型

DOM是（Document（文档） Object（对象） Model（模型））浏览器对象模型，今天我就带大家来学习一下DOM的编程小知识。

DOM树：

document也是一个Element对象，它处于DOM树的最上级

Element对象：HTML标签对象,也是一个节点Node对象

Node : 节点对象

Element常用属性：

Element指的是某个元素（被定义出来的标签）

Element.children : 获得该元素中的所有子元素标签

Element.childElementCount : 获得该元素中的子元素的个数

Element.firstElementChild : 获得第一个子元素

Element.lastElementChild : 获得最后一个子元素

Element.nextElementSibling : 获得下一个相邻元素

Element.previousElementSibling : 获得上一个相邻元素

Element.parentElement : 获得父级元素

<body>
<p id="test1">
    <ul id="test2">
    <li>L1</li>
    <li>L2</li>
    </ul>
</p>
<script>
    console.log(test2.children)//获得该元素中的所有子元素标签
    console.log(test2.childElementCount)//获得该元素中的子元素的个数
    console.log(test2.firstElementChild)//获得第一个子元素
    console.log(test2.lastElementChild)//获得最后一个子元素
    console.log(test2.nextElementSibling)//获得下一个相邻元素
    console.log(test2.previousElementSibling)//获得上一个相邻元素
    console.log(test2.parentElement)//获得父级元素
</script>
</body>

效果如下（网页放大200%）：

在这里插入图片描述

有时候就算一个标签在某个标签内也不能算是这个标签的子元素，如上图中控制台输出的，ul标签的parent类是body标签而非p标签；
如果没有相邻的上一个或者下一个标签的话，则会输出null。

常用方法：

Element.getAttribute(name) : 获取标签中的属性（没有的属性都为null）

Element.setAttribute(name,value) : 设置标签中的属性

<body>
<p id="test">test</p>
<script>
    console.log(test.getAttribute("value"))//获取标签中的属性
    test.setAttribute("value","test2")//设置标签中的属性
    console.log(test.getAttribute("value"))//获取标签中的属性
</script>
</body>

效果如下（网页放大200%）：

在这里插入图片描述

document.createElement(TagName) : 根据标签名创建Element元素

Element.appendChild(Node) ：在内容末尾添加子节点

<body>
<p id="test">test</p>
<script>
    var u1=document.createElement("ul")//根据标签名创建Element元素
    u1.innerHTML="<li>L1</li>"//往ul里面插入一条html语句
    test.appendChild(u1)//在内容末尾添加子节点
</script>
</body>

效果如下（网页放大200%）：

在这里插入图片描述

Element.insertBefore(Node1,Node2)：将Node1插入在Element中的子元素Node2前面（Node2为null即可实现末尾插入）

<body>
<p id="test">test</p>
<script>
    //Element.insertBefore(Node1,Node2)的使用
    var u1=document.createElement("ul")//根据标签名创建Element元素
    u1.innerHTML="<li>L1</li>"//往ul里面插入一条html语句
    test.appendChild(u1)//在内容末尾添加子节点
    var u2=document.createElement("ul")
    u2.innerHTML="<li>L2</li>"
    test.insertBefore(u2,u1)//将Node1插入在Element中的子元素Node2前面（Node2为null即可实现末尾插入）
</script>
</body>

效果如下（网页放大200%）：

在这里插入图片描述

Element.after(Node) : 在节点后面添加节点

<body>
<p id="test">test</p>
<script>
    var u1=document.createElement("ul")//根据标签名创建Element元素
    u1.innerHTML="<li>L1</li>"//往ul里面插入一条html语句
    test.after(u1)// 在节点后面添加节点
</script>
</body>

效果如下（网页放大200%）：

在这里插入图片描述

Element.before(Node) : 在节点前面添加节点

<body>
<p id="test">test</p>
<script>
    var u1=document.createElement("ul")//根据标签名创建Element元素
    u1.innerHTML="<li>L1</li>"//往ul里面插入一条html语句
    test.before(u1)//在节点前面添加节点
</script>
</body>

效果如下（网页放大200%）：

在这里插入图片描述

Element.cloneNode(boolean) : 复制节点(是否复制子节点)

Element.removeChild(Node) : 移除子节点

<body>
<p id="test"><b>test</b></p>
<script>
    console.log(test.cloneNode(true));//复制节点(复制子节点)
    console.log(test.cloneNode(false));//复制节点(不复制子节点)
    test.parentElement.removeChild(test)//自己让自己的老子删除自己
</script>
</body>

效果如下（网页放大200%）：

在这里插入图片描述

Element.replaceChild(Node1,Node2) : 将Node1替换掉子节点Node2

<body>
<p id="test"><b>test</b></p>
<script>
    var u1=document.createElement("ul")//根据标签名创建Element元素
    u1.innerHTML="<li>L1</li>"//往ul里面插入一条html语句
    test.appendChild(u1)//在内容末尾添加子节点
    var u2=document.createElement("ul")
    u2.innerHTML="<li>L2</li>"
    test.replaceChild(u2,u1)// 将Node1替换掉子节点Node2
</script>
</body>

效果如下（网页放大200%）：

在这里插入图片描述

使用Element.appendChild插入的标签会变成Element的子元素

<body>
<p id="test">test</p>
<script>
    var p2=document.createElement("ul")
    p2.innerHTML="<li>1</li>"
    test.appendChild(p2)
    console.log(test.children); 
</script>
</body>

效果如下（网页放大200%）：

在这里插入图片描述

使用JS操作表格：

DOM结构中,table标签的子节点是tbody

table.rows : 表格中的行的集合

row.cells : 一行中的列的集合

table.insertRow(i) : 在表格中为i的位置插入一行

row.insertCell(i) : 在行中为i的位置插入一列

table.deleteRow(i) : 删除第i行

在表格中，行和列的下标都是从0开始的
行和列的最后一行的下标为 -1

<body>
<table id="table" border="">
    <tr id="row">
        <td>test1</td>
    </tr>
    <tr>
        <td>test2</td>
    </tr>
    <tr>
        <td>test3</td>
    </tr>
</table>
<script>
    console.log(table.rows);//表格中的行的集合
    console.log(row.children);//一行中的列的集合
    var r1=table.insertRow(-1)//在表格中为-1（最后一行）的位置插入一行
    var c1=r1.insertCell(0)//在行中为0（第一行）的位置插入一列
    c1.textContent="test4"
    table.deleteRow(0)//删除第0（第一行）行
</script>
</body>