js之DOM基础

最新推荐文章于 2021-09-27 16:13:59 发布

百川灌河

最新推荐文章于 2021-09-27 16:13:59 发布

阅读量404

点赞数 1

分类专栏： ☆ BS之旅 -----js

本文链接：https://blog.csdn.net/lcl19970203/article/details/63702958

版权

☆ BS之旅同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

-----js

8 篇文章 0 订阅

订阅专栏

一、DOM介绍

文档对象模型（Document Object Model），DOM描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。

D（文档）：整个web加载的网页文档。

O（对象）：类似window对象之类的东西，可以调用属性和方法。

M（模型）：网页文档的树形结构。

二、节点：

加载HTML页面时，web浏览器生成一个树形结构。

这些节点被称为元素。

节点被分为三类：

例如：<div title =“属性节点”>测试DIV</div>

1、元素节点：其实就是标签，<div></div>

2、文本节点：标签内的纯文本，测试DIV

3、属性节点：标签的属性，title=‘标签属性’。

三、元素节点方法

共有6种：

（1）getElementById()方法：

参数传递一个标签的id值，这样就可以获取到该元素节点。

PS:一个页面只能允许有一个id值，表示唯一性。

i.元素节点属性：tagName:获取这个元素节点的标签名；

innerHTML：获取这个元素节点里面的文本。

innerHTML可以解析HTML标签。

ii. HTML属性的直接调用

（2）getElementByTagName()方法：

将返回一个对象数组HTMLCollection（NodeList），这个数组保存着所有相同元素名的节点列表。

参数传递一个标签名即可。

返回一个数组集合：[ObjectHTMLCollection]

返回数组集合的其中一个元素，如果是<li></li>，则为：[Object HTMLLIElement]。

（3）getElementsByName()方法

可以获取相同名称（name）的元素，返回一个对象数组HTMLCollection（NodeList）。

通常name属性在input标签中合法，所以IE支持。

（4）getAttribute()方法：

获取属性值。

（5）setAttribute()方法：

将设置元素中某个属性和值。他需要接收两个参数：属性名和值。如果属性本身已经存在，那么就会被覆盖。

（6）removeAttribute()方法：

移除HTML属性。

四、DOM节点

（1）节点属性

节点可以分为元素节点、属性节点和文本节点，而这些节点又有三个非常常用的属性，分别是：

PS:信息节点属性都必须在当前元素上操作才可以。

nodeValue和innerHTML的区别：

@取值：在获取到文本节点的时候，是无法使用innerHTML这个属性输出文本内容的。这个非标准属性必须在获取元素节点的时候，才能输出里面包含的文本内容。

@赋值：NodeValue会包含文本里的HTML转义成特殊字符，从而达到单纯文本的效果。

（2）层次节点属性

节点的层次结构可以划分为：父节点与子节点、兄弟节点这两种。当我们获取其中一个元素节点的时候，就可以使用层次节点属性来获取它相关层次的节点。

（1）childNodes：

获取当前元素节点的所有子节点。

返回[object NodeList]:NodeList集合，返回当前元素节点所有的子节点列表。

（2）firstChild和lastChild属性

firstChild用于获取当前元素节点的第一个子节点，相当于childNodes[0]；lastChild用于获取当前元素节点的最后一个子节点，相当于childNodes[box.childNodes.length-1]。

（3）ownerDocument属性

返回该节点的文档对象根节点，返回的对象相当于document。

（4）parentNode、previousSibling、nextSibling属性

返回该节点的父节点；

返回该节点的前一个同级节点；

返回该节点的后一个同级节点。

（5）attributes属性：返回该节点的属性节点集合。

返回[object NamedNodeMap]：集合数组，保存着这个元素节点的属性列表。

（6）忽略空白文本

两种解决方法：忽略空白字符、移除空白字符

五、节点操作

（1）createElement（）：

创建一个元素节点。

（2）appendChild（）：

将一个新节点添加到某个节点的子节点列表的末尾。

（3）createTextNode（）

创建一个文本节点。

<script type="text/javascript">
           window.οnlοad=function(){
              var box = document.getElementById('box');
              var p = document.createElement('p');//只是创建了一个元素节点
               box.appendChild(p);  //将新节点p添加到id=box的div里的子节点列表的末尾上。

              var text=document.createTextNode('测试DIV4');
               p.appendChild(text);  //把文本添加到p里面=把文本节点添加到子节点的末尾
               document.getElementsByTagName('body')[0].appendChild(text);//把text添加到div节点的后面
           }

       </script>
    </head>
    <body>
       <div id="box" title="标题" class="bbb">
           <p>测试DIV1</p>
           <p>测试DIV2</p>
           <p>测试DIV3</p>
       </div>
    </body>

（4）InsertBefore（）：

可以把节点创建到指定节点的前面。

<script type="text/javascript">
           window.οnlοad=function(){
              var box = document.getElementById('box');
              var p=document.createElement('p');
               //box.parentNode就是body节点
               //在某一个元素节点前面添加一个节点，必须先得到他的父节点
               box.parentNode.insertBefore(p,box);  //在box的父节点添加一个p,就是在box前面添加一个元素节点
           }

       </script>
    </head>
    <body>
       <div id="box" title="标题" class="bbb">
           <p>测试DIV1</p>
           <p>测试DIV2</p>
           <p>测试DIV3</p>
       </div>
    </body>

（5）replaceChild（）

可以把节点替换成指定的节点。

<script type="text/javascript">{


           window.οnlοad=function(){
              var span=document.getElementsByTagName('span')[0];
              var em=document.createElement('em');
               span.parentNode.replaceChild(em,span);
           }

       }
       </script>
    </head>
    <body>
       <span>开始</span>

       <div id="box" title="标题" class="bbb">
           <p>测试DIV1</p>
           <p>测试DIV2</p>
           <p>测试DIV3</p>
       </div>

       <span>结束</span>
    </body>

（6）cloneChild（）：

可以把子节点复制出来

<script type="text/javascript">{
           //克隆第一个p节点，放到p标签的末尾
           window.οnlοad=function(){
              var box = document.getElementById('box');
               var clone = removeWhiteNode(box).firstChild.cloneNode(true);//克隆一个节点，如果是true，就是把标签内的文本也克隆，如果是false，就是光克隆标签
               box.appendChild(clone);
           }
           //移除空白节点
           function removeWhiteNode(node){
               for(var i=0;i<node.childNodes.length;i++){
                   if(node.childNodes[i].nodeType === 3 && /^\s+$/.test(node.childNodes[i].nodeValue)){
                      node.childNodes[i].parentNode.removeChild(node.childNodes[i]);
                  }
               }
               return node;
           }
       }
       </script>
    </head>
    <body>
       <span>开始</span>

       <div id="box" title="标题" class="bbb">
           <p>测试DIV1</p>
           <p>测试DIV2</p>
           <p>测试DIV3</p>
       </div>

       <span>结束</span>
    </body>

（7）removeChild（）：

删除指定节点。

<script type="text/javascript">{
           //克隆第一个p节点，放到p标签的末尾
           window.οnlοad=function(){
              var box = document.getElementById('box');
               //删除box的第一个子节点
               box.removeChild(removeWhiteNode(box).firstChild);
               //删除整个box
               box.parentNode.removeChild(box);
           }
           //移除空白节点
           function removeWhiteNode(node){
               for(var i=0;i<node.childNodes.length;i++){
                   if(node.childNodes[i].nodeType === 3 && /^\s+$/.test(node.childNodes[i].nodeValue)){
                      node.childNodes[i].parentNode.removeChild(node.childNodes[i]);
                  }
               }
               return node;
           }
       }
       </script>
    </head>
    <body>
       <span>开始</span>

       <div id="box" title="标题" class="bbb">
           <p>测试DIV1</p>
           <p>测试DIV2</p>
           <p>测试DIV3</p>
       </div>

       <span>结束</span>
    </body>

总结：以上总结了我这几天来的学习成果。DOM是js的核心部分之一。这篇文章介绍了：6种元素节点方法，DOM节点中的节点属性以及6种层次节点属性；还有7种节点操作。接下来就该学习DOM进阶的知识了。

百川灌河

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
14
评论
js之DOM基础

一、DOM介绍文档对象模型（Document Object Model），DOM描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。D（文档）：整个web加载的网页文档。O（对象）：类似window对象之类的东西，可以调用属性和方法。M（模型）：网页文档的树形结构。二、节点：加载HTML页面时，web浏览器生成一个树形结构。这些节点被称为元素。
复制链接

扫一扫

专栏目录