一、什么是DOM

什么是DOM？逐步分解各个单词，D-O-M，D就是Document（文档）；O就是Object（对象）；M就是Model（模型）。合起来就是文档对象模型……很粗暴。那么文档对象模型是什么呢？

文档对象模型就是一种与浏览器、平台、语言无关的接口，通过DOM可以访问页面中的其他标准组件。它给开发者定义了一个标准的方法，使他们访问页面中的数据、脚本还有表现层对象。也就是说脚本可以直接操控页面中的标签。

DOM采用的是树形结构，学过数据结构的可能都不陌生。比如下面一段HTML代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	<h1>标题</h1>
	<b>加粗</b>
</body>
</html>

根节点就是html标签，然后逐步往下，画个图吧：

在这里插入图片描述
每个部分称为节点。JS文档对象模型就是用来操作这些节点的。

二、获取文档中的指定元素

获取完元素之后才可以继续操作，可以通过遍历文档树中的节点找到每个节点，但是太麻烦了；简单的方法可以通过元素的id属性获取元素，也可以通过元素的name属性获取元素。

1、通过元素的id属性获取元素

例子：在页面指定位置显示当前日期

2、通过元素的name属性获取元素

例子：实现电影图片的轮转效果

三、DOM对象节点属性

在DOM中使用节点属性对节点进行查询，查询各个节点的名称、类型、节点值、兄弟儿子节点等等。

下表展示了一些DOM对象节点的属性：

属性	说明
`nodeName`	节点的名称
`nodeValue`	节点的值、通常只用了文本节点
`nodeType`	节点的类型
`parentNode`	返回当前节点的父节点
`childNodes`	子节点列表
`firstChild`	第一个子节点
`lastChild`	最后一个子节点
`previousSibling`	当前节点的前一个兄弟节点
`nextSibling`	后一个兄弟节点
`attributes`	元素的属性列表

在对节点进行查询的时候，首先使用getElementById()方法来访问指定id的节点，操作各个节点的父母亲兄弟子孙属性可以实现DOM树的遍历。

四、节点的操作

主要包括创建、插入、复制、删除和替换。

1、创建节点

创建节点首先要使用文档对象中的createElement()方法和createTextNode()方法，生成一个新元素，并生成文本节点。最后通过appendChild()方法将创建的新节点添加到当前节点的末尾。

appendChild()方法将新的子节点添加到当前节点的末尾，语法如下：

obj.apppendChild(newChild)

其中newChild表示新的节点

例子：补全古诗

先来看一下效果：
在这里插入图片描述
步骤1： 写HTML代码，声明一个<div>标签然后起一个ID，写入已经存在的诗句，然后怼一个<form>添加一个text控件和button控件，用于响应用户操作

<div id="poemDiv">
    <div class="poemtitle">春晓</div>
    <div class="poem">春眠不觉晓</div>
    <div class="poem">处处闻啼鸟</div>
    <div class="poem">夜来风雨声</div>
</div>
<p>
    <form name="demo">
    请输入最后一句:<input type="text" name="last">
    <input type="button" value="添加" onclick="completePoem()">
</form>

步骤2： 写JS代码，按照上面说的步骤，首先用createElement()创建一个<div>标签，再用createTextNode()创建一个文本（内容填充为text控件的value），接着把创建在文本添加到第一次创建的<div>标签后面，最后添加到总的div标签，代码如下：

<script type="text/javascript">
    function completePoem() {
        var div = document.createElement('div');        //生成div元素
        div.className='poem';
        var last = demo.last.value;     //为div元素添加CSS类
        txt = document.createTextNode(last);    //生成文本节点
        div.appendChild(txt);           //将文本节点添加到创建的div元素中
        //将创建的div元素添加到id为poemDiv的div元素中
        document.getElementById('poemDiv').appendChild(div);
    }
</script>

2、插入节点

插入节点使用insertBefore()方法实现，该方法将新的节点添加到指定子节点的前面，格式如下：

obj.insertBefore(new,ref);

其中new代表新的节点，res代表在该节点前插入的节点。

例子：向页面中插入文本

首先看一下效果：
在这里插入图片描述
步骤1： 写HTML代码：

<h2 id="h">在上面插入节点</h2>
<form id="frm" name="frm">
    输入文本：
    <input type="text" name="demo">
    <input type="button" name="c" value="插入" onclick="insetNode('h',frm.demo.value)" >
</form>

步骤2： 写JS代码，首先get到传值传过来的id的节点，然后创建一个文本为str的节点，最后判断一下get到的那个节点是否存在父节点，如果存在父节点，在父结点中插入新的节点，代码如下：

<script>
    function crNode(str) {
        var newP = document.createElement("p");
        var newTxt = document.createTextNode(str);
        newP.appendChild(newTxt);
        return newP;
    }
    function insetNode(nodeID,str) {
        var node = document.getElementById(nodeID);
        var newNode = crNode(str);
        if(node.parentNode)
            //在父节点中插入新创建的节点
            node.parentNode.insertBefore(newNode,node);
    }
</script>

3、复制节点

复制节点可以使用cloneNode()方法来实现，格式如下：

obj.cloneNode(deep);

其中deep是一个布尔值，表示是否为深度复制。

深度复制：将当前节点的所有子节点全部复制
简单复制：只复制当前节点，不复制子节点

例子：复制下拉菜单

先来看一下效果：
在这里插入图片描述
步骤1： 写HTML代码，怼一个下拉菜单，然后弄个<div>标签声明个id一会儿添加到这个<div>下面，然后添加两个button，代码如下：

<form>
    <hr>
    <select name="shopType" id="shopType">
        <option value="%">请选择类型</option>
        <option value="0">数码家电</option>
        <option value="1">家用电器</option>
        <option value="2">床上用品</option>
    </select>
    <hr>
</form>
<div id="demo"></div>
<input type="button" value="简单复制" onclick="Clone(false)">&nbsp;&nbsp;&nbsp;
<input type="button" value="深度复制" onclick="Clone(true)">

步骤2： 写JS代码首先get到下拉菜单节点，然后复制，然后添加到<div>标签下：

<script type="text/javascript">
    function Clone(flag) {
        var sel = document.getElementById("shopType");
        var b = document.createElement("hr");
        var newSel = sel.cloneNode(flag);
        demo.appendChild(newSel);
        demo.appendChild(b);
    }
</script>

4、删除节点

删除节点使用removeChild()方法实现，格式如下：

obj.removeChild(oldChild);

其中oldChild表示需要删除的节点

例子：删除最后一个文本

先来看一下效果：
在这里插入图片描述
步骤1： 写HTML代码：

<h2>删除节点</h2>
<div id="demo">
    <p>张无忌</p>
    <p>赵敏</p>
    <p>周芷若</p>
    <p>张三丰</p>
</div>
<form>
    <input type="button" value="删除" onclick="delNode()">
</form>

步骤2： 写JS代码，首先get到所在节点，然后判断是否有子节点，如果有子节点，就删除，代码如下：

<script>
    function delNode() {
        var node = document.getElementById("demo");
        if(node.hasChildNodes())
            node.removeChild(node.lastChild);
    }
</script>

5、替换节点

替换子节点可以使用replaceChild()方法来实现，该方法用于将旧的节点替换为新的节点，格式如下：

obj.replaceChild(new,old);

其中new是替换后的新节点，old是替换的旧节点

例子：替换标记和文本

先看一下效果：
在这里插入图片描述
步骤1： 写HTML代码：

<b id="demo">要替换的文本内容</b>
<p></p>
输入标记：<input type="text" id="bj"><br>
输入文本：<input type="text" id="txt"><br>
<input type="button" value="替换" onclick="repN(bj.value,txt.value)">

步骤2： 写JS代码，在函数中首先get到节点，然后判断该节点是否存在，接着创建一个节点，给他的id赋值为原来的id，最后添加文本，在原来get到那个节点的父结点中实现替换文本，代码如下：

<script>
    function repN(bj,txt) {
        var node = document.getElementById("demo");
        if(node){
            var newNode = document.createElement(bj);
            var Txt = document.createTextNode(txt);
            newNode.id="demo";
            newNode.appendChild(Txt);
            node.parentNode.replaceChild(newNode,node);
        }
    }
</script>

未完待续

五、与DHTML相对应的DOM

1、innerHTML和innerText属性

例子：显示当前事件和分时问候语

2、outerHTML和outerText属性

来源：CSDN

作者：lesileqin

链接：https://blog.csdn.net/lesileqin/article/details/103961775

标签

dom

JavaScript 文档对象模型（DOM）

文章目录