javascript操作dom教程

发布时间:2020-03-24编辑:脚本学堂
本文介绍了javascript编程中操作dom元素的方法,介绍了dom核心对象、创建元素与文本、dom对象属性等内容,有需要的朋友参考下。

dom的核心对象
/*document对象及其方法*/
只有document对象的方法可以在页面上查找、创建、删除元素

查找一个或多个元素
getelementbyid(idvalue)
根据所提供的元素的id值,返回对该元素的引用
getelementbytagname(idvalue)
根据参数中提供的标记,返回一组元素的引用

举例:
 

复制代码 代码示例:
<h1 id="heading1">my heading</h1>
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 h1element=document.getelementbyid("heading1");
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*/
改变元素的外观
方案一:

复制代码 代码示例:
var divadvert=document.getelementbyid("divadvert");
divadvert.style.color="red";
 

方案二:

复制代码 代码示例:
.newstyle{
font:italic 12pt arial;
color:red;
}
var divadvert=document.getelementbyid("divadvert");
divadvert.classname="newstyle";

定位和移动元素
 

复制代码 代码示例:
var divadvert=document.getelementbyid("divadvert");
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 //表示事件的名称
举例:
 

复制代码 代码示例:
<p onmouseover="handle(event)">paragraph</p>
//注意此处的event变量没有在任何地方定义,只有通过html属性连接的事件处理程序才能使用
//这个参数,它传达了当前事件对象的引用
<script type="text/javascript">
function handle(e)
{
alert(e.type);//此时显示值为:mouseover
}
</script>

dom事件模型还引入了mouseevent对象,专门用来处理鼠标引发的事件
mouseevent对象的属性:
 

altkey  //表示事件发生时,是否按下alt键
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事件
 

复制代码 代码示例:
<html> 
<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对象的属性:
 

altkey  //表示事件发生时,是否按下alt键
button  //表示鼠标按下的哪一个按钮
cancelbubble  //获取或设置当前事件是否应沿着事件处理程序的层次结构向上冒泡
clientx  //表示事件发生时,鼠标指针在浏览器窗口中的水平坐标
clienty  //表示事件发生时,鼠标指针在浏览器窗口中的垂直坐标
ctrlkey  //表示事件发生时,是否按下ctrl键
fromelement  //获取鼠标指针退出的元素对象
keycode  //获取与引发时间的键相关的unicode键码
screenx  //表示事件发生时,鼠标指针相对于屏幕坐标原点的水平坐标
screeny  //表示事件发生时,鼠标指针相对于屏幕坐标原点的垂直坐标
shiftkey  //表示事件发生时,是否按下shift键
srcelement  //获取引发事件的元素对象
toelement  //获取鼠标指针进入的元素对象
type //获取事件的名称

举例:
 

复制代码 代码示例:
<p onmouseover="handle()">paragraph</p>
//由于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>