由浅入深JavaScript7基础-Dom基础

最新推荐文章于 2021-06-09 17:13:02 发布

尼古拉斯_张三

最新推荐文章于 2021-06-09 17:13:02 发布

阅读量390

点赞数 2

分类专栏： web前端大神前端——JavaScript板块文章标签： JavaScript DOM树元素获取元素操作节点

本文链接：https://blog.csdn.net/zhangdongxu999/article/details/73060972

版权

web前端同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

大神前端——JavaScript板块

15 篇文章 7 订阅

订阅专栏

DOM基础
什么是DOM?
   DOM全称（Document Object Model）文档对象模型是针对HTML和XML文档的一个API
(应用程序编程接口)。DOM描绘了一个层次结构的树，允许开发人员更容易的
添加修改页面。
   我们曾经讲过，JavaScript是由ECMASCript，DOM,BOM三部分组成。JavaScript实现
了DOM,但DOM不是JavaScript的专利。在其他语言中使用DOM也很普遍。范围大家不要弄错。
   DOM是语言中立的API，用于访问和操作HTML和XML文档。

DOM树
   我们多次提到DOM描绘了一个层次结构的树，那这颗树是什么样子呢？
   其实DOM树就是HTML标签的树状结构。
   图一：

   我们在HTML中称之为标签，
   在JavaScript中称之为元素，
   在DOM中我们常常称之为节点。
   其实所代表的意思基本一致。所以大家见到这三个称呼，
可以等同。只是领域不一样，叫法不一样。

DOM节点
   从图中我们可以看出DOM中节点众多，那么这么多节点有什么区别呢，
如图所述，DOM节点按分类有父子节点，祖孙节点，同胞节点，导航节点等。

DOM节点的获取
DOM节点直接获取有以下几种方式
   getElementById
   getElementsByTagName
   getElementsByName
   getElementsByClass
eg：
   <script>
           window.onload = function(){
               var oUl = document.getElementById('ul1');
               var ali1 = document.getElementsByTagName('li');
               var ali2 = document.getElementsByClassName('liclass');
               var ali3 = document.getElementsByName('liname');
               for(var i = 0;i<ali1.length;i++){
                   alert(ali1[i].innerHTML);
               }
               for(var i = 0;i<ali2.length;i++){
                   alert(ali2[i].innerHTML);
               }
               for(var i = 0;i<ali3.length;i++){
                   alert(ali3[i].innerHTML);
               }
           }
       </script>
   </head>
   <body>
       <ul id='ul1'>
           <li id='li1' name='liname'>
               <p id='p1'>hello,javascript</p>
           </li>
           <li id='li2' class='liclass'>
               <p id='p2'>hello,html</p>
           </li>
           <li id = 'li3' class = 'liclass'>
               <p id ='p3'>hello,css</p>
           </li>
       </ul>
   </body>
   输出：
   <p id='p1'>hello,javascript</p>
   <p id='p2'>hello,html</p>
   <p id ='p3'>hello,css</p>
   <p id='p2'>hello,html</p>
   <p id ='p3'>hello,css</p>
   <p id ='p3'>hello,css</p>
   获得单个元素使用getElementById
   按照class和name以及tagname都是获取的一组元素。
   但这些都是直接获取节点元素，若果想获得id为1的节点的父节点就需要使用下面的
   语法。

DOM节点间接获取有以下几种方式
   childNodes children 获取当前节点的孩子节点
   parentNode parentElement 获取当前节点的父节点
   nextSibling nextElementSibling获取当前节点的下一个兄弟节点
   previousSibling previousElementSibling获取当前节点的上一个兄弟节点
   firstChild, firstElementChild获取当前节点的第一个子节点
   lastChild lastElementChild获取当前节点的最后一个子节点

   那么为什么要写两种这里涉及到兼容性
再讲之前还要先说一下，文本节点和元素节点。
   eg:
       <ul>
           hello
           <li>hello</li>
       </ul>
   对于ul,hello就是文本节点，li就是元素节点。对于空白也是文本节点。
       eg:
       <ul>
           <li>hello</li>
       </ul>
   ul.childNodes.length = 3 ,是应为会算上li前后两个空白文本节点。

   弄明白空白文本节点后就好解释为什么前文中都写两种元素获取方法了
   前一种，在ie9+ 会把空白文本节点算上，ie8-反而好用，后一种ie8-不能使用，
ie9+ 使用正常，对于前端做兼容性，请广大童鞋注意if-else兼容写法。
eg：兼容写法
   if(oul.firstElementChild){
       oul.firstElementChild.style.background='red';
   }else{
       oul.firstChild.style.background = 'red';
   }
eg: DOM节点间接获示例
       <script>
           window.onload = function(){
               var oUl = document.getElementById('ul1');
               var ali1 = document.getElementById('li1');
               var ali2 = document.getElementById('li2');
               var ali3 = document.getElementById('li3');
               alert(oUl.parentElement);
               alert(oUl.parentNode);
               alert(oUl.childNodes.length);//在ie8-,和children一致，不算文本节点，在ie9+会算上文本节点。
               alert(oUl.children.length);//高低版本都好用
               alert(ali1.nextSibling); //ie 8— 好用，9+ 会算上文本节点
               alert(ali1.nextElementSibling); //ie 9+
               alert(ali3.previousSibling);//ie 8— 好用，9+ 会算上文本节点
               alert(ali3.previousElementSibling);//ie 9+
               alert(oUl.firstChild);//ie 8— 好用，9+ 会算上文本节点
               alert(oUl.firstElementChild);//ie 9+
               alert(oUl.lastChild);//ie 8— 好用，9+ 会算上文本节点
               alert(oUl.lastElementChild);//ie 9+

           }
       </script>
   </head>
   <body>
       <ul id='ul1'>
           <li id='li1' name='liname'>
               <p id='p1'>hello,javascript</p>
           </li>
           <li id='li2' class='liclass'>
               <p id='p2'>hello,html</p>
           </li>
           <li id = 'li3' class = 'liclass'>
               <p id ='p3'>hello,css</p>
           </li>
       </ul>
   </body>


DOM节点（元素）的属性获取与设置
   元素属性的获取与设置
   元素.属性
   元素.属性 = ‘’；
   元素[‘属性名’]
   元素[‘属性名’]=‘’；
   元素.getAttribute('值');
   元素.oTxt.setAttribute();
   removeAttribute('值');

eg: 三种元素属性获取和修改的方式，建议使用第一种，方便。
   <script>
           window.onload = function(){
           var oTxt = document.getElementById('text1');
           var oBtn = document.getElementById('btn1');
           oBtn.onclick = function(){
               oTxt.value = 'qwe'; //第1种
               oTxt['value'] = '123';;//第2种
               oTxt.setAttribute('value','123');//第3种
               //oTxt.getAttribute('值');
               //removeAttribute('值');
           }
           }
       </script>
   </head>
   <body>
       <input type="text" id='text1'/>
       <input type="button" value="按钮 " id="btn1"/>
   </body>

DOM节点的创建和删除
   创建DOM元素
       createElement
       appendChild
   插入DOM元素
       insertBefore
   删除DOM元素
       removeChild
eg:类似一个微博评论得例子
       <script>
           window.onload = function(){
               var btn = document.getElementById('btn1');
               var oul = document.getElementById('ul1');
               var otext = document.getElementById('text1');
               btn.onclick = function(){
                   var oli = document.createElement('li');
                   //oul.appendChild(oli);
                   oli.innerHTML=otext.value;
                   var arr = document.getElementsByTagName('li');
                   //oul.insertBefore(oli,arr[0]);//ie8有问题
                   if(arr.length>0){
                       oul.insertBefore(oli,arr[0]);
                   }else{
                       oul.appendChild(oli);
                   }
               }
           }
       </script>
   </head>
   <body>
       <input type="text" id = 'text1' />
       <input type="button" id = 'btn1' value='创建' />
       <ul id = 'ul1'></ul>
   </body>

总结：DOM操作比较繁琐，只能依靠大量练习，学好DOM是学好JavaScript的关键。


——总结——

限于文章篇幅原因，这里仅仅介绍冰山一角。由于笔者的水平有限，编写时间也很仓促，
文中难免会出现一些错误或者不准确的地方，不妥之处恳请读者批评指正

尼古拉斯_张三

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
由浅入深JavaScript7基础-Dom基础

DOM基础什么是DOM? DOM全称（Document Object Model）文档对象模型是针对HTML和XML文档的一个API(应用程序编程接口)。DOM描绘了一个层次结构的树，允许开发人员更容易的添加修改页面。我们曾经讲过，JavaScript是由ECMASCript，DOM,BOM三部分组成。JavaScript实现了DOM,但DOM不是JavaSc
复制链接

扫一扫

专栏目录