JavaScript笔记:DOM基础

2023-07-18 13:14:52

一、什么是DOM

DOM全称是document object model(文档对象模型)。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。通俗的说DOM其实就是针对HTML和XML文档的一个API接口，用于操作HTML/XML。

W3C DOM 标准被分为 3 个不同的部分：

核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

二、DOM节点

注意：DOM树的根统一为文档根—document），DOM既然是树状结构，那么他们自然有如下的几种关系:

根结点(document)
父结点(parentNode)
子结点(childNodes)
兄弟结点(sibling)

为了更好的理解各种节点，我们来构造一个简单的页面结构，如下代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

在上面这段代码中，我们很容易看出：

ul为li的父结点(parentNode)
li为ul的子结点(childNodes)
各个li为其他li的兄弟结点(sibling)

三、常见节点类型

1、DOCUMENT_NODE

（document）文档根结点类型，该枚举型的值是9.

2、ELEMENT_NODE

（element）元素结点类型，该枚举型的值是1。上文中的html, body, div这些结点都是属于该类型。

3、TEXT_NODE （text）文本结点类型，该枚举型的值是3。 （注：一个空格也就可能是一个文本结点）

四、DOM操作

1.创建元素

document.createElement()

使用document.createElement()可以创建新元素。这个方法只接受一个参数，即要创建元素的标签名。这个标签名在HTML文档中不区分大小写，在XHTML中区分大小写。


为了理解document.createElement的用法，我们创建一个简单的网页，当我们在文本框输入内容之后，点击按钮创建节点的按钮的时候会创建一个li
并把文本框的内容赋给li

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload=function(){
            var oBtn=document.getElementById('btn1');
            var oUl=document.getElementById('ul1');
            var otext=document.getElementById('text1');
            oBtn.onclick=function(){
                var oLi=document.createElement("li");
                oLi.innerHTML=otext.value;
            }
        }
    </script>
</head>
<body>
    <input type="text" id='text1'>
    <input type="button" id='btn1'   value="创建节点">
    <ul id='ul1'>

    </ul>
</body>
</html>

运行程序我们会发现，新创建的元素并不会自动添加到文档树中，要添加到文档树，还需要结合appendChild()、insertBefore()、replaceChild()进行操作（后面会讲到）。

2.插入元素

appendChild()

appendChild()用于向childNodes列表的末尾添加一个节点，并且返回这个新增的节点。如果传入到appendChild()里的节点已经是文档的一部分了，那结果就是将节点从原来的位置转移到新位置，任何一个节点不能同时出现在文档中的多个位置。

如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload=function(){
            var oBtn=document.getElementById('btn1');
            var oUl=document.getElementById('ul1');
            var otext=document.getElementById('text1');
            oBtn.onclick=function(){
                var oLi=document.createElement("li");
                oLi.innerHTML=otext.value;
                oUl.appendChild(oLi);
            }
        }
    </script>
</head>
<body>
    <input type="text" id='text1'>
    <input type="button" id='btn1'   value="创建节点">
    <ul id='ul1'>

    </ul>
</body>
</html>

运行程序我们会发现，当点击创建节点后，会往ul里面添加一个li，而且每次都是在li的后面添加

insetBefore(newItem,existingItem)

insetBefore()可以将节点插入到某个特定的位置。这个方法接受两个参数：要插入的节点和作为参照的节点。
插入节点后，被插入的节点变成参照节点的前一个同胞节点，同时被方法返回。如果参照节点是null，则与appendChild()执行相同的操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload=function(){
            var oBtn=document.getElementById('btn1');
            var oUl=document.getElementById('ul1');
            var otext=document.getElementById('text1');
            oBtn.onclick=function(){
                var oLi=document.createElement("li");
                var aLi=document.getElementsByTagName('li');
                oLi.innerHTML=otext.value;
                oUl.insertBefore(oLi,aLi[]);

            }
        }
    </script>
</head>
<body>
    <input type="text" id='text1'>
    <input type="button" id='btn1'   value="创建节点">
    <ul id='ul1'>
        <li></li>
    </ul>
</body>
</html>

注意：如果ul里面原本是没有节点的则需要做判断，然后再插入，如下代码

    <script>
        window.onload=function(){
            var oBtn=document.getElementById('btn1');
            var oUl=document.getElementById('ul1');
            var otext=document.getElementById('text1');
            oBtn.onclick=function(){
                var oLi=document.createElement("li");
                var aLi=document.getElementsByTagName('li');
                oLi.innerHTML=otext.value;
                if(aLi.length>0){
                    oUl.insertBefore(oLi,aLi[0]);
                }else{
                    oUl.appendChild(oLi);
                }

            }
        }
    </script>

3、删除结点

removeChild()

该方法移除节点，接受一个参数，即要移除的节点，同时该方法返回被移除的节点。只能是一个节点，不能是一组节点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload=function(){
            var aA=document.getElementsByTagName('a');
            var oUl=document.getElementById('ul1');
            for(var i=0;i<aA.length;i++){
                aA[i].onclick=function(){
                    oUl.removeChild(this.parentNode);
                }
            }
        }
    </script>
</head>
<body>
    <ul id='ul1'>
        <li>2222 <a href="#">删除</a></li>
        <li>333 <a href="#">删除</a></li>
        <li>4444<a href="#">删除</a></li>
        <li>45555<a href="#">删除</a></li>
    </ul>
</body>
</html>

暂时就这么多，如果有补充，后面再更新。。。。。。。。。。。。。。。。。。

码农公寓