javascript
   HTML+CSS+Javascript  === DHTML
                            dynamic html 

一、DOM


DOM: DOM= Document Object
Model,文书档案对象模型,DOM能够以一种独立于阳台和言语的章程访谈和修改贰个文书档案的剧情和布局。换句话说,那是意味着和管理一个HTML或XML文书档案的常用方法。有少数很首要,DOM的宏图是以指标管理团队(OMG)的法规为根基的,因而能够用于其余编制程序语言.
D:文档 – html 文档 或 xml 文档
O:对象 – document 对象的属性和章程
M:模型
DOM 是对准xml(html)的基于树的API。
DOM树:节点(node)的层次。
DOM 把贰个文书档案表示为一棵家谱树(父,子,兄弟)
DOM定义了Node的接口以及许两种节点类型来代表XML节点的八个地方

javascript 
  1 事件
  2 DOM
      获得标签对象
        var element  = document.getElementById();
        var elements = document.getElementsByTagName();
            element.parentNode
            element.childNodes
            element.firstChild
            element.lastChild
            element.nextSibling
            element.previousSibling
            
 
    a) 修改文书档案内容
         element.属性
         element.style.
     
    b) 修改文档结构
          var div = document.createElement(“div”);
          var txt = document.createTextNode(“value”);
  
          parentNode.appendChild();
          parentNode.removeChild();

二、DOM的结构


 永利开户送38元体验金 1

         parentNode.removeChild(childNode);
         tbody.removeChild(tr);  ?获得tr?
        
         <input type=”button” value=”delete”
onclick=”delPerson()”/>
         btn.onclick=  delPerson();
         <input type=”checkbox” checked=”checked”/>

 永利开户送38元体验金 2

         document.getElementsByTagName(“input”);
永利开户送38元体验金,         tbody.getElementsByTagName(“input”);

 永利开户送38元体验金 3

 

 

 

三、节点


基于 DOM,HTML 文书档案中的各个成分都以三个节点。DOM 是那般分明的:
整个文书档案是二个文书档案节点
每种 HTML 标签是三个要孟秋点
含有在 HTML 成分中的文本是文件节点
每三个 HTML 属性是三个天性节点
注解属于注释节点

  innerHTML
  innerText (IE);
 
  标签成分的属性   
 
  tr.innerHTML = “<td></td><td></td><input
type=””/></td>”

 

 

BOM  Broswer  Object  module
      浏览器  对象   模型
     
     
     javascript 内置对象
    
     window
       方法 能够归纳window  
      
       window.alert();
             .prompt();
             .confirm();
            
             i = .setTimeout(fun,飞秒数); 按期实践叁个顺序
            
             .clearTimeout(i); 清空本次按期程序
           
             i = setInterval(fun,纳秒数);  周期性的推行定期程序
            
             .clearInterval(i); 清空周期性定期程序
           
            open(); —- 展开二个新的网页
            close(); —- 关闭三个新的网页
                     —- 独有在open方法张开的页面中
                          调用window.close()才有意义
            
 ——————————————————–
     document 
       document.write();
       document.writeln();
      
     DOM 
       document.getElementById();
       document.getElementsByTagName();
       document.createElement();
       document.createTextNode();
      
      
     document.forms[0] 
             .images[]
             .anchors[]
      
        
     document.forms[0]  —–>
    
    
     Form标签对象
        form.elements[] —> 表单标签的子标签
     <form method=”” action=””>
        <input type=”text” name=””/>
        <input type=”text” name=””/>
     </form>
    
      document.forms[0].elements[0]
    
    
      <form method=”post” action=””>
        <input type=”submit” value=”submit”/>
        <input type=”button” value=”click me”/>
      </form>
    
     document.forms[0].submit(); —- > <input
type=”submit”/>
     效果等同的功用
    
     
     location 代表地址栏
       location.href=””
       功能在地方栏中钦点一张网页的路子
      
     history 

       history.back();
       history.forward();


java动态网页技艺
     服务器 Tomcat Jboss Weblogic  WebSphere
            Resin  ClassFish  SunAppOS 

 

java
    作者的管理器
        属性
          高级
            情状变量
             
           
    1 Path  修改
               c://Progrmam Files/java/jdk1.6/bin;path
    2 CLASSPTH 新建
    3 JAVA_HOME
               c://program Files/java/jdk1.6

 

 

    启动tomcat
      cd d:tomcat_home/bin
      startup.bat
    浏览器  

 

   

JavaWeb编程
   JavaEE编程

四、Node 层次

      Servlet JSP 

软件的进化进程
   1 单机版软件
   2 网络
      c/s架构的软件  2层架构 特点
          client(顾客端)  server(数据库服务器)           
      ATM
         ATM (client)  —-  server(数据库服务器)
           +200          —-  account  更新操作
           -200
      好处:
      瑕玷:client成效太多了 ,修改很麻烦
     
      client功能?
        1 UI 客户分界面
        2 业务管理 业务操作
        3 合同管理效果 
       
     c/s 3层种类架构
       瘦client
       client   —– Server(应用服务器)—-Server(数据库服务器)
        1 UI          1 业务管理效果 
        2 商讨管理
    
    
       Server(client) — Server(应用服务器) —-
Server(数据库服务器)
 
        ?思想
          1 html充当
            好处 1)html小
                 2)浏览器中
                 3) http协议
       
        B/S (瘦client应用)    sohu(网络选择) baidu dangdang 
360(京东)
         broswer server
          client — 由服务器中的html页面充当ui
                     http协议
               
       
         总计 b/s 服务器存款和储蓄 程序
                  由服务器软件(tomcat )调用程序
                  生成html页面 重回给客商的client(浏览器)
                 
                 
                 
         由 tomcat调用的议程 必需 完结三个接口
         Servlet{
           service(){
            xxx
            xx
           }
         }
         Servlet{
           serivce(){
          
           }
         }        
    —————————————————-
    JavaWeb程序的开销  TOMCAT 
   策动条件
    1 设置服务器软件
    2 webapps  —- web applications
       |— servletapp (名字随便写)
            |-WEB-INF 
                |- classes — java类
                |- lib — 需要的jar 
                |- web.xml  copy 其余门类
   主题开拓            
    3  创制java类 生成动态页面            
        implements Servlet{
          public void service();
        }       
   
      javac -d . HelloServlet.java
   
      tomcat_home
              |-lib 
                 |-servlet-api.jar
                
          
       CLASSPATH
       .;D:\tomcat\lib\servlet-api.jar

     4 注册 web.xml 
       目的:让tomcat知道 写过类
      
       <servlet>
         <servlet-name>Hs</servlet-name>
         <servlet-class>全限定名</servlet-class>
       </servlet>
       <servlet-mapping>
          <servlet-name>Hs</servlet-name>
          <url-pattern>/xx</url-pattern>
       </servlet-mapping>
      
       运维程序
         1 启动 tomcat   —》 tomcat_home/bin startup.bat
         2 看望 浏览器访谈
           url
        www.2cto.com

作者:woshiyjk      
      

HTML+CSS+Javascript === DHTML dynamic
html ———————————————- javascript 1 事件 2
DOM 得到标签对象 var element = document.getElementB…

节点相互都有等级关系。
HTML 文书档案中的全部节点组成了多个文书档案树(或节点树)。HTML
文书档案中的种种元素、属性、文本等都意味着着树中的三个节点。树起首于文书档案节点,并通过继续伸出枝条,直随地于那棵树最低端其他富有文件节点截止。

 

 永利开户送38元体验金 4

五、节点及其类型

节点
   *  由协会图中大家得以看看,整个文书档案就是一个文档节点。
   *  而每三个HMTL标签都以叁个因高商点。
   *  标签中的文字则是文本节点。
   *  标签的性质是性质节点。
   *  一切都是节点……

节点树
    
节点树的定义从图中侦查破案,最上边包车型客车就是“树根”了。节点之间有父亲和儿子关系,祖先与子孙关系,哥哥和大姨子关系。这个关系从图中也很雅观出来,直接连线的便是老爹和儿子关系了。而有四个爹爹的便是哥哥和表嫂关系……

永利开户送38元体验金 5
 

六、查找并寻访节点

你可通过若干种方法来搜寻您愿意操作的要素:
因而采纳 getElementById() 和 getElementsByTagName() 方法
透过利用一个因素节点的 parentNode、firstChild 以及 lastChild 属性

 

 

七、查找成分节点

getElementById()
       寻觅一个具有给定 id 属性值的因素,重回值是多个全体给定 id
属性值的要九秋点。假若官样文章那样的成分,它回到 null.
var oElement = document.getElementById ( sID )
     该办法只好用来 document 对象

<input type=”text” value=”国庆60周年” id=”tid”>
 function test(){
    var usernameElement=document.getElementById(“tid”);
    //获取成分的值
    alert(“usernameElement.value: “+usernameElement.value)
    //获取元素的门类
    alert(“usernameElement.type: “+usernameElement.type)
}

 

getElementsByName()
招来具备给定name属性的保有因素,那个艺术将赶回三个节点集合,那么些集合能够视作二个数组来处理。那些会集的
length 属性等于当前文书档案里具有给定name属性的富有因素的总个数。

 <form name=”form1″>
        <input type=”text” name=”tname” value=”国庆60年_1″
/><br>
        <input type=”text” name=”tname” value=”国庆60年_2″
/><br>
        <input type=”text” name=”tname” value=”国庆60年_3″
/><br>
        <input type=”button” name=”ok” value=”保存” id=”ok” 
onclick=”test();”>
 </form> 
function test(){
     var tnameArray=document.getElementsByName(“tname”);
     alert(tnameArray.length);
     for(var i=0;i<tnameArray.length;i++){
             window.alert(tnameArray[i].value);
      }
  }

 

[html]
<input type=”text” name=”username” value=”国庆60年_1″
/><br> 
  <input type=”text” name=”username” value=”国庆60年_2″
/><br> 
  <input type=”text” name=”username” value=”国庆60年_3″
/><br> 
        <input type=”button” name=”ok” value=”保存”
id=”ok”><br> 
<script language=”JavaScript”>      
     //该方法重临是数组类型  
  var usernameElements=document.getElementsByName(“username”); 
  for (var i = 0; i < usernameElements.length; i++) { 
        //获取元素的档期的顺序 
        //alert(usernameElements[i].type) 
        //获取成分value的值 
        //alert(usernameElements[i].value); 
        //采取函数直接量的章程 
       usernameElements[i].onchange = function(){ 
           alert(this.value); 
       } 

  </script> 
[html]
<input type=”text” name=”username” value=”国庆60年_1″
/><br> 
  <input type=”text” name=”username” value=”国庆60年_2″
/><br> 
  <input type=”text” name=”username” value=”国庆60年_3″
/><br> 
        <input type=”button” name=”ok” value=”保存”
id=”ok”><br> 
<script language=”JavaScript”>      
     //该措施重返是数组类型  
  var usernameElements=document.getElementsByName(“username”); 
  for (var i = 0; i < usernameElements.length; i++) { 
        //获取成分的系列 
        //alert(usernameElements[i].type) 
        //获取元素value的值 
        //alert(usernameElements[i].value); 
        //采取函数直接量的秘技 
       usernameElements[i].onchange = function(){ 
           alert(this.value); 
       } 

  </script> 

<input type=”text” name=”username” value=”国庆60年_1″
/><br>
  <input type=”text” name=”username” value=”国庆60年_2″
/><br>
  <input type=”text” name=”username” value=”国庆60年_3″
/><br>
        <input type=”button” name=”ok” value=”保存”
id=”ok”><br>
<script language=”JavaScript”>    
     //该方法重临是数组类型
  var usernameElements=document.getElementsByName(“username”);
  for (var i = 0; i < usernameElements.length; i++) {
        //获取元素的种类
        //alert(usernameElements[i].type)
        //获取成分value的值
        //alert(usernameElements[i].value);
        //选择函数直接量的点子
       usernameElements[i].onchange = function(){
           alert(this.value);
       }
}
  </script>
 

getElementsByTagName()
追寻具备给定标签字的具备因素,那些主意将重回二个节点会集,这么些集结能够看做四个数组来处理。这一个集结的
length 属性等于当前文书档案里装有给定标签字的具备因素的总个数。
   var elements = document.getElementsByTagName(tagName);
   var elements = element.getElementsByTagName(tagName);
该方式不必非得用在全路文书档案上。它也足以用来在某些特定成分的子节点当中搜索具有给定标签字的要素。
   var container =   document.getElementById(“sid”);
   var elements = container.getElementsByTagName(“p”);
   alert(elements .length);

[html]
//   //处理input 
// var inputElements=document.getElementsByTagName(“input”); 
//     //输出input标签的长短 
// //alert(inputElements.length); 
//  for(var i=0;i<inputElements.length;i++){ 
//   if(inputElements[i].type!=’button’){//submit 
// alert(inputElements[i].value); 
// } 
//  } 
 
//处理select 
//   //获取select标签 
//   var selectElements=document.getElementsByTagName(“select”); 
//   //获取select下的子标签 
//   for(var j=0;j<selectElements.length;j++){ 
//    var
optionElements=selectElements[j].getElementsByTagName(“option”); 
//   for(var i=0;i<optionElements.length;i++){ 
//   alert(optionElements[i].value); 
//   } 
//   } 
   
   
  var textareaElements=document.getElementsByTagName(“textarea”); 
  alert(textareaElements[0].value); 
[html] view plaincopyprint?//   //处理input 
// var inputElements=document.getElementsByTagName(“input”); 
//     //输出input标签的尺寸 
// //alert(inputElements.length); 
//  for(var i=0;i<inputElements.length;i++){ 
//   if(inputElements[i].type!=’button’){//submit 
// alert(inputElements[i].value); 
// } 
//  } 
 
//处理select 
//   //获取select标签 
//   var selectElements=document.getElementsByTagName(“select”); 
//   //获取select下的子标签 
//   for(var j=0;j<selectElements.length;j++){ 
//    var
optionElements=selectElements[j].getElementsByTagName(“option”); 
//   for(var i=0;i<optionElements.length;i++){ 
//   alert(optionElements[i].value); 
//   } 
//   } 
   
   
  var textareaElements=document.getElementsByTagName(“textarea”); 
  alert(textareaElements[0].value); 

//   //处理input
// var inputElements=document.getElementsByTagName(“input”);
//     //输出input标签的长短
// //alert(inputElements.length);
//  for(var i=0;i<inputElements.length;i++){
//   if(inputElements[i].type!=’button’){//submit
// alert(inputElements[i].value);
// }
//  }

//处理select
//   //获取select标签
//   var selectElements=document.getElementsByTagName(“select”);
//   //获取select下的子标签
//   for(var j=0;j<selectElements.length;j++){
//    var
optionElements=selectElements[j].getElementsByTagName(“option”);
//   for(var i=0;i<optionElements.length;i++){
//   alert(optionElements[i].value);
//   }
//   }
 
 
  var textareaElements=document.getElementsByTagName(“textarea”);
  alert(textareaElements[0].value);
 

[html]
var inputElements=document.getElementsByTagName(“input”); 
for(var i=0;i<inputElements.length;i++){ 
if (inputElements.type != ‘submit’) { 
    inputElements[i].onchange = function(){ 
           alert(this.value) 
    }; 
 } 
    
   var selectElements=document.getElementsByTagName(“select”); 
   for (var i = 0; i < selectElements.length; i++) { 
         selectElements[i].onchange=function(){  
              alert(this.value); 
         } 
    } 
[html]
var inputElements=document.getElementsByTagName(“input”); 
for(var i=0;i<inputElements.length;i++){ 
if (inputElements.type != ‘submit’) { 
    inputElements[i].onchange = function(){ 
           alert(this.value) 
    }; 
 } 
    
   var selectElements=document.getElementsByTagName(“select”); 
   for (var i = 0; i < selectElements.length; i++) { 
         selectElements[i].onchange=function(){  
              alert(this.value); 
         } 
    } 

 var inputElements=document.getElementsByTagName(“input”);
 for(var i=0;i<inputElements.length;i++){
 if (inputElements.type != ‘submit’) {
     inputElements[i].onchange = function(){
            alert(this.value)
     };
  }
   
    var selectElements=document.getElementsByTagName(“select”);
    for (var i = 0; i < selectElements.length; i++) {
          selectElements[i].onchange=function(){
               alert(this.value);
          }
     }
 

八、parentNode、firstChild以及lastChild

这几特个性 parentNode、firstChild 以及 lastChild
可根据文书档案的结构,在文书档案中实行“短距离的游览”。
请看上边这么些 HTML 片段:

 

[html]
<table>  
     <tr> 
        <td>John</td>  
        <td>Doe</td> 
       <td>Alaska</td>  
     </tr> 
 </table> 
[html] view plaincopyprint?<table>  
     <tr> 
        <td>John</td>  
        <td>Doe</td> 
       <td>Alaska</td>  
     </tr> 
 </table> 

<table>
     <tr>
        <td>John</td>
        <td>Doe</td>
       <td>Alaska</td>
     </tr>
 </table>

 

在上头的HTML代码中,第七个 <td> 是 <tr>
元素的第多个子成分(firstChild),而最后一个 <td> 是
<tr>成分的终极一个子成分(lastChild)。
别的,<tr> 是各类 <td>元 素的父节点(parentNode)。

 

[html]
ar textareaElements=document.getElementsByTagName(“textarea”); 
for (var i = 0; i < textareaElements.length; i++) { 
    textareaElements[i].onchange = function(){ 
          alert(this.value); 
   }; 

[html]
var textareaElements=document.getElementsByTagName(“textarea”); 
for (var i = 0; i < textareaElements.length; i++) { 
    textareaElements[i].onchange = function(){ 
          alert(this.value); 
   }; 

 var textareaElements=document.getElementsByTagName(“textarea”);
 for (var i = 0; i < textareaElements.length; i++) {
     textareaElements[i].onchange = function(){
           alert(this.value);
    };
 }
 

九、查看是还是不是留存子节点

hasChildNodes()
该情势用来检查壹个要素是或不是有子节点,再次回到值是 true 或 false.
  var booleanValue = element.hasChildNodes();
文本节点和性剧情点不也许再包涵任何子节点,所以对这两类节点使用
hasChildNodes 方法的重返值恒久是 false.
设若 hasChildNodes 方法的再次来到值是 false,则
childNodes,firstChild,lastChild 将是空数组和空字符串。

hasChildNodes()

[html]
 var selectElements=document.getElementsByTagName(“select”); 
 alert(selectElements[0].hasChildNodes()) 
 
var inputElements=document.getElementsByTagName(“input”); 
for(var i=0;i<inputElements.length;i++){ 
     alert(inputElements[i].hasChildNodes()); 

[html] view plaincopyprint? var
selectElements=document.getElementsByTagName(“select”); 
 alert(selectElements[0].hasChildNodes()) 
 
var inputElements=document.getElementsByTagName(“input”); 
for(var i=0;i<inputElements.length;i++){ 
     alert(inputElements[i].hasChildNodes()); 

 var selectElements=document.getElementsByTagName(“select”);
 alert(selectElements[0].hasChildNodes())

var inputElements=document.getElementsByTagName(“input”);
for(var i=0;i<inputElements.length;i++){
     alert(inputElements[i].hasChildNodes());
}
 

十、根节点

有三种特殊的文书档案属性可用来访谈根节点:
document.documentElement
document.body
先是个属性可回到存在于 XML 以及 HTML 文书档案中的文档根节点。
其次个属性是对 HTML 页面包车型客车奇怪增加,提供了对 <body>
标签的直接待上访谈。

 

 

十一、DOM节点音信

各类节点都富有包罗着关于节点某个音信的质量。这几个属性是:
nodeName(节点名称)

 

nodeName 属性含有有个别节点的称号。
var name = node.nodeName;
要金天点的 nodeName 是标具名称
属性节点的 nodeName 是性质名称
文本节点的 nodeName 永久是 #text
文书档案节点的 nodeName 永世是 #document
评释:nodeName 所蕴涵的 html 成分的竹具名称永久是大写的

 
nodeValue(节点值)

nodeValue:重临给定节点的此时此刻值(字符串)
 假若给定节点是壹天性质节点,再次回到值是那性情格的值。
 借使给定节点是一个文件节点,重返值是这一个文件节点的剧情。
 借使给定节点是叁个因晚秋点,再次回到值是 null
 nodeValue 是三个 读/写 属性,但无法对成分节点的 nodeValue
属性设置值,
    但足以为文本节点的 nodeValue 属性设置一个值。
   var li = document.getElementById(“li”);
   if(li.firstChild.nodeType == 3)
      li.firstChild.nodeValue = “国庆60年”;

nodeType(节点类型)

nodeType:重临三个卡尺头,那一个数值代表着给定节点的类型。
nodeType 属性再次回到的整数值对应着 12 种节点类型,常用的有二种:
Node.ELEMENT_NODE    —1    — 成分节点
Node.ATTRIBUTE_NODE  —2    — 属性节点
Node.TEXT_NODE       —3    — 文本节点
nodeType 是个只读属性

 

DOM: DOM= Document Object
Model,文书档案对象模型,DOM能够以一种独立于阳台和语言的法子访谈和修改一个文书档案的内容和结构。换句话说,那…

相关文章