js之文档对象模型

骑猪看日落 2022-09-10 07:21 153阅读 0赞

**目录**

Node类型

Node类型的属性

Node类型的方法

Document类型

Document类型属性

Document类型方法

Element类型

Element类型属性

Text类型

Comment类型        注释类型

--------------------

DOM是针对HTML对XML文档的API，DOM描绘一个层次化的节点数，允许开发人员添加，移除，修改页面的某一部分。

# Node类型 #

JavaScript中所有的节点类型都继承自Node类型，所有的节点类型都共享着相同的基本属性和方法。

## Node类型的属性 ##

1.nodeType    表示节点类型

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>Element</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>TextNode</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>Comment</td> 
   <td>8</td> 
  </tr> 
  <tr> 
   <td>Document</td> 
   <td>9</td> 
  </tr> 
 </tbody> 
</table>

a.document是Document构造函数的实例

b.document.body是Element构造函数的实例

c.document.body.firstChild是Comment构造函数的实例

2.nodeName        该属性取决于节点类型，如果是元素类型,值为元素的标签名

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

4.childNodes        保存一个NodeList对象，NodeList是一种类数组对象，用来保存一组有序的节点。

5.parentNode        指向文档树中的父节点

6.previousSibling        兄弟节点中的前一个节点

7.nextSibling        兄弟节点中的下一个节点

8.firstChild        childNodes列表中的第一个节点

9.lastChild        childNodes列表中的最后一个节点

10.ownerDocument        指向表示整个文档的文档节点

## Node类型的方法 ##

1.hasChildNodes()        在包含一个或多个子节点的情况下返回true

>   var myDiv = document.getElementById("myDiv");
> 
>     console.log(myDiv.hasChildNodes());

2.appendChild()        向childNodes列表末尾添加一个节点。返回新增的节点

3.InsertBefore()        第一个参数：要插入的节点        第二个参数：作为参照的节点；        被插入的节点会变成参照节点的前一个同胞节点，同时被方法返回。

4.replaceChild()        第一个参数：要插入的节点；        第二个参数：要替换的节点

5.removeChild()        一个参数，即要移出的节点

6.cloneNode()        用于创建调用这个方法的节点的一个完全相同的副本。有一个参数为布尔类型参数为true时，表示深复制，即复制节点以及整个子节点数。参数为false的时候，表示浅复制，只复制节点本身。

# Document类型 #

Javascript通过使用Document类型表示整个文档。

## Document类型属性    ##

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>document</td> 
   <td> 
    <div> 
     <span style="color:#000000;">始终指向</span> 
     <span style="color:#000000;">HTML</span> 
     <span style="color:#000000;">页面中的</span> 
     <span style="color:#000000;">&lt;html&gt;</span> 
     <span style="color:#000000;">元素</span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#000000;">body</span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#000000;">直接指向</span> 
     <span style="color:#000000;">&lt;body&gt;</span> 
     <span style="color:#000000;">元素 </span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#000000;">doctype</span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#000000;">访问</span> 
     <span style="color:#000000;">&lt;!DOCTYPE&gt;, </span> 
     <span style="color:#000000;">浏览器支持不一致，很少使用</span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#000000;">title</span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#000000;">获取文档的标题 </span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#000000;">URL</span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#000000;">取得完整的</span> 
     <span style="color:#000000;">URL</span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#000000;">domain</span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#000000;">取得域名，并且可以进行设置，在跨域访问中经常会用到</span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#000000;">referrer</span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#000000;">取得链接到当前页面的那个页面的</span> 
     <span style="color:#000000;">URL</span> 
     <span style="color:#000000;">，即来源页面的</span> 
     <span style="color:#000000;">URL</span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#000000;">images</span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#000000;">获取所有的</span> 
     <span style="color:#000000;">img</span> 
     <span style="color:#000000;">对象，返回</span> 
     <span style="color:#000000;">HTMLCollection</span> 
     <span style="color:#000000;">类数组对象</span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#000000;">forms</span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#000000;">获取所有的</span> 
     <span style="color:#000000;">form</span> 
     <span style="color:#000000;">对象，返回</span> 
     <span style="color:#000000;">HTMLCollection</span> 
     <span style="color:#000000;">类数组对象</span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#000000;">links</span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#000000;">获取文档中所有带</span> 
     <span style="color:#000000;">href</span> 
     <span style="color:#000000;">属性的</span> 
     <span style="color:#000000;">&lt;a&gt;</span> 
     <span style="color:#000000;">元素</span> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## Document类型方法 ##

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#000000;"><strong>getElementById()</strong></span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#000000;">参数为要取得元素的</span> 
     <span style="color:#000000;">ID</span> 
     <span style="color:#000000;">，如果找到返回该元素，否则返回</span> 
     <span style="color:#000000;">null</span> 
     <span style="color:#000000;">如果页面中多个元 </span> 
    </div> 
    <div> 
     <span style="color:#000000;">素的</span> 
     <span style="color:#000000;">ID</span> 
     <span style="color:#000000;">值相同，只返回文档中第一次出现的元素。如果某个表单元素的</span> 
     <span style="color:#000000;">name</span> 
     <span style="color:#000000;">值等于 </span> 
    </div> 
    <div> 
     <span style="color:#000000;">指定的</span> 
     <span style="color:#000000;">ID</span> 
     <span style="color:#000000;">，该元素也会被匹配。</span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#000000;"><strong>getElementsByTagName()</strong></span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#000000;">参数为要取得元素的标签名，返回包含另个或者多个元素的</span> 
     <span style="color:#000000;">NodeList</span> 
     <span style="color:#000000;">，在</span> 
     <span style="color:#000000;">HTML </span> 
    </div> 
    <div> 
     <span style="color:#000000;">文档中该方法返回的是</span> 
     <span style="color:#000000;">HTMLCollection</span> 
     <span style="color:#000000;">对象，与</span> 
     <span style="color:#000000;">NodeList</span> 
     <span style="color:#000000;">非常类似。可以通过 </span> 
    </div> 
    <div> 
     <span style="color:#000000;">[index/name],item(),namedItem(name)</span> 
     <span style="color:#000000;">访问 </span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#000000;"><strong>getElementsByName() </strong></span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#000000;">参数为元素的</span> 
     <span style="color:#000000;">name,</span> 
     <span style="color:#000000;">返回符合条件的</span> 
     <span style="color:#000000;">HTMLCollection </span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#000000;"><strong>getElementsByClassName()</strong></span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#000000;">参数为一个字符串，可以由多个空格隔开的标识符组成。当元素的</span> 
     <span style="color:#000000;">class</span> 
     <span style="color:#000000;">属性值 </span> 
    </div> 
    <div> 
     <span style="color:#000000;">包含所有指定的标识符时才匹配。</span> 
     <span style="color:#000000;">HTML</span> 
     <span style="color:#000000;">元素的</span> 
     <span style="color:#000000;">class</span> 
     <span style="color:#000000;">属性值是一个以空格隔开的列 </span> 
    </div> 
    <div> 
     <span style="color:#000000;">表，可以为空或包含多个标识符。</span> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

>  
> 
>  var classApp = document.getElementsByClassName("app");
> 
>  console.log(classApp\[0\]);
> 
>  var idApp = document.getElementById("app");
> 
> console.log(app);
> 
>  var name = document.getElementsByName("app");
> 
> console.log(name);
> 
>  var tagApp = document.getElementsByTagName("form");
> 
>  console.log(tagApp);
> 
> var myDiv = document.getElementsByName("")
> 
>

# Element类型 #

## Element类型属性 ##

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>id</td> 
   <td>元素在文档中的唯一标识符</td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td>有关元素的附加说明信息</td> 
  </tr> 
  <tr> 
   <td>className</td> 
   <td>与元素class特性对应</td> 
  </tr> 
  <tr> 
   <td>src</td> 
   <td> 
    <div> 
     <span style="color:#000000;">img</span> 
     <span style="color:#000000;">元素具有的属性</span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#000000;">alt</span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#000000;">img</span> 
     <span style="color:#000000;">元素具有的属性</span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#000000;">lang</span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#000000;">元素内容的语言代码，很少使用</span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#000000;">dir</span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#000000;">语言方向，</span> 
     <span style="color:#000000;">ltr,rtl </span> 
     <span style="color:#000000;">左到右，右到左</span> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

>         
> 
> window.onload = function() \{
> 
>     var myDiv = document.getElementById("myDiv");
> 
>     console.log(myDiv.getAttribute("id"));
> 
>     console.log(myDiv.getAttribute("class"));
> 
>     console.log(myDiv.getAttribute("style"));
> 
>     var myImg = document.getElementsByTagName("img")\[0\];
> 
>     console.log(myImg.getAttribute("src"));
> 
>     console.log(myImg.getAttribute("alt"));
> 
>     console.log(myImg.getAttribute("style"));
> 
>     myDiv.removeAttribute("id");
> 
>     console.log(myDiv);
> 
> \}

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#000000;">getAttribute()</span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#000000;">参数为实际元素的属性名，</span> 
     <span style="color:#000000;">calss,name,id,title,lang,dir</span> 
     <span style="color:#000000;">一般只有在取得自定义 </span> 
    </div> 
    <div></div> </td> 
  </tr> 
  <tr> 
   <td>setAttribute()</td> 
   <td>设置属性， 
    <div> 
     <span style="color:#000000;">两个参数，第一个参数为要设置的特性名，第二个参数为对应的值。如果 </span> 
    </div> 
    <div> 
     <span style="color:#000000;">该值存在，替换 </span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#000000;">removeAttribute()</span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#000000;">移除指定的特姓</span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#000000;">createElement()</span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#000000;">创建元素，一个参数，要创建元素的标签名。该标签名在</span> 
     <span style="color:#000000;">HTML</span> 
     <span style="color:#000000;">中不区分大小写， </span> 
    </div> 
    <div> 
     <span style="color:#000000;">但是在</span> 
     <span style="color:#000000;">XML</span> 
     <span style="color:#000000;">中区分大小写 </span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

>         
> 
> var node = document.getElementsByClassName("one")\[0\];
> 
>     console.log(node);
> 
>     node.className = "two"; //可以重新设置类名
> 
>     node.setAttribute("className", "three"); //添加属性
> 
>     var input = node.getAttribute("class");
> 
>     console.log(input);
> 
>

作为文档树的文档

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>children</td> 
   <td> 
    <div> 
     <span style="color:#000000;">类似于</span> 
     <span style="color:#000000;">childNodes,</span> 
     <span style="color:#000000;">返回</span> 
     <span style="color:#000000;">NodeList</span> 
     <span style="color:#000000;">对象，但是该对象中仅包含</span> 
     <span style="color:#000000;">Element</span> 
     <span style="color:#000000;">对象</span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td>firstElementChild</td> 
   <td>第一个孩子元素节点</td> 
  </tr> 
  <tr> 
   <td>lastElementChild</td> 
   <td> 
    <div> 
     <span style="color:#000000;">最后一个孩子元素节点 </span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#000000;">nextElementSibling</span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#000000;">下一个兄弟元素节点 </span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#000000;">previousElementSibling</span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#000000;">上一个兄弟元素节点</span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#000000;">childElementCount</span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#000000;">子元素的数量，返回值和</span> 
     <span style="color:#000000;">children.length</span> 
     <span style="color:#000000;">值相等 </span> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

>         
> 
> var myDiv = document.getElementById("myDiv");
> 
>     console.log(myDiv.hasChildNodes());
> 
>     console.log(myDiv.firstElementChild.nextElementSibling); //获取第一个孩子的下一个兄弟元素
> 
>     console.log(myDiv.lastElementChild); //最后一个孩子元素节点
> 
>     console.log(myDiv.nextElementSibling); //下一个兄弟元素节点
> 
>     console.log(myDiv.childElementCount); //子元素的数量，返回值和children.length值相等

元素内容

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#000000;">innerHTML</span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#000000;">返回元素内容 </span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#000000;">textContent</span> 
    </div> </td> 
   <td> 
    <div></div> 
    <div> 
     <span style="color:#000000;">非</span> 
     <span style="color:#000000;">ie</span> 
     <span style="color:#000000;">浏览器 </span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#000000;">innerText</span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#000000;">ie</span> 
     <span style="color:#000000;">浏览器</span> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

# Text类型         #

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

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>length</td> 
   <td>文本长度</td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#000000;">appendData(text)</span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#000000;">追加文本 </span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td>deleteData<span style="color:#000000;">(beginIndex,count) </span> 
    <div></div> </td> 
   <td><span style="color:#000000;">删除文本 </span></td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#000000;">insertData(beginIndex,text)</span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#000000;">插入文本</span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#000000;">replaceData(beginIndex,count,text)</span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#000000;">替换文本</span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#000000;">splitText(beiginIndex)</span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#000000;">从</span> 
     <span style="color:#000000;">beginIndex</span> 
     <span style="color:#000000;">位置将当前文本节点分成两个文本节点</span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#000000;">document.createTextNode()</span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#000000;">创建文本节点，参数为要插入节点中的文本</span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#000000;">substringData(beiginIndex,count)</span> 
    </div> </td> 
   <td> 
    <div> 
     <span style="color:#000000;">从</span> 
     <span style="color:#000000;">beginIndex</span> 
     <span style="color:#000000;">开始提取</span> 
     <span style="color:#000000;">count</span> 
     <span style="color:#000000;">个子字符串 </span> 
    </div> </td> 
  </tr> 
  <tr> 
   <td> <h1></h1> </td> 
   <td> <h1></h1> <p>&nbsp;</p> </td> 
  </tr> 
 </tbody> 
</table>

> var myDiv = document.getElementsByTagName("div")\[0\];
> 
>     // console.log(myDiv.innerHTML); //innerHTML返回元素内容
> 
>     // console.log(myDiv.textContent);
> 
>     // var textNode = document.createTextNode("hello,");
> 
>     // myDiv.appendChild(textNode);
> 
>     // console.log(myDiv.textContent);
> 
>   
>   
>  
> 
>     console.log();
> 
>     //尝试获取已有的文本节点
> 
>     var textNode = myDiv.firstChild;
> 
>     console.log(textNode);
> 
>     console.log(textNode.nodeName);
> 
>     textNode.appendData("!!!!!!");
> 
>     textNode.deleteData(0, 2); //删除文本内容的方法，但是需要获取当前文本的文本节点
> 
>     console.log(textNode);
> 
>     textNode.insertData(6, "插入文本");
> 
>     textNode.replaceData(0, 2, "替换"); //替换文本的内容
> 
>     var split = textNode.splitText(7);
> 
>     console.log(split);
> 
>     var substring = textNode.substringData(5, "\#");
> 
>     console.log(substring);

# Comment类型        注释类型 #

> <div id = "myDiv"></div> 
> 
>  Comment 类型