CSS dom 和访问HTML的方法

节点操作：访问、属性、创建

（1）节点的访问：firstChild、lastChild、childNodes、parentChild(父子节)

              可以使用元素对象的方法进行代替：getElementById()、getElementsByTagName()

（2）节点属性的操作：setAttribute()、removeAttribute()、getAttribute()

（3）节点的创建、删除、追加：

创建节点：document.createElement(tagName)

              删除节点(必须父节点下的子节点才能被删除)：parentObj.removeChild(nodeObj)

              追加节点：parentObj.appendChild(nodeObj);

 

CSS DOM

核心：就是给一个元素对象，增加样式(外观)。

概述：每一个HTML标记都有一个style属性，它对应元素元素的style属性，该style属性是一个对象。

       Style对象有哪些属性：style对象的属性，与CSS中的属性一一对应。

       obj.style.border = “1px solid #FF0000”

       obj.style.width = “400px”; //CSS一定要加单位

       obj.style.position = “absolute”;

      

 

<img id=“img”  />是一个HTML标记，它的属性有：src、 width、height、alt、border、style、title等

每一个标记都对应一个元素对象，元素对象的属性与标记的属性一模一样。

var obj = document.getElementById(“img”);

obj.src = “images/bg.gif”;

obj.width =400;

obj.border =1;

obj.style = “padding:20px;”

 

CSS属性与style对象的属性的转换问题

（1）如果是一个单词的属性，CSS与style属性一模一样；如：obj.style.width = “400px”

（2）如果是多个单词的属性，转成style对象属性时，转换规则是：第一个单词全小写，后面的单词首字母大写，并且去掉中间的连接线（-）

       举例：

                     background-color   转换后     obj.style.backgroundColor= “#FF0000”

                     font-size          转换后     obj.style.fontSize = “18px”

                    

       //获取id=box的对象

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

       //给id=box的对象增加样式

       obj.style.width = "400px";

       obj.style.height = "300px";

       obj.style.border = "2px dotted #ccc";

       obj.style.backgroundColor = "#f0f0f0";

       obj.style.margin = "50px auto";

       obj.style.fontSize = "24px";

       obj.style.color = "#FF0000";

 

 

HTML DOM

一、HTML DOM的特性

       （1）每一个HTML标记，都对应一个元素对象。每个标记，都是一个对象，是一个节点。例如：<img>对应一个img对象，一个<table>标记，对应一个table对象，一个<form>标记，对就form对象等。

       （2）HTML标记的属性，与元素对象的属性一模一样。

              <img>标记属性：src、width、border、height等

              imgObj.src = “images/bg.gfi”;

              imgObj.width = 400;

              imgObj.height = 300;

              imgObj.border = 2;

 

 

二、访问HTML元素的方法总结

1、通过document对象的getElementById()方法来访问，返回一个对象

       <div id=”box”></div>

       var obj = document.getElementById(“box”);   //获取对象

       var img = document.createElement(“img”);    //  创建节点

       img.src = “images/img01.jpg”;   //使用元素对象的属性

       img.border = 2;

       img.style.padding= “10px”;  //使用style对象来增加样式

       img.style.float = “left”;

       obj.appendChild(img); //将img节点，追加到id=box中去

2、通过父元素的getElementsByTagName()方法来访问，返回一个数组对象

       语法结构：var arrObj =document.getElementsByTagName(“li”)

       功能描述：取得标记为<li>的一个数组(标记列表)。

       举例：取得一个<ul>标记中的所有的<li>标记

              //获取id=ul的对象

              var ulObj =document.getElementById("ul");

              //取得所有的li对象的一个数组

              var arrLi = ulObj.getElementsByTagName("li");

              //修改第二个和第四个li的样式

              arrLi[1].style= "font-size:24px;color:#ff0000;";

              arrLi[3].style.textDecoration= "underline";

 

3、通过name属性来访问（一般用于表单元素）

       onsubmit事件：当单击“提交按钮”时，发生的事件。事件的返回值，直接决定默认动作的执行。

       onsubmit的返回值，如果为true或空，则表单提交；如果为false，则阻止表单提交。(下午详细讲)

<form name="form1"action="login.php" method="post" οnsubmit="return checkForm()">

    用户名：<inputtype="text" name="username" />

    密码：<inputtype="password" name="password" />

    <inputtype="submit" value="提交表单" />

</form>

<script type="text/javascript">

function checkForm()

{

    //取到表单中各元素

    if(document.form1.username.value == "")

    {

           window.alert("用户名不能为空");

           returnfalse;

    }elseif(document.form1.password.value.length == 0)

    {

           window.alert("密码不能为空");

           returnfalse;

    }else

    {

           returntrue;

    }

}

</script>

 

元素对象的属性

tagName：取一个标记的名称，同 nodeName 一样；

innerHTML：指标记对中的HTML文本(含有HTML标记的文本)，一般指双边标记；比如：<h2>二级标题</h2>

style：对应HTML标记的style属性；

id：对应HTML标记的id属性；

offsetWidth：指元素的宽度，不含滚动条中的内容；

offsetHeight：指元素的高度，不含滚动条中的内容，是只读属性；

scrollWidth：指元素的总宽度，含滚动条中的内容；

scrollHeight：指元素的总高度，含滚动条中的内容；

scrollTop：指内容向上滚动进去的距离，如果没有滚动条，则值为0；

scrollLeft：指内容向左滚动过去的距离，如果没有滚动条，则值为0；

 

onscroll事件：当内容滚动时，发生的事件。

综合案例：书读快递

核心代码：

var timer = window.setInterval("scrollUp()",50);

function scrollUp()

{

       if(dome.scrollTop >= dome.offsetHeight)

       {

              dome.scrollTop= 0;

       }else

       {

              dome.scrollTop++;

       }

}

 

Event DOM

主要目的：实现鼠标或键盘与网页进行交互。

实例：通过鼠标单击图片，实现放大图片

<img id=“img01” src=“images/01.jpg” onclick=“changeBig()”  />

function changeBig()

{

       //先取得对象

       Var obj = document.getElementById(“img01”);

       //将图片的宽度修改为原始大小的2倍

       obj.style.width = obj.offsetWidth*2;

}

 

二、事件和事件句柄

       什么是事件呢？一般指鼠标干什么了，鼠标的动作。比如：单击(click)、双击(dbclick)、鼠标放上(mouseover)、鼠标移开(mouseout)等

       什么是事件句柄？每个事件都对应一个事件句柄属性，该属性是HTML标记的事件属性。

              单击(click)   ——  事件句柄属性 onclick

              双击(dbclick)  ——  事件句柄属性 ondbclick

              鼠标放上(mouseover)  ——  事件句柄属性 onmouseover

 

三、事件模型的分类

事件模型分类：基本事件模型、DOM事件模型、IE事件模型

1、基本事件模型：定义了一些常用事件。

       onclick单击事件

       ondbclick双击事件

       onload网页加载完成，一般用于<body>元素

       onchange：当内容发生改变时，一般用于选择上传文件

       onscroll：当移动滚动条时(只要可能出现滚动都可以)

       onmouseover：当鼠标放上时

       onmouseout：当鼠标移开时

       onsubmit：当单击“提交按钮”时（用于submit按钮）

       onreset：当单击“重置按钮”时(用于reset按钮)

       onfocus：当文本框获得焦点(鼠标光标在文本框中点击)

       onblur：当文本框失去焦点(鼠标光标在文本框之外点击)

       onselect：更改下拉列表中的内容时(用于select表单元素)

2、事件属性的应用

       （1）每个HTML标记都有事件句柄属性。onClick是HTML标记属性，不分大小写。

                     例如：<img src=“images/01.jpg” onClick=“init()” />

       （2）HTML标记对应的元素对象也具有事件句柄属性，这个属性必须全小写，因JS区分大小写

                     obj.οnclick= init;    //  init是一个函数的地址，而不能加小括号

                     functioninit(){

                            window.alert(“OK”);

}

注意：（1）元素对象绑定事件的名称必须全小写；（2）元素对象的事件必须调用一个函数，可以是普通函数，也可以是匿名函数。

 

3、事件返回值

       事件返回值，对有些事件，会影响默认动作的执行。如：onclick和onsubmit

      

 上图说明：

1)     当单击<a>时，就将调用show()函数

2)     在show()中根据用户的不同选择，返回不同值。返回的值有两个：true和false。

3)     将show()返回的值，再一次返回onclick事件

4)     onclick事件根据true或false判断，是否要执行默认动作(打开网址)。如果为false，会阻止默认动作执行，为其它则默认动作会继续执行。

 

 

综合案例(当当网)：当当推荐“显示/隐藏”

functionshopping_commend_show(obj)

{

       //取得id=shopping_commend_sort的对象

       var content =document.getElementById("shopping_commend_sort");

       if(content.style.display=="block")

       {

              content.style.display="none";

              obj.src = "images/shopping_arrow_up.gif";

       }else

       {

              content.style.display="block";

              obj.src ="images/shopping_arrow_down.gif";

       }

}

 

 

表格对象的属性

rows：行的列表，应该是一个数组。例如：tableObj.rows

cells：单元格列表，应该是一个数组。例如：trObj.cells