javascript dom学习笔记_odiv.children[index].style.backgroundcolor = cols[-CSDN博客

http://blog.csdn.net/zhoulenihao/article/details/11099455

一、DOM模型概述
1.全称：Document Object Model,文档对象模型

2.DOM的作用：用来将标记型文档(什么叫标记型文档？文档中除了标签、属性就是内容)封装成对象，并将
标记型文档中的所有内容(标签、文本、属性等)都封装成对象。
封装成对象的目的是为了更方便的操作这些文档以及文档中的所有内容。因为
对象的出现，就可以有属性和行为被调用。

3.理解：
   文档：标记型文档
   对象：封装了属性和行为的实例，可以被直接调用。
   模型：所有标记型文档都具备的一些共性特征(标记型文档所具有的共性有哪些呢？包括标签、属性和标签中封装的数据)的体现。

4.DOM解析的特点
   > 只要是标记型文档，DOM技术都可以对其进行操作，比如HTML、XML
   > 操作方式：先对文档进行解析，将标记型文档解析为一棵树，并将树中的内容封装为节点对象。
   > DOM操作的优势：对树种的节点进行增删改查比较方便
   > DOM操作的弊端：要将DOM一次性加载到内存，意味着如果文档体积较大，会较为浪费内存空间

5.解析DOM文档的方式：
   > DOM解析，W3C的标准
   > SAX解析：一种民间组织定义的方式，非W3C标准
       特点：读取速度快，基于事件驱动(读取文档的时候一行一行的读，不将文档全部加载到内存，
              以开始标签为开始事件，结尾标签为结束事件事件)，读取数据的速度非常快，但是不能对标记进行增删改，
              因为它读取数据的时候是按照顺序读的，不会回头去操作。

6.DOM解析的三级模型：
   > DOM level1模型：将html文档封装成了对象
   > DOM level2模型：在level1的基础上，加入了名称空间的功能
    > DOM level3模型：能够解析xml了，将xml封装成了对象

   浏览器默认是dom解析吧？如果是sax解析的话，有时候忘了写一个标签的结尾标签的话内容应该解析不出来，但实际上是能显示的

7.DHTML
   概念：动态的HTML，不是一门语言，是多项技术综合体的简称
   包含的技术：HTML,CSS,JavaScript,DOM
   各自的职责：
       HTML:负责提供标签对数据进行封装，目的是便于对该标签中的数据进行操作，这是DHTML的基础
       CSS:负责提供样式属性，对标签中的数据进行样式的定义
       DOM:负责将标记型文档中所有内容进行解析，并封装成对象，方便操作
          JS:负责对DOM封装后的对象进行逻辑操作，比如判断某个节点是否含有哪些元素，一次性往某个标签中添加多个
             子标签等等，这么一些逻辑操作都由它来提供。

二、BOM模型：

1.全称：Browser Object Model,浏览器对象模型

2.BOM模型的作用：方便于操作浏览器，而浏览器对应的对象是window，所以说白了BOM模型就是对window对象的操作

3.window对象
   window对象常见对象：
       navigator:该对象能够获取浏览器的各种信息，详细信息需要参考DHTML文档
       location:包含当前URL信息，类似于java中的URL类
       history:包含了用户已浏览的URL信息

   window对象常见方法：一般写这些方法的时候，可以不用在前面加window.
       confirm(str):确认窗口，返回一个boolean类型的值，可以用来根据用户的选择做一些操作

       setInterval(code,time):设置每隔多长时间执行一个表达式，会执行多次，如果不清除掉就会一直执行
           code:需要执行的代码或函数名称
           time:每隔多长事件执行一次code

       clearInterval(iIntervalID):清除表达式的自动执行功能
           iIntervalID:需要清除的东东，这个其实也是setInterval的返回值，比如:var iIntervalID = setInterval(code,time);

       setTimeout(code,time):设置隔多长时间执行一个表达式，只会执行一次代码
           code:需要执行的代码或函数名称
           time:每隔多长事件执行一次code

       clearTimeout(iTimeoutID):清除表达式的自动执行功能
           iTimeoutID:也是需要清除的东东，这个其实也是setTimeout的返回值，比如:var iTimeoutID = setTimeout(code,time);

       moveBy(x,y):将浏览器窗口进行移动，在浏览器原来的坐标的基础上距离屏幕左边的距离增加x像素，距离屏幕上边的距离增加y像素，
                可以利用这个方法，制作一个效果，让浏览器在不停地震动(右、下、左、上这样的顺序移动即可制作这样的效果)，
                类似QQ的那种窗口抖动效果，
                示例如下：

[html] view plain copy

<script type="text/javascript">
function vibrationWindow(){
for(var x=0; x<16; x++){
window.moveBy(20,0);
window.moveBy(0,20);
window.moveBy(-20,0);
window.moveBy(0,-20);
}
}
</script>

                function vibrationWindow(){
               for(var x=0; x<16; x++){
                       window.moveBy(20,0);
                       window.moveBy(0,20);
                       window.moveBy(-20,0);
                       window.moveBy(0,-20);
                   }
                    }

       moveTo(x,y):跟moveBy方法类似，只不过这个是直接将浏览器窗口定位到横轴为x，纵轴为y的地方

       open(sURL,,sName,sFeatures,bReplace):打开一个浏览器窗口
           sURL:打开后浏览器连链接到的url地址，比如要从某个地址获取数据的话就可以指定这么一个url
           sName:打开的方式，告诉浏览器你要打开的新窗口是重新开一个新的，还是就在当前浏览器内打开，有多种方式可供选择的
           sFeatures:对你打开的浏览器进行设置
           bReplace:是否要对打开的浏览器中的内容进行替换，有true和false两个值，这个属性一般都不写，用的比较少

       close():关闭当前浏览器窗口

   window常见事件：
       onbeforeunload:页面将要被卸载前触发(页面什么时候卸载呢？关闭浏览器的时候或者刷新的时候，因为刷新的话要将之前的内容卸载然后重新加载一次页面)

       onload:在浏览器完成对象的装载后立即触发，也就是页面加载完毕后触发

       onunload:页面被卸载时触发(IE10对此方法好像不支持兼容性有点小问题)，它在onbeforeunload之后执行

三、JavaScript书写规范

1.对于对象，都用o开头+名称表示，比如：
var oElement = document.getElementById(sIDValue);
由于document.getElementById(sIDValue);返回的是一个节点对象，所以用oElement接收

2.对于变量，都用类型的首字母开头+名称，比如：
var sName = "张三"; //张三是一个名称，而且是字符串类型的，所以用string类型的开头字母s+name表示这个名称的变量

四、DOM模型操作文档对象
1.常见获取节点的三种方式
   1>getElementById():通过标签的id属性获取该标签节点。返回该标签节点
   2>getElementsByName():通过标签的name属性获取标签节点，返回一个标签数组
   3>getElementsByTagName():通过标签的标签名获取到标签节点，返回一个标签数组
2.每个节点都有三种属性：名称、类型、值
   名称：nodeName，节点名称，如果是div，那返回的肯定是div，就是标签的名称
   类型：nodeType，节点类型，1表示标签型节点，2表示属性节点，3表示文本节点
   值：对于标签型节点是没有值的，属性和文本节点是可以有值的。

3.通过节点关系获取节点：
   父节点：parentNode，该属性返回一个节点对象
   子节点：childNodes，该属性返回一个节点集合
   上一个兄弟：previousSibling，返回元素的上一个元素的节点对象
   下一个兄弟：nextSibling，返回元素的下一个元素的节点对象
   这里有个需要注意的地方：对于表格，也就是table元素，它的第一个儿子是tbody，而不是tr，不管你有没有在table下面定义
   这个tbody，table的第一个儿子都是tbody，孙子才是tr。
   建议：尽量少用兄弟节点，兄弟节点获取到的内容会因为浏览器的不同而解析方式不一样，主要是会解析出标签间的空白节点

4.创建元素并添加到另一个元素中
演示1：向一个层中添加一个按钮
   //创建按钮对象
   var oButNode = document.createElement("input");
   //设置按钮属性
   oButNode.type = "button";
   oButNode.value = "我是第一个被创建的按钮";
   //获取到需要添加按钮的层
   var oDiv1 = document.getElementById("div1");
   //往层里添加按钮
   oDiv1.appendChild(oButNode);
这里还有一种往元素里添加元素的方法，可以利用元素的innerHTML属性来添加，不过，这个每次添加都是重新覆盖，而appendChild
添加元素是屁股后面追加的操作。

演示2：向一个层中添加一些文本
   var oTest = document.createTextNode("我是要被添加的文本");
   var oDiv1 = document.getElementById("div1");
   oDiv1.appendChild(oTest);

5.删除节点:removeNode(bRemoveChildren)方法已经很少用了，一般都用如下方法
   删除自己：
   var oDiv = document.getElementById("div1");
   oDiv.parentNode.removeChild(oDiv);

   删除子节点中的第一个节点：
   var oDiv = document.getElementById("div1");
   var collChilds = oDiv.children;
   oDiv.removeChild(collChilds[0]);

6.替换克隆节点：
   oReplace = object.replaceChild(oNewNode, oChildNode)：替换节点，原来用的replaceNode，现在都用这个方法替代来做
   oClone = object.cloneNode(bCloneChildren)：克隆一个节点并返回出去，之所以需要克隆是因为有时候如果用到页面中的
   一个元素去替换另一个元素时，替换的元素相当于剪切操作，替换别人后，自己也没了，而克隆操作能够把他自己复制一份出去
   替换，这样替换后，原来的节点还是存在的。

五、新闻字体示例讲解
1.需求：
   设置新闻字体的大中小样式改变

2.基本思路：
   1>用标签封装新闻数据
   2>利用css定义一些页面样式
   3>确定事件源和事件，以及处理方式中被处理的节点。
       事件源：a标签，事件：onclick，被处理的节点：div-newtext
   4>既然要给超链接加入自定义的事件处理，就要先取消超链接的默认点击效果。
           可以使用给href设置：javascript:void(0)来完成。
   5>，用js处理页面的行为。
   处理代码如下：

[html] view plain copy

<script type="text/javascript">
function changeFont(size,clr){
/*
* 既然要对div newstext中的文本字体进行操作。
* 必须要先获取div节点对象。
*
*/
var oNewsText = document.getElementById("newstext");
//获取oNewText节点的style样式属性对象。
oNewsText.style.fontSize = size;
oNewsText.style.color = clr;
}
</script>

   页面内容如下:

[html] view plain copy

<h1>这是一个新闻标题</h1>
<hr/>
<a href="javascript:void(0)" onclick="changeFont('24px','#9ce9b4')">大字体</a>
<a href="javascript:void(0)" onclick="changeFont('18px','#cdd8d0')">中字体</a>
<a href="javascript:void(0)" onclick="changeFont('14px','#f1b96d')">小字体</a>
<div id="newstext" class="norm">
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
</div>

3.代码优化
   1>思考：
        /* 如果根据用户点击所需要的效果不唯一。
         * 仅通过传递多个参数虽然可以实现效果，
         * 但是
         * 1，传参过多，阅读性差，
         * 2，js代码和css代码耦合性高。
         * 3，不利于扩展。
         *
         * 解决：
         * 将多个所需的样式进行封装。
         * 封装到选择器中，只要给指定的标签加载不同的而选择器就可以了。
         */

   2>优化后的代码如下：
       2-1>样式代码：

[html] view plain copy

<style type="text/css">
#newstext{
width:500px;
border:#00ff00 1px solid;
padding:10px;
}
/*预定义一些样式封装到选择器。一般使用类选择器。*/
.norm{
color:#000000;
font-size:16px;
background-color:#cdd8d0;
}
.max{
color:#808080;
font-size:28px;
background-color:#9ce9b4;
}
.min{
color:#ffffff;
font-size:12px;
background-color:#f1b96d;
}
</style>

       2-2>JS代码：

[html] view plain copy

<script type="text/javascript">
function changeFont(selectorName){
var oNewsText = document.getElementById("newstext");
oNewsText.className = selectorName;
}
</script>

2-3>页面代码：

[html] view plain copy

<h1>这是一个新闻标题</h1>
<hr/>
<a href="javascript:void(0)" onclick="changeFont('max')">大字体</a>
<a href="javascript:void(0)" onclick="changeFont('norm')">中字体</a>
<a href="javascript:void(0)" onclick="changeFont('min')">小字体</a>
<div id="newstext" class="norm">
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
</div>

六、DOM案例学习
1.好友列表案例

[html] view plain copy

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>好友列表演示</title>
<style type="text/css">
/*设置列表样式*/
div{
border:#000000 solid 1px;
width:80px;
}
div a{
text-decoration:none;
color:#4a1faf;
font-weight:bold;
}
ul{
list-style:none;
padding:0px;
margin:0px;
}
ul li{
text-align:center;
}
.open{
display:block;
}
.close{
display:none;
}
</style>
<!--
需求：模拟QQ的主界面，做一个用户组切换的效果
比如，点击我的好友组的时候，列出我的好友组下的所有用户，其他的所有组的内容隐藏起来
基本思路：
1，定义多个组，向组中添加内容
2，确定事件源
3，确定事件
4，编写js代码控制一个组显示时其他所有组隐藏
-->
<script type="text/javascript">
/*
* 展开好友列表
* @param node 事件源
*/
function list(node){
//获取所有的ul标签
var collUl = document.getElementsByTagName("ul");
//获取事件源对应的那个ul标签
var oUl = node.parentNode.getElementsByTagName("ul")[0];
//将事件源对应的ul标签的样式设置为open，将其他所有的ul标签的样式设置为close
for(var i=0; i<collUl.length; i++){
if(collUl[i] == oUl){
if(oUl.className == "open"){
oUl.className = "close";
}else{
oUl.className = "open";
}
}else{
collUl[i].className = "close";
}
}
}
</script>
</head>
<body>
<div>
<a href="javascript:void(0)" onclick="list(this)">我的好友</a>
<ul class="open">
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>赵六</li>
</ul>
</div>
<div>
<a href="javascript:void(0)" onclick="list(this)">我的好友</a>
<ul class="close">
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>赵六</li>
</ul>
</div>
<div>
<a href="javascript:void(0)" onclick="list(this)">我的好友</a>
<ul class="close">
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>赵六</li>
</ul>
</div>
</body>
</html>

2.表格常见操作：动态创建表格和删除表格行和列

[html] view plain copy

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Insert title here</title>
<style type="text/css">
/*定义表格和单元格样式*/
table{
border:#808000 solid 1px;
}
table tr td{
border:#808000 solid 1px;
margin:0px;
padding:0px;
}
</style>
<!--
需求：根据指定的行和列动态创建表格、删除表格的行或列
-->
<script type="text/javascript">
/*
* 创建表格方法一：创建一个1行1列的表格
*/
function createTable1(){
//创建一个表格对象
var oTabNode = document.createElement("table");
//创建一个tbody对象表格的儿子是tbody，tbody的儿子才是tr，传说中tr是table的儿子，
//但其实，tr是table的孙子，table的儿子是tbody
var oTbdNode = document.createElement("tbody");
//创建一个tr节点
var oTrNode = document.createElement("tr");
//创建一个td节点
var oTdNode = document.createElement("td");
//给单元添加一点内容
oTdNode.innerHTML = "我是单元格";
//建立各个节点的关系
oTrNode.appendChild(oTdNode);
oTbdNode.appendChild(oTrNode);
oTabNode.appendChild(oTbdNode);
//将创建好的表格节点添加到层中显示出来
document.getElementById("content").appendChild(oTabNode);
}
/*
* 创建表格方法二：根据用户指定的行和列动态创建表格
*/
function createTable2(){
//获取要创建表格的行
var sRowStr = document.getElementsByName("crtrows")[0].value;
//获取要创建表格的列
var sColStr = document.getElementsByName("crtcols")[0].value;
if(!sRowStr || !sColStr){
alert("要创建的表格的行或列不能为空！");
}
//创建一个表格元素
var oTabNode = document.createElement("table");
//设置单元格与表格的距离
oTabNode.setAttribute("cellspacing","0");
//设置单元格中内容与边框的距离
oTabNode.setAttribute("cellpadding","0");
for(var x=1; x<=parseInt(sRowStr); x++){
//向表格中添加一行
var oTrNode = oTabNode.insertRow();
for(var y=1; y<=parseInt(sColStr); y++){
//向行中添加一列
var oTdNode = oTrNode.insertCell();
//给单元格中添加内容
oTdNode.innerHTML = x+" - "+y;
}
}
document.getElementById("content").appendChild(oTabNode);
}
/*
* 删除表格中的一行或一列
*/
function delEle(){
//获取要删除的行索引
var iRow = parseInt(document.getElementsByName("delrows")[0].value);
//获取要删除的列索引
var iCol = parseInt(document.getElementsByName("delcols")[0].value);
//获取要操作的表格节点对象
var oTabNode = document.getElementsByTagName("table")[0];
if(!oTabNode){
alert("表格不存在");
return;
}
if(iRow){
//删除某行
oTabNode.deleteRow(iRow-1);
}else{
//删除列，实际上就是删除每一行中的某个单元格
for(var i=0; i<oTabNode.rows.length; i++){
var oTrNode = oTabNode.rows[i];
oTrNode.removeChild(oTrNode.cells[iCol-1]);
}
}
}
</script>
</head>
<body>
<div id="oper">
<input type="text" name="crtrows" />行 <input type="text" name="crtcols" />列
<input type="button" value="创建" onclick="createTable2()" />
<br/>
<input type="text" name="delrows" />行 <input type="text" name="delcols" />列
<input type="button" value="删除" onclick="delEle()" />
</div>
<div id="content">
</div>
</body>
</html>

3.复选框全选案例：

[html] view plain copy

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>全选功能演示</title>
<script type="text/javascript">
//全选方法
function checkAll(node){
var collCheckBox = document.getElementsByName("item");
for(var i=0; i<collCheckBox.length; i++){
collCheckBox[i].checked = node.checked;
}
}
//计算总金额
function getSum(){
var collCheckBox = document.getElementsByName("item");
var sum = 0;
//求和
for(var i=0; i<collCheckBox.length; i++){
if(collCheckBox[i].checked)
sum += parseInt(collCheckBox[i].value);
}
//将获取到的和赋值到文本框中显示
document.getElementsByName("sum")[0].value = sum;
}
</script>
</head>
<!--
需求：实现类似购物网站中的全选功能
思路：
1，定义多个复选框选项，并且设置相同的name值
2,定义全选复选框,并给其添加点击事件
3,当用于点击全选复选框的时候，设置所有复选框的状态跟全选复选框的状态一致
4,给计算金额的按钮添加点击事件
5,点击计算金额按钮时，先获取所有name属性为item的选中的复选框的按钮
6，获取选中复选框的value属性并转化为int类型
7，计算总金额并显示在文本框中
-->
<body>
<input type="checkbox" name="checkall" onclick="checkAll(this)" />全选<br/>
<input type="checkbox" name="item" value="4000" />联想笔记本：￥4000<br/>
<input type="checkbox" name="item" value="3500" />戴尔笔记本：￥3500<br/>
<input type="checkbox" name="item" value="3200" />华硕笔记本：￥3200<br/>
<input type="checkbox" name="item" value="8000" />苹果笔记本：￥8000<br/>
<input type="checkbox" name="item" value="4200" />三星笔记本：￥4200<br/>
<input type="checkbox" name="item" value="3700" />宏基笔记本：￥3700<br/>
<input type="checkbox" name="checkall" onclick="checkAll(this)" />全选<br/>
<input type="button" value="计算金额" onclick="getSum()" /> <input type="text" name="sum" value="" />
</body>
</html>