Document Object Model（DOM）_document object model的三种节点-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45758587/article/details/109233194

这篇博客详细介绍了DOM（文档对象模型）的概念，包括DOM的层次结构、不同类型的节点如Element、Text和Comment，以及如何通过JavaScript操作这些节点。通过示例代码展示了如何获取和修改节点属性、添加、移除和替换节点，以及处理文档的各个部分。此外，还提及了document对象和获取文档元素的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM是针对HTML和XML文档的一个API（应用程序编程接口）,DOM描绘了一个层次化的节点树，允许开发人员添加，移除，修改页面的某一部分。1998年10月DOM1级规范成为W3C的推荐标准，为基本的文档结构以及查询提供了接口。但是要注意，IE中的所有DOM对象都是以COM对象的形式实现的。这意味着IE中的DOM对象与原生JavaScript对象的行为或活动特点并不一致。

DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型，每种类型分别表示文档中不同的信息或标记。每个节点拥有各自的特点，数据和方法，另外也有与其他节点存在某种关系。节点之间的关系构成了层次，所有页面标记则表现为一个以特定节点为根节点的树形结构。

Object 类型下的Node节点类型：

DOM1级定义为一个Node接口，该接口将由DOM中的所有节点类型实现。除了IE之外，在其他所有浏览器中都可以访问到这个类型。javascript中所有的节点类型都继承自Node类型，所有节点类型都共享着相同的基本属性和方法。

Element:标签类型 <div>,<span>,<a>

Text：文本类型

Comment:注释类型

Document:文档类型

HTMLDocument:document
window:{
  dociment:{}
}
console.log(document);//文档类型的实例对象

Node类型

nodeType 表示节点类型返回值类型 number

Element-->1;TextNode-->3;Comment-->8;Document-->9;

document是Document构造函数的实例document.body是Element构造函数的实例document.body.firstChild是TextNode构造函数的实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        window.onload=function(){  
        //当文档树加载完毕之后再执行函数
        var body = document.body;//改成document.body.firstChird;获取body的第一个孩子<!--hello-->
        console.log(body);//body对象/节点
        //console.log(body.nodeType);//1  改成注释后-->8
        //console.log(document.nodeType);//9
        }
    </script>
</head>
<body>
    <!-- hello -->
    <div></div>
</body>
</html>

nodeName该属性取决于节点类型，如果是元素类型，值为元素的标签名;对于节点类型返回值为大写的字符串类型的标签名 console.log(body.nodeName);

nodeValue 该属性取决于节点类型，如果是元素类型，值有null

childNodes保存一个NodeList对象，NodeList是一种类数组对象用来保存一组有序的节点，NodeList是基于DOM结构动态执行查询的结果，DOM结构变化可以自动反应到NodeList对象中。访问时可以通过中括号访问，也可以通过item()方法访问。可以使用slice方法将NodeList转换为数组 var arr=Array.prototype.slice.call(nodes,0);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        window.onload=function(){  
        //当文档树加载完毕之后再执行函数
        var body = document.body;//改成document.body.firstChird;获取body的第一个孩子<!--hello-->
        console.log(body);//body对象/节点
        //console.log(body.nodeType);//1  改成注释后-->8
        //console.log(document.nodeType);//9
        //console.log(body.nodeName);
        console.log(body.childNodes);
        console.log(body.childNodes[4]);//通过下标拿取类数组名
        /*
        将类数组转数组
        es6:Array.from();
        es5:1.自己遍历
            var arr=[];
            arr.slice();0/1/2/
            Array.prototype.mySlice=function(){
                var newArr;
                if(arguments){
                  for(var i=0;i<this.length;i++){
                      newArr.push(this[i]);
                  }
                }else if(){}else if(){}
                return newArr;
            }
            2.slice
            var arr=[];
            arr.slice.call(this,0);//从零开始遍历
            3.Array.prototype.Slice.call(this);
          */ 
        }
    </script>
</head>
<body>
    <!-- hello -->
    <div></div>
    <span></span>
</body>
</html>

parentNode指向文档树中的父节点。包含在childNodes列表中所有的节点都具有相同的父节点，每个节点之间都是同胞/兄弟节点。
previousSibling兄弟节点中的前一个节点
nextSibling兄弟节点中的下一个节点
firstChild childNodes列表中的第一个节点
lastChild childNodes列表中的最后一个节点
ownerDocument指向表示整个文档的文档节点。任何节点都属于它所在的文档，任何节点都不能同时存在于两个或更多个文档中
方法：hasChildNodes()在包含一个或多个子节点的情况下返回true

操作节点

以下四个方法都需要父节点对象进行调用!

appendChild()

向childNodes列表末尾添加一个节点。返回新增的节点。关系更新如果参数节点已经为文档的一部分，位置更新而不插入，dom树可以看做是由一系列的指针连接起来的，任何DOM节点不能同时出现在文档中的多个位置

insertBefore(）

第一个参数：要插入的节点；第二个参数：作为参照的节点；被插入的节点会变成参照节点的前一个同胞节点,同时被方法返回。如果第二个参数为null将会将该节点追加在NodeList后面

replaceChild()

第一个参数：要插入的节点；第二个参数：要替换的节点；要替换的节点将由这个方法返回并从文档树中被移除，同时由要插入的节点占据其位置

removeChild()

一个参数，即要移除的节点。移除的节点将作为方法的返回值。其他方法,任何节点对象都可以调用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        article{
            height: 150px;
            background-color: pink;
        }
        article div{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 10px;
            float: left;
            color:white;
        }
        div.one{
            background-color: powderblue;
        }
        div.two{
            background-color: salmon;
        }
        div.three{
            background-color: slateblue;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
          var btns=document.getElementsByTagName('button');//获取一个按钮
          var article=document.getElementsByTagName("article")[0];//获取父节点 获取对象时只要加了S都是类数组对象
          var div1=document.getElementById("one");//获取div1,ID唯一标识没有s
          var div3=document.getElementById("three");
          var clone=div1.cloneNode(true);
          btns[0].onclick=function(){
              var clone=div1.cloneNode(true);//放在btns内会一直克隆
              //console.log(div1);
              //console.log(clone);//只是复制了一份div放到了计算机内存中页面没有显示
              article.appendChild(clone);//追加：把克隆的参数写入
          }
          btns[1].onclick=function(){
            article.insertBefore(clone,div3);//插入：将插入的元素放在div3之前
          }
          btns[2].onclick=function(){
            article.replaceChild(clone,div3);//替换：将插入的元素替换div3
          }
          btns[3].onclick=function(){
            article.removeChild(div3);//移除：将元素div3移除
          }
        }
    </script>
</head>
<body>
    <article>
      <div class="one" id="one">div1</div>
      <div class="two" id="two">div2</div>
      <div class="three" id="three">div3</div>
    </article>
    <button>追加</button>
    <button>插入</button>
    <button>替换</button>
    <button>移除</button>
</body>
</html>

Document类型

javascript通过使用Document类型表示文档。在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面。document对象是window对象的一个属性，因此可以直接调用。HTMLDocument继承自Document

window:{
          document:{/*HTMLDocumnet*/}
}

forms 获取所有的form对象，返回HTMLCollection类数组对象

links 获取文档中所有带href属性的<a>元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        window.onload=function(){
          console.log(document.body);
          console.log(document.images);//类数组
          console.log(document.links);
          var div=document.getElementById("one");
          console.log(div);
          var img=document.getElementsByTagName("img");
          console.log(img);
          var a=document.getElementsByName("a");
          console.log(a);
          var from=document.getElementsByClassName("from");
          console.log(from);
        }
    </script>
</head>
<body>
   <div></div>
   <div id="one"></div>
   <div></div>
   <img src="" alt="">
   <img src="" alt="">
   <img src="" alt="">
   <a href="" name="a"></a>
   <a href="" name="a"></a> 
   <form action="" class="form"></form>
   <form action="" class="from"></form>
   <form action="" class="from"></form>
</body>
</html>

查找元素

Element类型

html元素

input:value ；input元素的值

取得自定义属性

getAttribute() 参数为实际元素的属性名，class,name,id,title,lang,dir一般只有在取得自定义特性值的情况下，才会用该方法。大多数直接使用属性进行访问，比如style,onclic

设置属性

dom.className="one"

dom.setAttribute("className","one");

setAttribute()：两个参数，第一个参数为要设置的特性名，第二个参数为对应的值。如果该值存在，替换

移除属性

removeAttribute() 移除指定的特性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        window.onload=function(){
         var div=document.getElementById("one");
         //console.log(div.style.width);
         console.log(div.flag);//undefined
         var key=div.getAttribute("flag");//取得属性：对于自定义属性需要用getAttribute
         console.log(key);//flag 
         var key=div.setAttribute("flag","one");//"kk","one" kk属性不存在，建立一个kk属性
         console.log(key);//设置属性：控制台undefined 查看器中flag="flag"--> flag="one"
         var key=div.removeAttribute("title");//移除属性
        }
    </script>
</head>
<body>
    <div id="one" class="two" title="this is div" style="width: 100px;" flag="flag"></div>
    <div></div>
</body>
</html>

创建元素

document.createElement()参数为要创建元素的标签名。该标签名在HTML中不区分大小写，但是在XML中区分大小写，返回值为document。

document.createAttribute();方法用于创建一个指定名称的属性，并返回Attr 对象属性。

元素的子节点

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>

ie8及一下版本浏览器 3个子节点
其他浏览器 7个子节点

文档对象模型

         console.log(div.innerHTML);//返回元素内容，包括html标签
         div.innerHTML="<h1>hello</h1>";//将h1设给div的子元素-->输出h1样式的hello
         console.log(div.textContent);//忽略标签，只打印文本
         div.textContent="<h1>hello</h1>";//输出<h1>hello</h1>,字符串

Text类型：文本类型

Text.prototype.xxx

文本节点。包含的是可以按照字面解释的纯文本内容。

var text=document.body.firstChild();
console.log(text.length);

Comment类型：注释类型

<div id="myDiv"><!--acomment--></div>
<!--acomment-->Comment类型