JavaScript（三）——DOM操作之如何创建DOM对象

╰+哭是因爲堅強的太久メ 2023-06-29 10:45 11阅读 0赞

前言：  
上篇文章大概说了一下DOM，但是还不是很了解，这里在说说。

一、什么是DOM？

**DOM **是英文*Document Object Model*的缩写，即文档对象模型。它是一种跨平台的、独立于编程语言的API，它把HTML、XHTML或XML文档当作一个树结构，而每个节点视为一个对象，这些对象可以被编程语言操作，进而改变文档的结构，映射到文档的显示。相信学习过BS的人都知道，对HTML应用很广泛，但是让自己实际运用起来还是有困难的，HTML代码中的一些状态是怎么改变的并不是太清楚，学习了DOM就知道了。

简单来说，DOM就是我们为了方便编程语言对HTML等文档进行操作，就是针对HTML和XML提供一个ＡＰＩ，提供了对文档的结构化的表述，并定义了如何使程序中对改结构进行访问，从而改变文档的结构，样式和内容。所以啊，把HTML文档中的节点全部视为一个个的对象，然后这些对象依照层级关系形成一棵树，这棵树就命名为DOM树。有了对象，编程就方便多了，只要一层层拿到对象就可以优雅地改变对象的属性进而动态地改变HTML等文档的展示。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5cDAzMDREZXZpbg_size_16_color_FFFFFF_t_70][]

二、操作

1.如何创建元素

这个方法是创建元素的时候将添加进去的对象放在上一个之前，就像我们发布博客一样，把每次发布的都放在最开始的那一页，以至于我们找的时候很不好找，这种只适合创建一个元素。

<!DOCTYPE html>
    
    <html>
        <head>
            <title>创建元素</title>
            <script >
            Window.onload=function()
            {
                Var oBtn=document.getElementById('btn');
                Var oUl=document.getElementById('ul1');
                Var oTxt=document.getElementById('txt1');
                oBtn.onclick =function()
                    {
                        //创建对象，默认将元素放在上一个对象之前。
                        Var oLi=document.createElement('li')
                        oLi.innerHTML=oTxt.value;
                        //父级.appendChild(子节点)，添加到父级的末尾。
                        oUl.appendChild(oLi)
                    };
                };
            </script>
        </head>
        <body>
        <input id="txt1" type="text/">
        <input id="btn1" type="button" value="创建li">
        </body>
    </html>

2.插入元素

这种方法就解决了每次添加的元素都跑到最后的情况，这种方法就是每次将插入的元素放在最前面，也就是第一页的第一个。

<!DOCTYPE html>
    <html>
    	<head>
    		<title>插入元素</title>
    		<script >
    		Window.onload=function()
    		{
    			Var oBtn=document.getElementById('btn');
    			Var oUl=document.getElementById('ul1');
    			Var oTxt=document.getElementById('txt1');
    			oBtn.onclick =function()
    		    {
    			    Var oLi=document.createElement('li')
    			    Var aLi=oUl.getElementsByTagName('li');
    			
    			    oLi.innerHTML=oTxt.value;
                    //如果插入元素之前没有插入过对象，那就把插入的元素放在第一个。          
                    //要是插入过元素就将这个元素放在上一个对象之前，浏览的时候为第一个。
    			    If(aLi.length>0)
    			    {
    			       oUl.insertBefore(oLi,aLi[0])
    			    }    
    			    Else
                    {
    			    oUl.appendChild(oli);
    			    }
    		    };
    		</script>
    	</head>
    	<body>
    	<input id="txt1" type="text/">
    	<input id="btn1" type="button" value="创建li">
    	<ul id="ul1">
    	</body>

3.删除元素

有了创建和插入肯定就要有删除。

<!DOCTYPE html>
        <html>
            <head>
            <title>删除元素</title>
            <script >
            window.onload=function()
           {
                Var aA=document.getElementById('a');
                Var oUl=document.getElementsById('ul1');
                For(var i=0;i<aLi.length;i++)
                    {
                       aA[i].onclick=function()
                       {
                          oUl.removeChild(this.parentNode);
                       }
                   }
            }；
            </script>
            </head>
        <body>
        <ul id="ul1">
        <li>afsdfdfasdf<a herf="javascript:;"></a>删除
        <li>sgfsg <a herf="javascript:;"></a>删除
        <li>gfhdght<a herf="javascript:;"></a>删除
        <li>sdfarewtgs<a herf="javascript:;"></a>删除</ul>
        </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5cDAzMDREZXZpbg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200112085411426.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5cDAzMDREZXZpbg==,size_16,color_FFFFFF,t_70