DOM总结

来源：互联网发布：centos 7 内核版本编辑：程序博客网时间：2024/05/21 07:19

DOM总结

DOM：文档对象模型document object model

DOM三层模型：

DOM1；将HTML文档封装成对象

DOM2：将XML文档封装成对象

DOM3：将XML文档封装成对象

DOM树：将HTML中的标签按照层级关系封装成节点对象

DOM的出现使静态的HTML页面的标签变为动态的可操作的节点对象

DHTML：动态的HTML，是HTML、CSS、DOM、JavaScript四种技术的综合体

HTML：封装页面数据

CSS：设置标签中的数据样式

DOM：将标签封装成对象

JavaScript：将三者进行融合，通过程序设计方式完成动态效果的操作

标记型文档一加载进内存，内存中就产生了相应的DOM树，由此产生的弊端就是，文档国大时，消耗资源。对于大型文档，可用SAX方式解析。

HTML文档中的层次关系，DOM树的层次结构

document HTML文档对象

|——head

|——title

|——base

|——meta

|——link

|——body

|——form

|——input

|——select

|——textarea

|——div

|——table

|——tbody 默认都有，不写也有

|——tr

|——td

|——th

|——a

……

将HTML文档及其中的标签都封装成对象，方便操作。

节点都有的属性：nodeName nodeType nodeValue

注意区分DOM代码中对象的属性和HTML、CSS代码中的属性写法上的不同

节点类型

标签型节点：nodeType为1，容器型节点的nodeValue为空null 没有值

文本型节点：名字#text 类型为3

注释型节点：#comment 类型为8

文档型节点：#document 类型为9

属性型节点：类型为2 属性可通过对象的attributes集合属性获取

节点关系

父节点：每个节点有且只有一个父节点通过节点parentNode属性获取

子节点：可以有多个通过节点childNodes属性获取子节点集合（数组）

兄弟节点：分上一个和下一个，通过previousSibling和nextSibling属性获取

注意页面中标签之间的空行也是文本节点，浏览器解析时可能出现也可能没有这个节点

获取节点的方法：

1、getElementById(HTML标签中定义的id值)

获取文档中指定id对应的标签对象，注意保证id值唯一；

如果多个标签id相同，获取的是id对应的第一个对象

var divObj = document.getElementById(“divid”);

divObj.style.backgroundColor=”blue”;注意DOM代码与CSS代码的不同

</script>

<html>

<div id=”divid” style=”background-color:red”>div内部数据</div>

style属性中的内容为CSS代码，注意区分DOM中的相同属性名称

</html>

2、getElementsByName(HTML标签中定义的name值)

获取文档中所有与name值相同的标签对象，封装为数组返回

3、getElementsByTagName(HTML标签名)

获取文档中与指定标签名相同的所有对象，返回数组

容器型标签中都有该方法，如div、table、p

每个对象都有一个集合属性all，可以获取该对象中的所有节点对象的引用，但是all属性不获取文本型节点和空行产生的节点；还有一个attributes集合属性，用来获取该对象的所有属性。

window对象：代表浏览器打开的一个窗口

window中的对象

document：窗口中的HTML文档 event：事件状态

history：历史记录 location：当前地址栏信息

navigator：关于浏览器的信息 screen：屏幕信息

navigator对象：window.navigator.href或者navigator.href

属性：appCodeName appName appVersion获取浏览器代码名称、名称、版本

platform获取操作系统名称

history对象：只有一个length属性

方法：back（） forward（） go（）都是从历史列表中装入URL

location对象：此对象的属性既可用来获取又可用来设置对应属性的值

属性：host获取或设置URL的主机名和端口号 hostname port

href ：URL protocol：协议 pathname：文件名或路径

search：href属性中问号后面的部分 hash：href属性中井号后的部分

location对象的任一属性改变后浏览器都将立即前往指定的URL

screen对象：

属性：availHeight和availWidth是系统屏幕的有效区域，不包括Windows的任务栏

height和width是系统屏幕的分辨率值

window对象方法：

alert：确定对话框

confirm：确定取消对话框，返回true或false

prompt(提示信息，[输入默认值])：可接收输入数据的对话框，返回输入的文本数据

moveBy(x, y)：使窗体根据指定的坐标值偏移窗口抖动效果

moveTo(x, y)：使窗体移动到指定坐标值

resizeBy(x, y)：窗体缩放指定偏移值 resizeTo(x, y)：窗体缩放至指定值

scroll(x, y)：将窗口滚动到距窗口左上角指定偏移值的位置

scrollBy(x, y)：将窗口滚动指定的偏移值

scrollTo(x, y)：将窗口滚动到指定位置

close：关闭窗口

open：打开一个窗口window.open( [sURL] [, sName] [, sFeatures] [, bReplace])

window.open("","_blank","fullscreen=1");这句NB了，整个屏幕都是白板

sURL：打开窗口的地址，默认打开一个新的空白窗体about:blank

sName：指定窗口的打开方式，即target属性值

_blank：新的无标题窗口

_parent：当前框架的父窗体，没有父窗体则为_self

_self：当前窗口，替换当前窗口内容

_search：浏览器的搜索面板内，IE5及以后版本有效

_top：替换所有可以加载的框架集，没有框架则为_self

sFeatures：(for example, "fullscreen=yes, toolbar=yes")

height≥100px，width≥100px，left≥0，top≥0

下边的属性取值可以为yes/no或1/0

channelmode 默认值no

fullscreen 默认值no，改为yes记得提供关闭窗口的按钮或方法ALT+F4

下边的默认值都为yes directories location地址栏

menubar菜单栏 resizable可调大小 scroll bars滚动条

status状态栏 titlebar标题栏 toolbar工具栏

window.open()

bReplace：false(新建)或者true(替换)历史列表中的记录

setTimeout：经过指定毫秒值后，计算表达式的值或执行表达式内容。返回一个id值

setTimeout(“window.close()”, 5000);5秒后自动关闭窗口

setInterval：没经过指定毫秒值计算表达式，循环。返回一个事件id值

setInterval(“alert(111)”,3000)每隔3秒弹一次

clearTimeout(id）、clearInterval(id)：清除使用上边两个方法开始的事件

focus：获取焦点

window.setInterval(“window.focus()”, 3000);将窗口每隔3秒前置一次

window事件

onload：对象加载完成后打开窗口后

onunload：对象卸载完成关闭窗口，窗体消失后

onbeforeunload：对象卸载前关闭窗口，窗体还在时

onkeypress：键盘事件

event对象：

keyCode属性：设置或获取事件对应的按键码

returnValue：设置或获取事件的返回值，false或true，用于取消事件执行效果

例：文本框只允许输入数字，非数字不允许显示在文本框中

function checkNum()

{

if (!(window.event.keyCode>=48 && window.event.keyCode<=59))

{

alert(“不允许输入非数字”);

//不加下边这句，非数字会提示但还会在文本框显示

window.event.returnValue = false；取消事件执行

}

returnValue可用在表单提交中，当表单数据不符合要求时取消提交按钮效果

srcElement属性可设置或获取事件源对象

取消超链接默认点击效果：让浏览器启动JavaScript解析引擎执行一个空的函数

CSS中的布局属性overflow：设置当对象中的内容超过其指定宽度或高度时的显示方式

hidden隐藏、visible显示、scroll滚动条、auto自动

使用此属性可以实现展开闭合效果，如好友列表

display属性也可以完成这个效果 none隐藏，block块状显示分行，

inline一行内显示

获取事件源对象的两种方式

1、event.srcElement

2、事件处理时直接将事件对象通过this传递

创建节点：

document.createElement(标签名)创建一个指定标签名的节点

document.createTextNode(文本内容)创建一个文本节点

添加节点：添加到的目的节点.appendChild(要添加的节点) 添加到尾部

table对象

rows属性：获取表格中所有的行 cells属性：表格中所有单元格

使用table对象创建行对象：table.insertRow([index])index默认-1行尾

用tr对象创建单元格：tr.insertCell()

注意table的下一级子节点tbody，添加行节点要加在tbody下

tr对象也有cells集合属性，获取的是这一行中的单元格集合

给对象添加属性

1、tabNode.id = “tabid”

2、tabNode.setAttribute(“id”,”tabid”)

删除表格节点：

删除行：tabNode.deleteRow(rowIndex)

删除列：删除所有行的指定单元格获取列数tabNode.rows[0].cells.length

trNode.deleteCell(cellIndex)

表格数据排序过程中定义的临时容器（存放行对象的数组）存放的都是行对象的引用。

表格行颜色间隔显示和鼠标悬浮行高亮效果：

间隔显示：奇偶行分别加载不同样式即可，onload事件中加载

悬浮高亮：行对象的onmouseover和onmouseout事件

对象.innerText 可以获取或设置对象的内部文本，但是包含的HTML标签或属性也会作为纯文本解析。要将内部的标签或HTML属性解析，需要使用innerHTML

按钮一次性点击效果：event.srcElement事件源/input对象.disabled=true 按钮点击后变灰

复选框操作：获取总金额

获取所有复选框checkboxs，遍历，判断checked属性if (checkedboxs[x].checked)

注意将复选框的value属性值进行parseInt转换

全选时将其他复选框的checked属性值改为全选框的checked属性值即可

通过下拉列表动态改变页面样式：select标签的onchange事件

options属性：所有列表项 selectedIndex：选中项的角标

获取列表选中项：selectNode.options[selectNode.selectedIndex] 值.value

DOM代码改变div区域内文本样式：divNode.style.textTransform

uppercase lowercase capitalize首字母大写

JavaScript代码写在head标签内时要注意全局变量的问题：

函数只有调用时才执行，封装在函数内部的变量没有问题；在函数外部定义的全局变量，页面加载时还没读到下边的具体标签，全局变量获取指定标签对象时就会出现null

获取鼠标的坐标，让指定区域随鼠标移动

获取鼠标坐标方法：event.x event.y

随鼠标移动：改变指定区域的left和top属性

用到的事件：body对象的onmousemove

还用到CSS样式的position定位属性，将页面分层，使指定区域悬浮在body区域上方。层次：直接定义页面所有对象到同一个层里，为了对某个区域进行移动、定位，将该区域分离到另一个单独的层里

<body>

//用position属性将广告区域进行分层，绝对定位，使广告区域悬浮在body区域上方

<div id=”bodyid”>body区域</div>

</body>

window.onload=function()

｛

document.body.onmousemove = function()

{

var adNode=document.getElementById(‘ad’)

adNode.style.left = event.x;

adNode.style.top = event.y;

}

｝

流氓：将广告区域的坐标值设置为鼠标坐标值左上一点，使鼠标停在广告区域中

将广告区域用a标签封装

在广告区域添加点击事件，点击后关闭广告ad.style.dislay=none

限定边界： addiv.offsetWidth 广告区域自己的宽度

document.body.clientWidth body区域的宽度

边界内移动代码：

var x=y=1;

var movex=movey=0;

function move()

{

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

movex = movex + x*5; //每次移动位置递增5个像素

movey = movey + y*5;

ad.style.left = movex; //移动

ad.style.top = movey;

//alert("aaaaaaaa");

var bdx = document.body.clientWidth; //获取当前浏览器页面窗口的宽和高

var bdy = document.body.clientHeight;

var adx = ad.offsetWidth; //获取广告区域的大小

var ady = ad.offsetHeight;

//alert(bdx+"----------"+bdy);

if (movex+adx >= bdx) //判断是否移到边界了

{ //移到边界开始递减

x = -1;

}

else if (movex <= 0) //递减只零再开始递增

{

x = 1;

}

if (movey+ady >= bdy)

{

y = -1;

}

else if (movey <= 0)

{

y = 1;

}

var timeid;

function fly()//飞吧每个10毫秒执行一次移动

{

//move();

timeid = window.setInterval("move()", 100);

}

function over()//鼠标进入广告区停止移动

{

window.clearInterval(timeid);

}

window.onload = function() //页面一加载就开始飞

{

fly();

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

ad.onmouseover = function()

{

over(); //鼠标进入取消定时移动

}

ad.onmouseout = function()

{

fly(); //鼠标离开继续移动

}

function closeAD() //点击关闭后停止定时移动，隐藏广告区域

{

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

ad.style.display = 'none';

over();

}

</script>

</head>

<body>

</body>

级联菜单：省市选择示例 select标签onchange事件添加option项

将省份对应的城市城市列表封装进二维数组，角标和省的option项角标一致

选中省份后，遍历对应的城市列表，将其封装进option标签中并添加到子菜单中

注意：在添加子项前需先清空子菜单项，以免将上一选项结果遗留

再次注意：清空子项用遍历时，注意removeChild一次，length就减一次，如果循环变量跟着递增就会移不完

移除下拉选项的简单方法，直接将列表的options属性的length置为0即可

邮件列表示例中删除所选邮件时注意：

和用遍历方法删除列表项时的问题一样，删除时，长度递减，循环变量递增，删不全

可定义一个临时容器用来存储待删除的节点索引，然后遍历临时容器时再删除这些节点。临时容器中存放的也是表格行节点的引用，每次删除完颜色事件都要加载一遍

表单验证：

可以用document.forms获取页面中的所有表单对象

拿到表单对象后，可以直接使用表单中的组件名获取对应组件

输入框失去焦点时就开始验证：onblur事件发生就开始验证

怎么让表单验证失败时提交不出去呢？

1、表单标签中的onsubmit事件中，event.returnValue=false提交按钮就失效了

2、在onsubmit事件处理函数中返回false（不提交）或true（提交），再将返回结果返回给onsubmit事件即可 onsubmit=“return checkForm()”

事件处理函数中使用returnValue时，onsubmit不用return即可

JS中的正则表达式限定开始结束位置^ $

两种写法：var reg = /^\d{5}$/ 5位数字，下同

var reg = new RegExp(“^\\d{5}$”);

var namereg = /^[a-z]{5}$/i 5为字母后面加i不分大小写

下面的示例创建一个包含正则表达式模式及相关标志的对象(re)，向您演示正则表达式对象的用法。在本例中，作为结果的正则表达式对象又用于 match 方法中：

function MatchDemo(){

var r, re; // 声明变量。

var s = "The rain in Spain falls mainly in the plain";

re = new RegExp("Spain","i"); // 创建正则表达式对象。

r = s.match(re); // 在字符串 s 中查找匹配。

return(r); // 返回匹配结果。

}

如果String对象的 match 方法没有找到匹配，返回 null。

RegExp对象的test方法也可判断是否匹配

reg.test(str) 返回boolean

附件添加删除、通过下拉列表改变字体颜色、字体样式、省市级联菜单示例

/*CSS区域*/

a:link, a:visited{

color: #FF0000;

font-size: 22;

text-decoration: none;

}

</style>

/*javascript区域*/

function addFile()

{

var tabNode = document.getElementById("file");

var trNode = tabNode.insertRow();

var tdNode_file = trNode.insertCell();

var tdNode_del = trNode.insertCell();

tdNode_file.innerHTML = "<input type='file' />";

tdNode_del.innerHTML = "<img src='1.jpg' alt='删除文件' onclick='delFile(this)' />";

}

function delFile(node)

{

//var tabNode = document.getElementById("file");

var trNode = node.parentNode.parentNode;

//alert(tabNode.nodeName);

//alert(trNode.nodeName);

trNode.parentNode.removeChild(trNode); //父节点删除子节点他杀

}

</script>

<body>

<a href="javascript:void(0)" onclick="addFile()">点击上传文件</a>

</table>

<hr/>

#bbb{

border: red 3px solid;

width: 200px;

}

#colorid{

width: 50px;

}

#text{

border: blue 1px solid;

width: 100px;

text-align: center;

margin: 10px 0px 0px 20px;

}

</style>

/*鼠标指上去就盖住背景色了想去掉没成功

onload=function()

{

var sel = document.getElementById("colorid");

sel.onmouseover = function(){sel.className="";};

sel.onmouseout = function(){sel.className="";};

}

function changeColor()

{

var sel = document.getElementById("colorid");

var div = document.getElementById("text");

var val = sel.options[sel.selectedIndex].value;

div.style.color = val;

}

</script>

选择颜色：

</select>

变变变<br />

</div>

<hr />

#div1{

background: #FFCC00;

width: 300;

height: 80;

}

#selid{

width: 200;

margin-top: 20px;

margin-bottom: 20px;

}

#div2{

background: #669999;

width: 300;

}

</style>

<!—改变字体样式-->

function textChange()

{

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

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

var sel = document.getElementById("selid");

var val = sel.options[sel.selectedIndex].value;

//alert(val);

div1.style.textTransform = val;

div2.innerHTML = "text-transform : "+val+";";

}

</script>

Every man dies. Not every man really lives.

</div>

<option value="none">--text-transform--</option>

<option value="uppercase">UPPERCASE</option>

<option value="lowercase">lowercase</option>

</select>

text-transform : none;

</div>

<hr/>

<!—省市级联菜单-->

#seldiv select{

width: 150px;

}

</style>

function showCity()

{

var arr = [[], ["朝阳区", "海淀区", "西城区", "东城区"],

["郑州市", "南阳市", "邓州市", "信阳市", "驻马店市", "开封市"],

["唐山市", "石家庄市", "廊坊市", "邯郸市"],

["北京", "上海", "深圳", "天津", "重庆", "香港特别行政区", "澳门特别行政区"]];

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

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

var index = sel1.selectedIndex;

//sel2中添加内容之前先清空下有简单方法

for (var x=1; x<sel2.options.length; )//x++) //length在减 x在递增只移除一半

{

sel2.removeChild(sel2.options[x]);

}

for (var x=1; x<sel1.options.length; x++)

{

if (x == index)

{

for (var y=0; y<arr[x].length; y++)

{

var opNode = document.createElement("option");

opNode.innerHTML = arr[x][y];

sel2.appendChild(opNode);

}

if (sel1.selectedIndex!=0)

sel2.selectedIndex = 1;

}

</script>

</select>

</select>

</div>

</body>

邮件列表示例：

/*CSS区域*/

table{

border: black 2px solid;

border-collapse: collapse;

text-align: center;

width: 600px;

/* margin: 10px; 外框边距*/

}

table th{

background: #33FF33;

}

table td, table th{

padding: 5px;

border: black 1px solid;

}

.one{

background: #CCFF66;

}

.two{

background: #FFCCFF;

}

.over{

background: #FF9933;

}

</style>

/*javascript区域*/

var name;

function trColor()

{

var tabNode = document.getElementById("maillist");

var tabRows = tabNode.rows;

for (var x=1; x<tabRows.length-1; x++)

{

if (x%2==1)

{

tabRows[x].className = "one";

}

else

tabRows[x].className = "two";

tabRows[x].onmouseover = function()

{

name = this.className;

this.className = "over";

}

tabRows[x].onmouseout = function()

{

this.className = name;

}

window.onload = function()

{

trColor();

}

function checkAll(index)

{

var allNodes = document.getElementsByName("all");

//不管选的哪个都让两个全选框一样

allNodes[Math.abs(index-1)].checked = allNodes[index].checked;

var mails = document.getElementsByName("mail");

for (var x=0; x<mails.length; x++)

{

mails[x].checked = allNodes[index].checked;

}

function checkByBut(mode) //选择按钮事件处理

{

/*简单写法

var mails = document.getElementsByName("mail");

for (var x=0; x<mails.length; x++)

{

if (mode==2)

mails[x].checked = !mails[x].checked;

else

mails[x].checked = mode;

}

if (mode==1)

{

document.getElementsByName("all")[0].checked = true;

checkAll(0);

//alert(mode);

}

if (mode==0)

{

document.getElementsByName("all")[0].checked = false;

checkAll(0);

}

if (mode==2)

{ //mails[x].checked = !mails[x].checked;

var alls = document.getElementsByName("all");

if (alls[0].checked) //使两个全选框同步

{

alls[0].checked = false;

alls[1].checked = false;

}

var mails = document.getElementsByName("mail");

for (var x=0; x<mails.length; x++)

{

if (mails[x].checked)

{

mails[x].checked = false;

}

else

{

mails[x].checked = true;

}

function del() //删除所选

{

var mails = document.getElementsByName("mail");

for (var x=0; x<mails.length; x++)

{

if (mails[x].checked)

{

var trNode = mails[x].parentNode.parentNode;

trNode.removeNode(true); //这样删掉之后length在减小而x在递增导致删一半留一半

}

trColor();

var arr = []; //记录被选择的行号

var pos = 0;

var mails = document.getElementsByName("mail");

for (var x=0; x<mails.length; x++)

{

if (mails[x].checked)

{

var trNode = mails[x].parentNode.parentNode;

arr[pos++] = trNode;

}

var tabNode = document.getElementById("maillist");

var tabRows = tabNode.rows;

for (var x=0; x<arr.length; x++)

{

arr[x].removeNode(true);

}

trColor(); //重新加载一次样式，颜色间隔效果

}

</script>

<tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</th>

<tr>

</table>

</body>