学习笔记——JavaScript操作DOM

最新推荐文章于 2022-08-22 23:33:02 发布

celte

最新推荐文章于 2022-08-22 23:33:02 发布

阅读量799

点赞数

分类专栏： JavaScript 文章标签： JavaScript DOM

本文链接：https://blog.csdn.net/celte/article/details/8744516

版权

JavaScript 专栏收录该内容

19 篇文章 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>

celte

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习笔记——JavaScript操作DOM

DOM的核心对象/*Document对象及其方法*/只有Document对象的方法可以在页面上查找、创建、删除元素查找一个或多个元素getElementById(idValue)根据所提供的元素的id值，返回对该元素的引用getElementByTagName(idValue)根据参数中提供的标记，返回一组元素的引用举例：My Headi
复制链接

扫一扫