JavaScript DOM 文档对象模型

最新推荐文章于 2024-08-14 15:45:18 发布

经纬

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量754

点赞数 1

文章标签： javascript 文档 function button input 浏览器

DOM 文档对象模型 Document Object Model

JavaScript将浏览器及网页文档、HTML元素都使用相应的对象表示

如：window、document、body、forms

这些对象与对象的层次关系称为DOM

DHTML (Dynamic HTML 动态HTML)

HTML+JavaScript+CSS+DOM的结合使用称之为DHTML

BOM 浏览器对象模型

浏览器对象

window对象

表示浏览器窗口对其属性和方法的引用可以省略window.

window对象方法

alert()方法

显示包含由应用程序自定义消息的对话框

confirm()方法返回true false

显示一个确认对话框，

prompt()方法

显示一个提示对话框其中带有一条消息和一个输入框

确定返回文本框的值取消返回null

close()方法关闭指定的窗口

open()方法打开一个WEB浏览器窗口

window.location.href="URL" 当前窗口打开新窗口覆盖当前窗口

window.open（”打开窗口的url”，”窗口名”，”窗口特征”）

window.open("about:blank"); //open()最简单使用

window.open("url","windowName","width=100 height=100 status=yes menubar=no

toolbar=no resizable=no location=yes scrollbars=yes");

height：窗口高度；

width：窗口宽度；

top：窗口距离屏幕上方的象素值；

left：窗口距离屏幕左侧的象素值；

toolbar：是否显示工具栏，yes为显示；

menubar，scrollbars 表示菜单栏和滚动栏。

resizable：是否允许改变窗口大小，yes或1为允许

location：是否显示地址栏，yes或1为允许

status：是否显示状态栏内的信息，yes或1为允许

定时器

轮询

Window. setTimeout(函数名，指定时间毫秒数)

延时执行某个函数执行一次

clearTimeout(定时器对象名称) 取消执行定时器

setInterval(函数名称，时间毫秒数)

定时执行指定的函数间隔为多少毫秒数

clearInterval (定时器对象名称) 取消定时器

定时器示例:

//setTimeout(函数名，指定时间毫秒数) 延时执行某个函数执行一次

//clearTimeout(定时器对象名称)

var start;

function showName(){

document.all["myname"].style.display="block";

start=setTimeout("hideName()",300);

}

function hideName(){

document.all["myname"].style.display="none";

start=setTimeout("showName()",300);

}

function stopTime(){

if (start != null) {

clearTimeout(start);

start=null;

document.all.btn.value="开始闪烁"

}

else

{

start = setTimeout("showName()", 300);

document.all.btn.value="停止闪烁"

}

</script>

</head>

<h2>Hello<font id="myname" color="red" style="display:none">肖总</font></h2>

</body>

//setInterval(函数名称，时间毫秒数) 定时执行指定的函数间隔为多少毫秒数

//clearInterval (定时器名称) 取消定时器

var num=0;

var myTimer;

function show(){

document.all.myNum.innerHTML=num++;

}

function testTimer(){

if(myTimer!=null ) {

clearInterval(myTimer);

num=0;

myTimer=null;

document.all.btn.value="开始计时";

}else{

myTimer=setInterval(show,100);

document.all.btn.value="停止计时";

}

</script>

</head>

<body>

</body>

</html>

其他例子见：js_时间显示器.html js_跑马灯.html js_文字滚动.html

网页对话框

模式对话框和无模式对话框

window.showModalDialog("URL",传递变量名，"窗口特征")

建议传递window对象

window.showModelessDialog("URL",传递变量名，"窗口特征")

子窗口访问父窗口数据使用 dialogArguments对象

返回到父窗口的值使用 returnValue

window对象的子对象属性：

parent对象

代表对象层次中的父窗口

parent对象仅仅是对子窗口有意义

self 对象代表对当前窗口或框架的引用

top 对象代表最顶层的窗口

opener对象

代表创建当前窗口的源窗口

用于确定open方法打开窗口的源窗口

location 对象代表特定窗口的URL信息

location.replace(url) 刷新不后退

location.href="url" 加载可后退

window.location.reload();

history对象用于存储客户端最近访问过的网址清单

onClick="javascript:top.mymain.history.forward();"> =history.go(1)

onClick="javascript:top.mymain.history.back(1);" =history.go(-1)

history.go() 刷新表单不提交

history.forward() 指向浏览器历史列表中的下一个URL，

相当于点击浏览器的“前进”按钮

history.back() 指向浏览器历史列表中的上一个URL，

相当于点击浏览器的“后退”按钮

window.screen 代表浏览器屏幕

设置浏览器屏幕

var h=screen.Height; //屏幕高度

var w=screen.Width; //屏幕宽度

window对象属性：

window.status 代表浏览器状态栏

设置状态栏标题

window.status="清华IT";

window.closed 窗口是否关闭

window的事件

<html>

<head>

<title>window 对象的专有事件演示</title>

alert("开始加载网页....\n ---请注意网页的加载顺序---");

</script>

</head>

<!-- window的专有事件:

onload 在浏览器完成对象的装载后触发事件

onunload 在对象卸载前立即触发事件

onbeforeunload 在页面将要被卸载前触发事件

window对象的事件处理通过body标签的事件属性来设置的

-->

<body οnlοad="alert('html文档加载完毕')"

οnbefοreunlοad="window.event.returnValue='******你确定关闭本窗口******'"

οnunlοad="alert('拜拜')">

<h2>注意网页的加载顺序哦!!!</h2>

</body>

</html>

alert("加载写在最下面的JavaScript脚本");

</script>

document对象 代表给浏览器窗口中的 HTML 文档

document的属性:

function change(){

document.bgColor="green";

document.fgColor="red"; //文本前景色

document.vlinkColor="0x00ff00"; //已访问过的链接文本颜色

document.linkColor="gray"; //链接文本颜色

}

function showURL(){

alert(document.URL); //当前文档Unicode编码的 URL地址

}

</script>

</body>

document的方法

document.write()

document.writeln()

document.close()

<body>

<h2>开始的内容</h2>

document.write("这是document对象写入的内容<br>");

var str = "world";

document.write("哈楼 ", str, " javascript ", "<br>");

document.writeln(mystr = "Hello ", " World", "<br>");

document.writeln(mystr)

var a = "帅哥";

document.write(newStr = (a == "美女") ? "东方不败" : "西门吹雪");

document.write("<br>");

function changeDoc(){

document.writeln("以下是更新后的文档内容<br>");

document.writeln('<script language="javascript">');

document.writeln('function changeDoc()');

document.writeln('{');

document.writeln('document.writeln("hello ");');

document.writeln('document.writeln("world ");');

document.writeln('}');

document.writeln('</scr'+'ipt>');//注意这里写法

document.writeln('<input type="button" value="测试document对象" οnclick="changeDoc();">');

document.close(); //关闭文档输出

}

</script>

</body>

document集合属性:

document.forms //返回文档中的表单数组

document.anchors //获取所有带有 name 和/或 id 属性的 a 对象的集合数组

document.images //返回文档中的image的数组

document.links //获取文档中所有指定了 HREF 属性的 a 对象和所有 area 对象的集合数组

document.all 返回对象所包含的元素集合的引用

window.status = "清华IT"; //设置状态栏文本

document.title = "演示";

function show(){

alert("文档标题：" + document.title);

alert("所有指定了href属性的对象集合数组长度:" + document.links.length);

alert("所有带有 name或 id 属性的 a对象的集合数组长度：" + document.anchors.length);

alert(document.links[1].href);

alert(document.all["an1"].name)

alert(document.forms["frm1"].method);

}

</script>

</head>

<body>

document集合属性演示

</button>

<br/>

<a name="an1" id="a"> TO js_right.html</a>

<br/>

<a name="an2" id="b" href="js_left.html">链接到js_left.html</a>

<br/>

<a href="js_right.html">链接到js_right.html</a>

<br/>

</form>

</form>

</form>

</body>

frames 框架对象 不能同时设定body

parent.frames 返回父窗口的框架数组：

alert(top.frames.length);

alert(parent.frames[0].name)

alert(parent.frames["myleft"].name)

body对象及通用属性

body对象方法:

function createA(){

var myA=document.createElement("a"); //创建一个html元素

myA.href="js_跑马灯.html";

myA.innerText="链接到js_跑马灯.html";

document.body.appendChild(myA); //body对象添加子节点

}

</script>

</head>

<h2>这是一个javascript动态创建的超链接</h2>

</body>

通用属性:

<html>

<head>

<title>body对象属性演示</title>

<style>

body{ font-size:20px;}

</style>

</head>

<body>

<!—通用属性：

innerText 起始和结束标签内的文本

innerHTML 起始和结束标签内的 HTML

outerText 起始和结束标签内的文本(包含标签本身)

outerHTML 起始和结束标签内的 HTML(包含标签本身)

-->

<p id="p1" οnmοuseοver="this.innerText='<I>innerText</I>'"

οnmοuseοut="this.innerHTML='<I>innerHTML</I>'">

innerText与innerHTML的区别

</p>

<div οnmοuseοver="p2.outerHTML='<p id=p2><I>outerHTML</I></p>'"

οnmοuseοut="p2.outerText= '<p id=p2><I>outerText</I></p>'" >

测试outerText与outerHTML区别 <br>

注意当鼠标再次移动到div上时报错原因： p2不存在原来的p2已经被替换成文本

</div>

outerText与outerHTML区别

</p>

</body>

</html>

<body>

</div>

</body>

offsetTop 表示对象距顶部高度

offsetLeft 表示对象距左边宽度

offsetWidth 表示对象宽度

offsetHeight 表示对象高度

clientWidth 表示对象不包含滚动条或边框、边距的宽度

clientHeight 表示对象不包含滚动条或边框、边距的高度

clientTop 表示对象不包含滚动条或边框、边距的距父容器顶部高度

clientWidth 表示对象不包含滚动条或边框、边距的距父容器左边宽度

var dirX = 1, dirY = 1;

var xPos = 0, yPos = 0;

window.setInterval(moveIcon, 10);

function moveIcon(){

xPos += 2 * dirX;

yPos += 2 * dirY;

float_icon.style.top = yPos; //top div距顶部高度

float_icon.style.left = xPos; //left div距左边宽度

if (xPos <= 0 || xPos + float_icon.offsetWidth >= document.body.clientWidth) {

dirX = -dirX;

}

if (yPos <= 0 || yPos + float_icon.offsetHeight >= document.body.clientHeight) {

dirY = -dirY;

}

</script>

Style对象:

function showItem(){

//获取id为sp的span标记下的img标记数组

var imgs=document.getElementById("sp").getElementsByTagName("img");

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

var canExpand=true;

if(imgs[0].src.indexOf("minus.gif")!=-1){

canExpand=false;

imgs[0].src="images/plus.gif";

}else{

imgs[0].src="images/minus.gif";

}

if(canExpand){

cp.style.display="block"; //显示

}else{

cp.style.display="none"; //隐藏

}

</script>

</head>

<body>

</span>总公司

<li>上海分公司

<li>北京分公司

<li>常德分公司

</ul>

</body>

js树的例子见：js_静态树.html

w3c DOM

关于节点的操作

引用结点

document.getElementById("idName");

document.getElementsByTagName("tagName"); 返回数组

document.getElementsByName("元素名称");

引用子结点

elementName.childNodes elementName节点下所有子节点数组

elementName.firstChild

elementName.lastChild

引用父结点

elementName.parentNode elementName节点的父节点

elementName.parentElement elementName节点的父元素(IE)

获取结点信息

node.nodeName node节点的名称

node.nodeType node节点的节点类型 1 element 2 attribute 3 text

node.nodeValue node节点的文本内容

属性结点

elementNode.setAttribute(attributeName,attributeValue) 设置节点属性

elementNode.getAttribute(arributeName) 获取节点属性

例子：

<body>

<hr>

</body>

</html>

function changeText(){

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

alert("节点名称:"+node.childNodes[0].nodeName);

alert("节点类型:"+node.childNodes[0].nodeType);

alert("节点的文本内容:"+node.childNodes[1].childNodes[0].nodeValue);

node.childNodes[1].childNodes[0].nodeValue="这是改变后的文本";

node.childNodes[1].setAttribute("color","red");//设置节点属性

}

</script>

节点的创建和删除

创建元素节点

document.createElement("div");

创建文本节点

document.creatTextNode("hello");

添加子节点

父节点.appendChild("span"); 插入所有子节点之后返回新节点引用

插入子节点

父节点.insertBefore(新节点,当前节点) 返回新节点引用

删除子节点

父节点.removeChild(childNode)

例子：

<html>

<head>

function createDOM(){

var mydiv=document.getElementById("div3");

var _img=document.createElement("img");

_img.setAttribute("src","images/fish.gif");

mydiv.appendChild(_img);

var _span=document.createElement("span");

var _hr=document.createElement("<hr>");

var _text=document.createTextNode("hello world");

_span.appendChild(_hr);

_span.appendChild(_text);

insertAt(mydiv,_span,1);

}

function insertAt(currentNode,newNode,index){

//如果父结点无子结点则直接添加

if(!currentNode.hasChildNodes()){

currentNode.appendChild(newNode);

}else{

//否则在指定索引的子节点前添加一个节点

currentNode.insertBefore(newNode,currentNode.childNodes[index]);

}

</script>

</head>

<body>

</div>

</body>

</html>

DOM操作表格

表格的其他标签：<thead>表头只一个 <tbody>表体可以有多个

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

引用单元格

mytable.rows //返回行的集合

mytable.rows(i).cells(j) //返回指定行和列的单元格

mytable.rows(i).cells(j).childNodes[0].value //返回指定行和列的单元格文本

创建表格

var mytable=document.createElement("table")

删除行

mytable.deleteRow(i);

添加行

mytable.insertRow(i)

添加单元格

mytableRow.insertCell(i)

删除单元格

mytableRow.deleteCell(i)

删除列

mytable.rows[i].deleteCell(j);

使用单元格

var cb=document.createElement("input")

cb.type="checkbox"

mytable.rows[0].cells[1].appendChild(cb)

mytable.rows[0].cells[0].innerHTML="hello"

例子：

<body>

<thead>

</thead>

</table>

<hr>

姓名: <input type="text" id="myname" size="10" >

单位: <input type="text" id="myunit" size="10">

年龄: <input type="text" id="myage" size="5">

</div>

</body>

</html>

function selectAll(){

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

var check=selAll.checked;

var selIds=document.getElementsByName("selIds");

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

selIds[i].checked=check;

}

function addUser(){

var name=document.getElementById("myname").value;

var unit=document.getElementById("myunit").value;

var age=document.getElementById("myage").value;

var user=["",name,unit,age];

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

var len=mytb.rows.length;

if(name!="" && unit!="" && age!=""){

var _tr=mytb.insertRow(len);

var _tb0=_tr.insertCell(0);

_tb0.innerHTML="<input type='checkbox' name='selIds'>";

for(var i=1;i<4;i++){

var _tb=_tr.insertCell(i);

_tb.innerHTML=user[i];

}

function delUser(){

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

for(var i=(mytb.rows.length-1);i>0;i--){

if(mytb.rows(i).cells(0).childNodes[0].checked){

mytb.deleteRow(i);

}

</script>

经纬

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript DOM 文档对象模型

DOM 文档对象模型 Document Object Model JavaScript将浏览器及网页文档、HTML元素都使用相应的对象表示如：window、document、body、forms这些对象与对象的层次关系称为DOM DHTML (Dynamic HTML 动态HTML) HTML+JavaScript+CSS+DOM的结合使用
复制链接

扫一扫