【原】JavaScript入门基础教程（6）DOM属性和样式的操作

昨日回顾

         BOM         Browser Object Model浏览器对象模型

                  window    顶级对象

                   常用的属性：

                   innerWidth:      获取窗口显示内容的宽度

                   innerHeigth:    获取窗口显示内容的高度

                   name:                获取新打开窗口的name

                   常用的方法：

                            alert():

                            prompt();

                            close();

                            confirm();

                            print();

                            open(url,name,options);

                                     options:

                                     width:    设置宽度

                                     height:    设置高度

                                     left:      设置右

                                     top:      设置下

                                     resizeable:                          yes|no

                                     menubar:                           

                                     scrollbar:

                                     toolsbar:

                                     defaultstatus:

                            var myWin=window.open(“http://www.”,”window01”,”width=100,height=100”);

         myWin.close()

                   setInterval(函数名,毫秒数);

                            设置定时器，在指定的”毫秒数”时间间隔重复执行

                            返回一个定时器对象

                   clearInterval(定时器对象名);

                            清除指定的定时器

                   setTimeout(函数名,毫秒数);

                            设置延时器，在指定的”毫秒数”后，执行一次

                   claerTimeout(延时器名);

                            清除指定的延时器

         screen:显示器对象

                   availWidth:       当前分辨率下屏幕的宽度

                   availHeight:     当前分辨率下屏幕的高度

                   colorDepth:      屏幕的颜色深度

         navigator：浏览软件对象

                   appName:                  浏览器内核软件名

                   appVersion:               浏览器内核版本号

                   userAgent:                浏览器软件的完整信息

         location:  记录了URL完整信息

http://www./admin/good/index.html？name=lisi&age=28#map1

                   protocol:           协议                   http:

                   hostName:       主机名              www.

                   host:                  主机名：端口号

                   port:                   端口号

                   pathName:       路径名              admin/good/index.html

                   search:              查询字符串              ？name=lisi&age=28

                   hash:                  锚点名                       #map1

                   href:设置页面跳转

                   window.location.href=http://www.

         histroy:    记录了当前进程内用户浏览过的网页的记录

                   常用的属性：

                   length:

                   常用的方法：

                   back();               go(-1)

                   forward();         go(1)

                   go();                   go(3)

         DOM         Document Object Model文档对象模型

         获取一个DOM中的节点：

                   核心DOM操作：适合操作XML与HTML文档

         DOM节点树中节点类型：

                   document node：             文档节点

                   element node:                   元素节点，HTML各种标签

                   attribute node:                  属性节点 HTML标签的属性

                   text node:                           文本节点         内容

                   comment node:                 注释节点<!- - 内容- ->

                   var nodeHtml=document.firstChild                   html

                   var nodeHead=nodeHtml.firstChild                  head

                   var nodeBody=nodeHtml.lastChild                    body

                   table的相关方法：

                   tBodies:            获取一个table中的tbody集合

                   rows:                 返回tr的集合(类似数组，可以使用操作数组的方法进行操作)

                   cells:                  返回td的集合

                   对节点属性的操作：

                            getAtrribute(“属性名”);

                            setAttribute(“属性名”,”属性值”);

                            removeAttribute(“属性名”);

                            注意:IE 需要DTD的声名以上对节点属性的操作才会生效。

                   对节点的操作：

                            var objNew=document.createElement(“标签名”);                  创建一个节点对象        

注意：只有document才有创建节点的权利，新创建的节点们于内在中，并不在页面上

                            父对象.appendChild(节点对象名);

                            父对象.removeChild(节点对象名);

                  关于节点通用的属性：

                   nodeName:

                   nodeValue:

                   firstChild:

                   lastChild:

                   nextSibling:

                   previousSibling:

                   parentNode:

                   childNodes:

         document.write();

DOM 操作

         id、class、name

         获取一个节点(对象)

         方法1：通标签的id值获取一个对象

         document.getElementById(“id值”);

         只能是document的方法

         方法2：通过标签的标签名获取一组对象

         父对象.getElementsByTagName(“标签名”);

         通过标签名获取对象,就算只获取到一个对象，也会组织成集合(数组)

         父对象.getElementsByTagName(“*”);

                   获取父对象下的所有子对象

         方法3：通过标签的name值获取一组对象

                   name属性一般是用于form表单元素，name是为了向前兼容，id是向后兼容

         document.getElementsByName

                  IE只能获取到指定name值的表单元素

                   FF可以获取到指定name值的任意元素

         方法4：通过标签的class值获取一组对象()

                   自行封装getByClass方法(此方法不是系统自带)

                            <script type="text/javascript">

                   window.onload=function(){

                            //你需要在所有文档加载完毕后执行的代码

                            function getByClass(objParent,clsName){

                                     //根据外部传递进来父对象obj和clsName属性值，获取所有的class属性为clsName的所有的

                                     var objs=objParent.getElementsByTagName("*");

                                     var arr=[];

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

                                               if(objs[i].getAttribute("class")==clsName){

                                                        arr.push(objs[i]);

                                               }

                                     }

                                     return arr;

                            }

                            var obj=document.getElementById("box");

                            alert(getByClass(obj,'cls1'));

                   }

         </script>

      属性和样式的操作

         width:      设置html标签的属性

         objTab.width=””;

         objTab.border=”1”

         height:    

         objTab.heigth=”300”

         style:        设置行内样式

         objTab.style.width=””

<div style=”width:200px;height:300px;border:1px solid red;”></div>

objDiv.style.width=”300px”;

objDiv.style.height=”400px”;

objDiv.style.border=”2px solid red”;

objDiv.sytle=”border:1px solid red”;                 //此种写法存浏览器不兼容问题

         CSS样式的相应脚本

如果是由二个及以上的单词组成，对应的js脚本为小驼峰

background-color	backgroundColor	font-famly	fontFamily
border-color	borderColor	background-image	backgroundImage

         className:      为对象设置样式类名

objDiv.className=”样式类名”;