学习笔记——JavaScript操作DOM

缺乏、安全感 2022-03-19 09:50 300阅读 0赞

**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 οnlοad="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 οnmοuseοver="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.οnmοuseοver=handleEvent;
    		document.οnmοuseοut=handleEvent;
    		document.οnclick=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 οnmοuseοver="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.οnclick=handleEvent;
    		document.οnmοuseοver=handleEvent;
    		document.οnmοuseοut=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>