JavaScript操做BOM

  什么叫DOM?

DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C出台的推荐标准,每个浏览器都有一些细微的差别,其中以Mozilla的浏览器最与标准接近。单纯的Javascript要结合DOM才能做DHTML编程,才能做出漂亮的效果、应用于WEB。


open() 打开一个窗口。用法:open(<URL字符串>, <窗口名称字符串>, <参数字符串>);
<URL字符串>:描述所打开的窗口打开哪一个网页。如果留空(''),则不打开任意网页。

语法:window.open();


 window 窗口对象最大的对象,它描述的是一个浏览器窗口。一般要引用它的属性和方法时,不需要用"windo
w.ox" 这种形式,而直接使用“OOX”。一个框架页面也是一个窗口。 

语法:window.属性名 = “属性值”


close() 关闭一个已打开的窗口。

用法:window.close() 或 self.close():关闭本窗口;

   <窗口对象>.close():关闭指定的窗口。

语法:window.close(); 


改变元素的内容。对象.innerHTML="新的文本内容";

通过点击改变<p>段落标签的内容,代码如下:

<p id="aixuexi">我爱学习--喜欢学习,就与大家一起来分享你的经验与技巧。。。。</p>

<button  onclick="changeText();">点击更改元素内容</button>

<script type="text/javascript">

function changeText(){

alert("hello world");

 var aixuexi=document.getElementById("aixuexi");

 aixuexi.innerHTML="我爱学习 http://www.52aixuexi.com";

}

</script>


1. getElemenById

 基于唯一id获取,任何HTML元素可以有id属性,在文档中该值必须唯一。

一、document.getElementById()    根据Id获取元素节点

代码如下

 
    <div id="div1">
        <p id="p1">
            我是第一个P</p>
        <p id="p2">
            我是第二个P</p>
    </div>
    
    window.onload = function () {
            var str = document.getElementById("p1").innerHTML;
            alert(str);        //弹出    我是第一个P
        }

2. getElementsByName

 基于name属性的值选取HTML元素。


   <div id="div1">
        <p id="p1">
            我是第一个P</p>
        <p id="p2">
            我是第二个P</p>
        <input type="text" value="请输入值" name="userName" />
        <input type="button" value="确定" onclick="fun1()">
    </div>
        
        function fun1() {
            var username = document.getElementsByName("userName")[0].value;
            alert(username);    //输出userName里输入的
        }
        }

3. getElementsByTagName

1.4. getElementsByClassName

 通过css类选取元素

5. querySelectorAll()

 终极的选取元素的办法,非常强大的技术,等效于jquery中的$()方法。


Dated对象

month:用英文表示月份名称,从January到December

mth:用整数表示月份,从(1月)到11(12月)注意:要加1

dd:表示一个月中的第几天,从1到31

yyyy:四位数表示的年份

hh:小时数,从0(午夜)到23(晚11点)注意:要加1

mm:分钟数,从0到59的整数  注意:要加1

ss:秒数,从0到59的整数 注意:要加1

ms:毫秒数,为大于等于0的整数    注意:要加1


                 Date 对象的常用方法

getDate( )                 返回Date 对象的一个月 中的每一天,其值为1~31

getDay( )                  返回Date 对象的星期中的每一天,其值为0~6

getHours( )               返回Date 对象的小时数,其值为0~23

getMinutes( )            返回Date 对象的分钟数,其值为0~59

getSeconds( )           返回Date 对象的秒数,其值为0~59
 
getMonth( )              返回Date 对象的月份,其值为0~11

getFullYear( )            返回Date对象的年份,其值为四位数

getTime( )                返回自某一时刻(1970年1月1日)以来的毫秒效


例:显示当前的日期和时间

[html] view plain copy
  1. <html>  
  2. <body><script type="text/javascript">  
  3. document.write(Date())  
  4. </script>  
  5. </body>  
  6. </html>  

例:函数getDay()

使用getDay()函数和一个数组来写出星期几

[html] view plain copy
  1. <html>  
  2. <body><script type="text/javascript">  
  3. var d=new Date()  
  4. var weekday=new Array(7)  
  5. weekday[0]="星期一"  
  6. weekday[1]="星期二"  
  7. weekday[2]="星期三"  
  8. weekday[3]="星期四"  
  9. weekday[4]="星期五"  
  10. weekday[5]="星期六"  
  11. weekday[6]="星期七"  
  12. document.write("Today it is " + weekday[d.getDay()])  
  13. </script>  
  14. </body>  
  15. </html> 
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页