javascript操作dom教程
dom的核心对象
/*document对象及其方法*/
只有document对象的方法可以在页面上查找、创建、删除元素
查找一个或多个元素
getelementbyid(idvalue)
根据所提供的元素的id值，返回对该元素的引用
getelementbytagname(idvalue)
根据参数中提供的标记，返回一组元素的引用
举例：
var h1element=document.getelementbyid("heading1");
h1element.style.color="red";//可以将字改成红色
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
var tdelement=document.getelementbytagname("td").item(0);//根据标签，返回的是一个类似于array的数组
or:
var temptdelement=document.getelementbytagname("td");
var tdelement=temptdelement[0];
创建元素和文本
createelement(elementname)
//使用指定的标记名创建一个元素节点，返回所创建的元素
createtextnode(text)
//创建并返回包含所提供的文本的文本节点
举例：
var pelement=document.createelement("p");
//这段代码创建了一个<p />元素并把其引用保存在pelement变量中。
var text=document.createtextnode("this is some text.");
//接着创建一个包含文本“this is some text”的文本节点并把其引用保存在text中
document对象的属性
获取文档的根元素
documentelement
//返回对文档最外层元素的引用，在html中总是<html />标签
/*element对象*/
element对象只有四个成员
tagname 返回元素的标记名称
getattribute()
获取属性的值
setattribute()
用指定的值设置属性
removeattribute()
从元素中删除指定的属性及其值
举例：
var container=document.documentelement;
alert(container.tagname);//警告框显示：html
<p id="paragraph1">this is some text</p>
var pelement=document.getelementbyid("paragraph1");
pelement.setattribute("align","center");//增加居中的属性
alert(pelement.getattribute("align"));//警告框显示：center
pelement.removeattribute("align");//居中的属性被移除
/*node对象*/
node对象的常用属性：
firstchild //返回元素的第一个子节点
lastchild //返回元素的最后一个子节点
previoussibling
//在同级子节点中，返回当前子节点的前一个兄弟节点
nextsibling //在同级子节点中，返回当前子节点的后一个兄弟节点
ownerdocument //返回包含节点的文档的根结点
parentnode //返回树型结构中包含当前节点的元素
nodename //返回节点的名称
nodetype //返回一个数字，表示节点的类型
nodevalue //以纯文本格式获取或设置节点的值
举例：
var pelement=h1element.nextsibling;
pelement.style.color="color";
node对象的方法：
appendchild(newnode)
//将一个新node对象添加到子节点列表的末尾。该方法返回追加的结点
clonenode(clonenode)
//返回当前节点的一个副本。该方法的参数是一个布尔值，如果为true
//则克隆当前节点及其左右的子节点。若为false则仅仅克隆当前节点
haschildnodes()
//如果结点有子节点则返回true，都则返回false
insertbefore(newnode,referencenode)
//在referencenode指定的结点前插入一个node对象，返回新插入的节点
removechild(childnode)
//从node对象的子节点列表中，删除一个子节点，并返回删除的子节点
举例：
var newtext=document.createtextnode("my heading");
var newelem=document.createelement("h1");
newelem.appendchild(newtext);//将文本插入h1标签中
document.body.appendchild(newelem);//将带有文本的h1标签写入html的正文内容
/*操作dom*/
改变元素的外观
方案一：
divadvert.style.color="red";
方案二：
font:italic 12pt arial;
color:red;
}
var divadvert=document.getelementbyid("divadvert");
divadvert.classname="newstyle";
定位和移动元素
divadvert.style.position="absolute";//定位元素前需要使用绝对或者相对位置
divadvert.style.left="100px";
divadvert.style.right="100px";//记得带上单位
//这是一个动态广告，示例了用js操纵dom的案例
<html>
<head>
<title>moving content</title>
<style type="text/css">
#divadvert
{
position:absolute;
font:12px arial;
top:10px;
left:0px;
}
</style>
<script type="text/javascript">
var switchdirection=false;
function doanimation()
{
var divadvert=document.getelementbyid("divadvert");
var currentleft=divadvert.offsetleft;//offsetleft属性获取当前对象的外边框到它上层对象的内边框之间的距离
var newlocation;
if(switchdirection==false)
{
newlocation=currentleft+2;
if(currentleft>=400)switchdirection=true;
}
else
{
newlocation=currentleft-2;
if(currentleft<=0)switchdirection=false;
}
divadvert.style.left=newlocation+"px";
}
</script>
</head>
<body onload="setinterval(doanimation,100)">
<div id="divadvert">here is an advertisement</div>
</body>
</html>
/*dom事件处理*/
attention：ie不支持dom事件模型
/*event对象的属性*/
bubbles //表示是否允许时间冒泡（即控制权从事件目标开始，沿着层次结构从一个
//元素向上传递给另一个元素）
cancelable //表示是否可以取消事件的默认行为
currenttarget //表示当前处理的时间处理程序的事件目标
eventphase //表示事件流当前处于哪个阶段
target //该属性表示引发时间的元素；在dom事件模型中，文本节点也可能是事件目标
timestamp //表示事件发生的时间
type //表示事件的名称
举例：
//注意此处的event变量没有在任何地方定义，只有通过html属性连接的事件处理程序才能使用
//这个参数，它传达了当前事件对象的引用
<script type="text/javascript">
function handle(e)
{
alert(e.type);//此时显示值为：mouseover
}
</script>
dom事件模型还引入了mouseevent对象，专门用来处理鼠标引发的事件
mouseevent对象的属性：
button //表示鼠标按下的哪一个按钮
clientx //表示事件发生时，鼠标指针在浏览器窗口中的水平坐标
clienty //表示事件发生时，鼠标指针在浏览器窗口中的垂直坐标
ctrlkey //表示事件发生时，是否按下ctrl键
metakey //表示事件发生时，是否按下meta键
relatedtarget //用于表示第二个事件目标。对于mouseover事件，该属性表示鼠标指针退出的元素
//对于mouseout事件，该属性表示鼠标指针进入的元素
screenx //表示事件发生时，鼠标指针相对于屏幕坐标原点的水平坐标
screeny //表示事件发生时，鼠标指针相对于屏幕坐标原点的垂直坐标
shiftkey //表示事件发生时，是否按下shift键
注意，任何事件都可以创建event对象，但是，只有一下鼠标事件才能生成mouseevent事件
如果生成了mouseevent事件，则可以访问event和mouseevent对象的所有属性
click事件： 当指针位于某个元素或文本上时，单击（按下并释放）鼠标将触发click事件
mousedown事件： 当指针位于某个元素或文本上时，按下鼠标将触发mousedown事件
mouseup事件： 当指针位于某个元素或文本上时，释放鼠标将触发mouseup事件
mousemove事件： 当指针位于某个元素或文本上时，移动鼠标将触发mousemove事件
mouseout事件： 当指针从某个元素或文本上移出时，将触发mouseout事件
<head>
<style type="text/css">
.underline
{
color:red;
text-decoration:underline;
}
</style>
<script type="text/javascript">
function handleevent(e)
{
if(e.target.tagname=="p")
{
if(e.type=="mouseover")e.target.classname="underline";
if(e.type=="mouseout")e.target.classname="";
}
if(e.type=="click")
{
alert("you clicked the mouse button at the x:"+e.clientx+" and y:"+e.clienty+" coordinates");
}
}
document.onmouseover=handleevent;
document.onmouseout=handleevent;
document.onclick=handleevent;
</script>
</head>
<body>
<p>this is paragraph 1.</p>
<p>this is paragraph 2.</p>
<p>this is paragraph 3.</p>
</body>
</html>
/*ie中的事件处理*/
dom中的事件处理模型在ie中是不支持的。
在ie中event对象是window对象的一个属性，存在于每个打开的浏览器窗口中。每次用户引发事件时，
浏览器都会更新event对象，它提供的信息类似于标准的dom event对象
ie中event对象的属性：
button //表示鼠标按下的哪一个按钮
cancelbubble //获取或设置当前事件是否应沿着事件处理程序的层次结构向上冒泡
clientx //表示事件发生时，鼠标指针在浏览器窗口中的水平坐标
clienty //表示事件发生时，鼠标指针在浏览器窗口中的垂直坐标
ctrlkey //表示事件发生时，是否按下ctrl键
fromelement //获取鼠标指针退出的元素对象
keycode //获取与引发时间的键相关的unicode键码
screenx //表示事件发生时，鼠标指针相对于屏幕坐标原点的水平坐标
screeny //表示事件发生时，鼠标指针相对于屏幕坐标原点的垂直坐标
shiftkey //表示事件发生时，是否按下shift键
srcelement //获取引发事件的元素对象
toelement //获取鼠标指针进入的元素对象
type //获取事件的名称
举例：
//由于ie中event对象是window对象的一个属性，随处可以使用，所以与dom事件模型相比，
//这里不再需要一个参数了
<script type="text/javascript">
function handle()
{
alert(window.event.type);//此时显示值为：mouseover
}
</script>
//下面将编写一个跨浏览器的dhtml
<html>
<head>
<style type="text/css">
.tabstrip
{
background-color:#e4e2d5;
padding:3px;
height:22px;
}
.tabstrip div
{
float:left;
font:14px arial;
cursor:pointer;
}
.tabstrip-tab
{
padding:3px;
}
.tabstrip-tab-hover
{
border:1px solid #316ac5;
background-color:#c1d2ee;
padding:2px;
}
.tabstrip-tab-click
{
border:1px solid #facc5a;
background-color:#f9e391;
padding:2px;
}
</style>
<script type="text/javascript">
function handleevent(e)
{
var esrc;
if(window.event)//这个if-else语句是跨浏览器的关键
{
e=window.event;
esrc=e.srcelement;
}
else
esrc=e.type;
if(e.type=="mouseover")
if(esrc.calssname=="tabstrip-tab")esrc.classname="tabstrip-tab-hover";
if(e.type=="mouseout")
if(esrc.classname=="tabstrip-tab-hover")esrc.classname="tabstrip-tab";
if(e.type=="click")
if(esrc.classname=="tabstrip-tab-hover")
{
esrc.classname="tabstrip-tab-click";
var num=esrc.id.substr(esrc.id.lastindexof("-")+1);
showdescription(num);
}
}
function showdescription(num)
{
var desccontainer=document.getelementbyid("desccontainer");
var div=document.createelement("div");
var text=document.createtextnode("description for tab "+num);
div.appendchild(text);
desccontainer.appendchild(div);
}
document.onclick=handleevent;
document.onmouseover=handleevent;
document.onmouseout=handleevent;
</script>
</head>
<body>
<div class="tabstrip">
<div id="tabstrip-tab-1" class="tabstrip-tab">tab 1</div>
<div id="tabstrip-tab-2" class="tabstrip-tab">tab 2</div>
<div id="tabstrip-tab-3" class="tabstrip-tab">tab 3</div>
</div>
<div id="desccontainer"></div>
</body>
</html>
您可能感兴趣的文章：
jQuery学习笔记[1] jQuery中的DOM操作
HTML DOM 简介
XML DOM 教程
jQuery对象和DOM对象相互转化
跟着JQuery API学Jquery 之四 css
jQuery学习笔记之DOM对象和jQuery对象
jQuery对象和Javascript对象之间转换的实例代码
HTML DOM 教程
jQuery对象和DOM对象使用说明
jQuery对象和DOM对象的相互转化实现代码