WEB程序设计之DOM

来源：互联网发布：java基础教程 pdf下载编辑：程序博客网时间：2024/05/15 13:37

WEB程序设计之DOM

1、DOM（文档对象模型）：

允许程序和脚本动态地访问和更新文档的内容、结构和样式。

通过DOM，JavaScript 获得了足够的能力来创建动态的 HTML。

HTML 文档中的所有内容都是节点：

◆ 整个文档是一个文档节点

◆ 每个 HTML 元素是元素节点

◆ HTML 元素内的文本是文本节点

◆ 每个 HTML 属性是属性节点

◆注释是注释节点

节点属性（分各种类型解释）：

nodeName：节点名称（元素名字或#textNode）

nodeValue：节点值（文本节点情况下则为文本内容）

nodeType：节点类型（1：元素，3=文本节点）

node.getAttribute('attribute')：获取指定属性的值

node.setAttribute('attribute','value')：设置指定属性的值

节点层次关系：

firstChild 属性：可返回文档的首个子节点。

lastChild 属性：可返回文档的最后一个子节点

parentNode 属性可返回某节点的父节点。

childNodes 属性可返回指定节点的子节点的节点列表。

nextSibling 属性可返回某个元素之后紧跟的元素（处于同一树层级中）。

2、DOM操作：

1、查找HTML元素

（1）通过 id 找到 HTML 元素

document.getElementById

（2）通过标签名找到 HTML 元素

document.getElementsByTagName//返回的是一个数组

（3）通过类名找到 HTML 元素

document.getElementsByClassName//在IE中无效

2、改变 HTML 元素的内容 (innerHTML)：

document.getElementById(id).innerHTML=new HTML

获取元素值的两种方法：

<html>
<body>
<p id="intro">Hello World!</p>
</body>
</html>

1）用innerHTML属性：

x=document.getElementById("intro");
alert(x.innerHTML);

2）使用节点属性

x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);

3、改变 HTML 元素的属性：

document.getElementById(id).attribute=new value
document.getElementById(id).setAttribute('attribute','value');

4、改变 HTML 元素的样式 (CSS)：

document.getElementById(id).style.property=new style
document.getElementById(id).setAttribute('style','new style');
document.getElementById(id).className='styleclass';

5、对 HTML DOM 事件对出反应：

1）HTML 事件属性来绑定函数

 <button onlick="displayDate()">单击这里</button>

2）使用 HTML DOM 来分配事件

document.getElementById("myBtn").onclick=function(){displayDate()};

常用事件：

onload：页面加载

onchange：内容改变

onmouseover：鼠标进入

onmouseout：鼠标移出

onmousedown：鼠标按下

onmouseup：鼠标释放

onclick：鼠标单击

onfocus：获得焦点

onblur：失去焦点

例：手风琴效果：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0px;
padding: 0px;
}
body{
padding: 20px;
font-size: 12px;
}
dl{
width: 200px;
border: 1px solid #c5c6c4;
border-top: none;
border-bottom: none;
}
dl.last{
border-bottom: 1px solid #c5c6c4;
}
dt{
padding: 4px;
font-weight: bold;
border-top:1px solid #c5c6c4;
background: #f4f4f4;
position: relative;
}
dt span{
position: absolute;
right: 6px;
top:center;
}
dd{
padding: 4px 12px;
}
</style>
</head>
<body>
<dl>
<dt>CSS<span>▲</span></dt>
<dd>CSS入门</dd>
<dd>CSS进阶</dd>
<dd>CSS高级技巧</dd>
</dl>
<dl class='last'>
<dt>WebUI<span>▲</span></dt>
<dd>理论知识</dd>
<dd>实战应用</dd>
<dd>高级技巧</dd>
</dl>
</body>
<script>
var arrayDt=document.getElementsByTagName('dt');
for(var i=0;i<arrayDt.length;i++){
arrayDt[i].onclick=function(){
var span=this.getElementsByTagName('span')[0];
var dds=this.parentNode.getElementsByTagName('dd');
if (span.innerHTML=='▲') {
span.innerHTML="▼";
for(var i=0;i<dds.length;i++){
dds[i].setAttribute('style','display:none');
}
}else{
span.innerHTML="▲";
for(var i=0;i<dds.length;i++){
dds[i].setAttribute('style','display:block');
}
}
}
}
</script>
</html>

3、创建HTML元素

createElement(name) ：创建元素节点

createTextNode(data)：创建文本节点

appendChild(newchild)：向节点的子节点列表的末尾添加新的子节点

insertBefore(newchild,refchild)：在已有的子节点前插入一个新的子节点

<div id="d1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("d1");
element.appendChild(para);
</script>

var child=document.getElementById("p1");
element.insertBefore(para,child);

例：增加城市列表

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body >
<h1 id="header">城市</h1>
<ul id='city'>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
<input type="text" name="cityname" id="cityname">
<input type="button" value="添加" onclick="addCity()">
</body>
<script>
function addCity(){
var city=document.getElementById('city');
var list=city.getElementsByTagName('li');
var cityname=document.getElementById('cityname');
var li=document.createElement('li');
var txt=document.createTextNode(cityname.value);
li.appendChild(txt);
city.appendChild(li);
cityname.value=';
}
</script>
</html>

2、删除节点：

parent.removeChild(node)

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

删除节点必须要引用父节点,这里提供一个常用的解决方法：找到您需要删除的子元素，然后使用 parentNode 属性来查找其父元素：

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

例：错误提示：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function checkdata2(){
var stuid=document.myform.stuid;
var parent=stuid.parentNode;
var img=parent.getElementsByTagName('img')[0];
var span=parent.getElementsByTagName('span')[0];
if (img!=undefined) {
parent.removeChild(img);
parent.removeChild(span);
}
if(stuid.value.length==0){
// alert('请输入学号');
errorInfo('请输入学号');
stuid.focus();
return false;
}
if(!isNum(stuid.value)){
 
errorInfo('学号必须是全数字');
// alert('学号必须是全数字');
stuid.focus();
return false;
}
myform.submit();
}
function errorInfo(errorMsg){
var span=document.createElement('span');
var txt=document.createTextNode(errorMsg);
span.appendChild(txt);
span.style.color='red';
var img=document.createElement('img');
img.setAttribute('src','error.png');
var parent=stuid.parentNode;
parent.appendChild(img);
parent.appendChild(span);
}
function isNum(str){
for(var i=0; i<str.length; i++){
var c=str.charAt(i);
if (c<'0' || c>'9') {
return false;
};
}
return true;
}
</script>
</head>
<body>
<form action="abc.asp" method="post" name="myform">
<p>
学号：<input type="text" name="stuid" id="stuid"  />
</p>
<input type="button" value="提交" onclick="checkdata2();">
</form>
</body>
</html>

4、浏览器对象模型（Browser Object Model）

window对象：表示浏览器窗口

确定浏览器窗口的尺寸

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

window.open() - 打开新窗口

window.close() - 关闭当前窗口

window.moveTo() - 移动当前窗口

window.resizeTo() - 调整当前窗口的尺寸

screen对象：

screen.availWidth - 可用的屏幕宽度

screen.availHeight - 可用的屏幕高度

屏幕分辨率：screen.width + "*" + screen.height

location :对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

location.href 属性返回当前页面的 URL。

location.assign() 方法加载新的文档。

history 对象包含浏览器的历史

history.back() - 与在浏览器点击后退按钮相同

history.forward() - 与在浏览器中点击按钮向前相同

history.go() - 加载 history 列表中的某个具体页面。

navigator 对象包含有关访问者浏览器的信息

navigator.appName：浏览器名称

navigator.appVersion：浏览器版本

0 0