DOM基础编程

王真教掌门

已于 2022-03-03 08:28:43 修改

阅读量411

点赞数 7

文章标签： javascript 前端 css3

于 2022-03-03 02:45:54 首次发布

本文链接：https://blog.csdn.net/WZJ278/article/details/123244379

版权

本文详细介绍了DOM中的Element对象，包括常用属性如children、childElementCount等，以及如何通过JavaScript操作表格。通过实例展示了如何创建、获取、修改和删除元素，以及如何操纵表格行和列。此外，还提供了多个示例代码，帮助读者掌握DOM操作技巧。

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

前言

文档对象模型（Document Object Model，简称DOM）是W3C组织推荐的处理可扩展置标语言的标准编程接口；DOM是HTML文档的内存中对象表示，它提供了使用JavaScript与网页交互的方式。

以下图片示意

DOM树
   document也是一个Element对象，它处于DOM树的最上级
   Element对象：HTML标签对象,也是一个节点Node对象
   Node : 节点对象

可以通过对象拿到自己想要得属性并加以操作

Element常用属性

   Element.children : 获得该元素中的所有子元素标签
   Element.childElementCount : 获得该元素中的子元素的个数
   Element.firstElementChild : 获得第一个子元素
   Element.lastElementChild : 获得最后一个子元素
   Element.nextElementSibling : 获得下一个相邻元素
   Element.previousElementSibling : 获得上一个相邻元素
   Element.parentElement : 获得父级元素

例题实操

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        <div id="div">
		    <img src="img/1.gif" alt="">
		    <img id="img" src="img/2.gif" alt="">
		    <img src="img/3.gif" alt="">
		</div>
        <table>
			<tr><th>Header</th></tr>
			<tr><td>Data</td></tr>
		</table>
		<script type="text/javascript">
            console.log(div.parentElement)//根据这个方法调用拿到了目标的父级元素
            console.log(div.children);//控制台打印所属的子元素
			console.log(div.nextElementSibling)//控制台打印相邻的元素元素
		</script>
	</body>
</html>

打印结果

拿到了div的父级元素 div的子元素 div的相邻元素table

Element常用方法

   document.createElement(TagName) : 根据标签名创建Element元素
   Element.getAttribute(name) : 获取标签中的属性
   Element.setAttribute(name,value) : 设置标签中的属性
   Element.appendChild(Node) ：在内容末尾添加子节点
   Element.insertBefore(Node1,Node2)
将Node1插入在Element中的子元素Node2前面
       Node2为null即可实现末尾插入
   Element.after(Node) : 在节点后面添加节点
   Element.before(Node) : 在节点前面添加节点
   Element.cloneNode(boolean) : 复制节点(是否复制子节点)
   Element.removeChild(Node) : 移除子节点
   Element.replaceChild(Node1,Node2) : 替换Node1替换子节点Node2
   增

例题实操

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div">
    <img src="img/1.gif" alt="">
    <img id="img" src="img/2.gif" alt="">
    <img src="img/3.gif" alt="">
</div>
<script>

    //网页中最大的父级元素(element)是 document

    //parent
    console.log(img.parentElement)
    //给img的父元素设置一个背景颜色
    img.parentElement.style.background="yellow"


    //第一个子节点
    console.log(div.firstElementChild,div.lastElementChild)

    console.log(img.previousElementSibling)
    console.log(img.nextElementSibling)
    
    function fn2() {
        //先创建一个图片标签
        var i=document.createElement("img")
        //设置标签上的属性
        //i.setAttribute("src","img/4.gif")

        //这种方式不是所有的属性都能用
        i.src="img/4.gif"

        //吧图片标签放到div中
        div.appendChild(i)
    }

    //Node Element 看作是一种东西
    function fn3() {
        //每点击一次  删除最后一张
        var i=div.lastElementChild
        //删除 通过父元素 来删除 子元素
        div.removeChild(i)
    }

    function fn4() {
        //复制节点
        var d=div.cloneNode(true)
        //节点复制的时候吧属性带过去了
        //把id改了不就行了
        // d.id=""
        d.setAttribute("id","")
        //加到body中
        document.body.appendChild(d)
    }

</script>
<button onclick="fn2()">增加一张图片</button>
<button onclick="fn3()">删除一张图片</button>
<button onclick="fn4()">复制div</button>
</body>
</html>

使用JS操作表格

   DOM结构中,table标签的子节点是tbody
   table.rows : 表格中的行的集合
   row.cells : 一行中的列的集合
   table.insertRow(i) : 在表格中为i的位置插入一行
   row.insertCell(i) : 在行中为i的位置插入一列
   table.deleteRow(i) : 删除第i行

例题实操

<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>

以上就是本文所有的内容了，谢谢观看，我之后还会写一些与HTML相关的文章，喜欢的可以点个赞+收藏+关注。