• 《JavaScript》——DOM


        DOM (Document Object Model) 即文档对象模型, 针对 HTML 和 XML 文档的 API (应用程序接口) 。DOM 描绘了一个层次化的节点树。执行开发者加入、移除和改动页面的某一部分。

        DOM中提供了两个节点接口,一个Node接口,一个是document接口,这两种接口的属性和方法基本包括了对节点树的全部操作。那什么是节点树那?

        节点树:载入 HTML 页面时。 Web 浏览器生成一个树型结构, 用来表示页面内部结构。 DOM 将这样的树型结构理解为由节点组成。

    比方例如以下HTML代码:     

    <html>
    	<head>
    			<title>DOM</title>
    			<meta http-equiv="Content-type" content="text/html;charset=gb2312"/>
    	</head>
    	<body>
    			<p>请先登录</p>
    			<form name="myForm">
    					姓名:<input type="text" name="myName">
    					密码:<input type ="password" name="myPassword">
    					<input type="button" value="确定">
    			</form>
    	</body>
    </html>

         生成的节点树例如以下所看到的:

           

         从节点树中大致能够看出,节点分为三种类型,元素节点,文本节点、属性节点。DOM中提供的Document接口和Node接口的方法与属性就是对这些节点进行操作(增删改查)。

         上面说了,我们利用文档接口(Document)的一些方法对HTML节点树的操作就是一些增删改查,那么在增删改查之前,我们的先得有节点吧。这些节点能够直接在HTML中编写,也能够用JavaScript脚本创建。当然了,这里用JavaScript创建节点的优点在于能够动态的对HTML文档进行改动,避免了在HTML界面直接改动代码。这样不仅达到了HTML页面与JavaScript脚本解耦和的作用,并且还能够实现JavaScript脚本动态的操纵HTML页面。


         以下这幅图片是文档接口(Document) 的部分属性与方法

         

        从上面的图片能够看出,Document接口的方法能够用来创建或获得一个节点,创建分成三种。即元素节点、属性节点、文本节点,訪问方法分为两种。遗憾的是我所列举的方法与属性都不全。只是这些方法都是一些经常使用的。

        以下在介绍一些Node节点关系与节点类型,还包含Node接口的一些方法,这些方法側重于增删改查。

        

       在上面这幅图片中,Node接口中加入节点的方法有两个。对节点的操作还有删除、替换、复制等操作。

       贴张HTML代码文档。以下的一些操作都是针对这部分HTML代码进行的。          

    <html>
    	 <head>
    		 <meta http-equiv="Content-type" content="text/html;charset=gb2312"/>
    		 <title>DOM基础</title>
    		 <script type="text/javascript"  src="demo.js"> </script>
    	 </head>
    	 <body  >
    	 
    	  <div  align="center">開始</div>
    	    
    		<div id="box" align="center" title="标题" class="pox" style="color:red;" >
    			<p>測试div1</p>
    			<p>測试div2</p>
    			<p>測试div3</p>
    		</div>
    		
    	<div align="center" >结束</div>
    	 </body>
     </html>

        1、创建元素节点p,和文本节点tex,而且在元素节点p以下加入文本节点text,代码和对照效果图例如以下 

    window.onload=function(){
    	var box=document.getElementById('box');// 查找box节点
    	var p =document.createElement('p');//仅仅是创建元素节点p 。还没有加入到文档中去,仅仅是驻留在内存中。
    	box.appendChild(p);//加入节点,p为节点的名称。
    	var text =document.createTextNode('此节点为当前节点的最后一个子节点');//创建文本节点text 主流在内存中。还没有加入到HTML中去。
    	p.appendChild(text);//给p节点加入文本元素
    };

       

                                      

       2、插入节点(在某节点之前插入)          

    window.onload=function(){
    	var box=document.getElementById('box');
    	var div =document.createElement('div');//仅仅是创建元素节点p 还没有加入到文档中去,仅仅是驻留在内存中。

    box.parentNode.insertBefore(div,box); //先将指针跳到插入位置的父节点。然后在运行插入 var text =document.createTextNode('測试一下啊!');//创建文本节点text div.appendChild(text);//给p节点加入文本元素 };

        3、自己定义方法,插入节点(在某节点之后)

    // 插入节点(在某节点之后)利用创建一个包括insertBefore()的函数,将目标节点与插入节点座位參数传递进去。
    function insertAfter(newElement,targetElement){
    	 var  parent =targetElement.parentNode;                  //得到父节点。就是body   假设层次较多,父节点不一定是body
    	 if(parent.lastChild==targetElement){                         //推断目标节点是否为该parent元素的最后一个节点。若是,则运行appendChild()操作
    		 parent.appendChild(newElement,targetElement)
    	 }else{																		 //若目标节点不是parent的最后一个节点,则将目标节点指针下移一位,得到其兄弟节点
    		 parent.insertBefore(newElement,targetElement.nextSibling)    //这样就能够在目标节点之后插入了。
    	 }
     }
     
     window.onload=function(){
    	var box=document.getElementById('box');
    	var p =document.createElement('p');
    	insertAfter(p,box);
    	var text=document.createTextNode('在此插入一个文本节点');
        p.appendChild(text);
     };

        4、移除节点代码与效果图例如以下 

    window.onload=function(){
    	var box=document.getElementById('box');
    	alert('你将要移除第一个測试DIV');
    	box.removeChild(box.childNodes[1])         //移除box的第一个子节点。
    	alert('你将要移除整个box');
    	box.parentNode.removeChild(box);           //移除整个box;
     };

             


         5、替换节点

    window.onload=function(){
    	var box=document.getElementById('box');
    	var p =document.createElement('p');//仅仅是创建元素节点p 还没有加入到文档中去,仅仅是驻留在内存中。

    box.parentNode.insertBefore(p,box); //先将指针跳到插入位置的父节点。然后在运行插入 var text =document.createTextNode('測试一下啊!');//创建文本节点text p.appendChild(text);//给p节点加入文本元素 alert('你将要把第一測试DIV换成“測试一下啊”'); box.replaceChild(p,box.childNodes[1]); };

         6、克隆节点

    window.onload=function(){
    	var box=document.getElementById('box');
    	var clone = box.childNodes[1].cloneNode(true); //获取第二个子节点。true 表示复制内容 
        box.appendChild(clone);
    };

        小结

        以上就是节点操作的部分方法。节点操作的方法不只这些,还有非常多非常多,我们学习DOM。就是学习里面对象的方法与属性的使用,希望我们能在今后的项目中经常使用。PS一句,有没有发现这些方法属性就死增删改查操作,先查,在操作,上面的一些操作都是依照这个步骤来的。

            

  • 相关阅读:
    里氏替换原则
    java简单选择排序
    通过登录窗体,登录不同的窗体,同时关闭登录窗体
    关于SQL中数据类型(float和real)和 .NET Framework 中数据类型(float和double)的问题
    129有确定性的有穷自动机
    大数据概述
    组合数据类型练习
    词法分析
    编译原理
    算法分析实验报告
  • 原文地址:https://www.cnblogs.com/wzjhoutai/p/6899452.html
Copyright © 2020-2023  润新知