关于JavaScript Dom

 

1、dom的定义 document object model(文档对象模型)

2、为什么叫文档对象模型呢?
   dom 可以将标记型(html xml)文档转换为对象
       可以将标记性文档的每一个标记都转换为对象
       将文档或者是标记封装成对象后,对象提供了更多属性和方法操作的文档

3、节点的概念
    在dom的结构图中，我们可以看到，图有元素节点构成
   
     每一个html元素都是一个节点
     节点有可以分为：文本节点、元素节点、属性节点
---------------------------------------------------
DHTML简介
 1、DHTML就是动态的html,是多个技术的综合
 
   html:封装的数据对象
   css:对数据对象进行修饰；
   dom:提供对数据对象访问的方法；
   javascript:实现对对象的灵活操作，是"粘合剂" 

BOM的概念
 BOM browser object model窗口对象模型 
--document 文档对象
--history 历史对象
--location 地址对象
--screen 屏幕对象
...

----------------------------------------------------------
dom 访问节点的几种方法
1、document.getElementById("对象的id");独立访问某一个对象的时候使用

2、document.getElementsByName("对象的name");返回的是一个数组(节点的列表)

3、document.getElementsByTagName("标签名称");返回的也是一个对象数组

 

 小知识点:

   ①parseInt:解析一个字符串并返回一个整数。

   a=parseInt(document.getElementById("num1").value);

 

  ②eval() 函数可计算某个字符串，并执行其中的的 JavaScript

  ③isNaN(num)判断num是否是数字

  ④indexOf() 方法可返回某个指定的字符串值在字符串中首次出现

的位置。

    查找子字符串(匹配字符串)

                      查找到了，返回字符串出现的位置

                      没找到    返回 -1

 

  ⑤Math.random() 来返回 0 到 1 之间的随机数。

  ⑥Math.round()。 返回整数

 

  var result=Math.round(Math.random()*10);返回0-10整数

      Math.round(Math.random*(n-m)+m)产生m-n之间的整数：

 

  ⑦Math.max() 来返回两个给定的数中的较大的数。

    Math.min() 来返回两个给定的数中的较小的数。

 

  ⑧ charAt():返回指定位置的字符串

            substr():字符串的截取,可加两个参数，形如:substr 

                   (2,2)第二个位置 长度；也可以是一个参数   

                 ，则表示从这个位置截取到字符串结束

 

            toLowerCase():把字符串转换为小写

 ⑨  <p id="testid">这里放了一个p</p>

 document.getElementById("testid").style.display="block";

 document.getElementById("testid").style.display="none";

 

 ⑩var p=document.getElementById("p");

   p.style.border="1px solid red";-->js设置css样式加边框

 

 11)

   1、document.getElementById("对象的id");独立访问某一个对

象的时候使用

   2、document.getElementsByName("对象的name");返回的是一个

数组(节点的列表)

    var p=document.getElementsByName("p1");--><p

name="p1"></p>

   3、document.getElementsByTagName("标签名称");返回的也是

一个对象数组

    var p=document.getElementsByTagName("p");p标签

12)moveBy() 方法可相对窗口的当前坐标把它移动指定的像素。

   (360浏览器不支持IE和FF支持)

     for(var i=0;i<200;i++){

       

        //向右斗10

        moveBy(10,0);

       

        //向下斗10

        moveBy(0,10);

       

         //向左斗10

        moveBy(-10,0);

       

         //向上斗10

        moveBy(0,-10);

       

        }

 

13) 见dom-childnode0num.html

     parentNode父节点

     firstChild第一个子节点

     lastChild最后一个子节点

     nodeType节点类型 (返回1 元素节点 3 文本节点)

     nodeValue节点的值

     childNodes.length获取节点的个数

 alert(document.getElementById("test").childNodes.length);

 

14)display:block显示||none不显示

  document.getElementById("testid").style.display="none";

 

 15)//获取所有的对象

      var a=document.all;

     

      var str="";

     

       for(var i=0;i<a.length;i++){

          

           str+="---"+a[i].tagName+"<br>";

            

            }

       document.write(str);

 

通过子节点设置父节点 小案例：

   <script type="text/javascript">

 

   function getTest1(){

      //设置id="test1"的对象的边框颜色是1像素的红色实线  

        document.getElementById("test1").style.border="1px solid red";

        

   }

  

   //测试调用父对象

  

    function setParent(){

          

         /*

           1、先获取一个有父节点的对象

            2、使用parentNode 获取父对象

        

         */  

         var p1=document.getElementById("test1");

       //设置父节点

         p1.parentNode.style.border="1px solid pink";

       //设置第一个子节点

        p1.firstChild.style.border="1px solid green";

           }

          

       function getlastnode(){

            //设置最后一个子节点

            var lastnode=document.getElementById("test");

            //alert(lastnode.lastChild.tagName);

            

            lastnode.lastChild.style.border="1px solid black";

            } 

            

 

//取出子节点的值

    function getvalue(){

     

        var p=document.getElementById("test2");

        //元素节点类型-->1

        alert("p节点的类型"+p.nodeType);

         alert(p.firstChild.nodeValue);

         //文本节点-->3

         alert("p->firstChild:"+p.firstChild.nodeType);

   }

  

   //获取节点个数

   function getNodes(){

        

         alert(document.getElementById("test").childNodes.length);

       

         }

</script>

</head>

<body>

 <div id="test">

   <p id="test1"><b>这是一个p</b></p>

   <p id="test2">这又是一个p</p>

 </div>

 <input type="button" value="测试第一个p节点" οnclick="getTest1()">

 <input type="button" value="测试p父节点和p子节点<b>" οnclick="setParent()">

 <input type="button" value="测试最后一个子节点" οnclick="getlastnode()">

  <input type="button" value="获取子节点的值" οnclick="getvalue()">

   <input type="button" value="获取子节点的个数" οnclick="getNodes()">

</body>