JavaScript操作DOM对象

时间：2017-11-04 20:52:59 阅读：229 评论：0 收藏：0 [点我收藏+]

标签：css active write cli mouse client osi tle fse

1、访问节点

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>访问节点</title>

	<!--
	DOM（Document Object Model）文档对象模型
	HTML-DOM
	CSS-DOM
	XML-DOM

	DOM-CORE

	noteType的返回值：
	1 ：元素节点
	2 ：属性节点
	3 ：文本节点
	8 ：注释节点
	9 ：文档节点


	-->
	</head>
	<body>

	<ul>
	<li>大家辛苦了1</li>
	<li>大家辛苦了2</li>
	<li>大家辛苦了3</li>
	</ul>

	<img src="../images/cat.jpg" alt="这是一只可爱的小猫咪" id="cat">



	<script type="text/javascript">
	//获取ul中的第一个li
	var ul= document.getElementsByTagName("ul")[0];
	//输出节点的名称
	document.write("ul节点的名称:"+ul.nodeName+"<br/>");
	document.write("ul节点的类型:"+ul.nodeType+"<br/>");
	document.write("ul节点的值:"+ul.nodeValue+"<br/>");
	// 01.获取ul中的第一个li 元素节点
	var li=ul.firstElementChild;
	document.write("li节点的名称:"+li.nodeName+"<br/>");
	document.write("li节点的类型:"+li.nodeType+"<br/>");
	document.write("li节点的值:"+li.nodeValue+"<br/>");

	//获取小猫咪
	var cat=document.getElementById("cat");
	document.write("img节点的名称:"+cat.nodeName+"<br/>");
	document.write("img节点的类型:"+cat.nodeType+"<br/>");
	document.write("img节点的值:"+cat.nodeValue+"<br/>");

	//动态改变小猫咪的宽度和高度
	cat.setAttribute("width","200px");
	cat.setAttribute("height","200px");
	//获取我们的属性对应的属性值
	var src= cat.getAttribute("src");
	document.write("src:"+src+"<br/>");
	//02.获取属性节点
	var alt= cat.getAttributeNode("alt");
	document.write("img节点alt的名称:"+alt.nodeName+"<br/>");
	document.write("img节点alt的类型:"+alt.nodeType+"<br/>");
	document.write("img节点alt的值:"+alt.nodeValue+"<br/>");


	//03. 获取第一个li的内容
	var text= li.firstChild; //文本节点
	document.write("text的名称:"+text.nodeName+"<br/>");
	document.write("text的类型:"+text.nodeType+"<br/>");
	document.write("text的值:"+text.nodeValue+"<br/>");

	</script>

	</body>
	</html>

2、节点的曾删改

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>节点的增删改</title>
	</head>
	<body>
	<ul>
	<li>大家辛苦了1</li>
	<li>大家辛苦了2</li>
	<li>大家辛苦了3</li>
	<li>大家辛苦了4</li>
	<li>大家辛苦了5</li>
	<li>大家辛苦了6</li>
	<li>大家辛苦了7</li>
	<li>大家辛苦了8</li>
	<li>大家辛苦了9</li>
	<li>大家辛苦了10</li>
	<li>大家辛苦了11</li>
	<li>大家辛苦了12</li>
	</ul>


	<script type="text/javascript">
	//首先获取页面中的第一个ul
	var ul= document.getElementsByTagName("ul")[0];
	//创建一个新的节点
	var newLi=document.createElement("li");
	//给新节点的增加内容
	newLi.innerHTML="<h1>哈哈</h1>";
	//在第7 个位置之前把新增的li放入
	var needLi= ul.getElementsByTagName("li")[6];
	//ul.insertBefore(newLi,needLi); // 把newLi放在needLi之前

	//替换指定的节点
	var repLi= ul.getElementsByTagName("li")[9];
	ul.replaceChild(newLi,repLi);

	//删除指定的节点
	ul.removeChild(newLi);

	//clone UL
	var newUl= ul.cloneNode(true);
	// 在body中增加 ul
	ul.parentNode.appendChild(newUl);
	</script>
	</body>
	</html>

3、Style样式

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>Style样式</title>
	<!--
	之前接触的行内样式 style 是css设置样式
	现在我们使用的是js中的设置样式！
	-->
	<style type="text/css">
	#myDiv{
	height: 50px;
	width: 50px;
	}
	</style>




	</head>
	<body>

	<div id="myDiv" style="border: 1px solid red"></div>

	<button type="button" onclick="changeBackground();">换背景色</button>
	<button type="button" onclick="changeMargin();">换外边距</button>


	<script type="text/javascript">
	var div=document.getElementById("myDiv");

	/**
	* 通过js中的style属性来设置样式
	*
	* 注意点：
	* 01.css中有的属性我们 style中都有
	* 02.只不过属性名写法不一致
	* 比如说 css font-size style fontSize
	*/

	function changeBackground(){
	div.style.backgroundColor="pink"; //改变背景颜色
	}
	function changeMargin(){
	div.style.marginLeft="50px"; //改变外边距
	}
	</script>

	</body>
	</html>

4、Tab选项卡

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>Tab切换</title>
	<style type="text/css">
	#tab{ width: 400px;}
	#tab ul{list-style: none;overflow:hidden;margin:0px;padding:0px;}
	#tab ul li{float:left;padding:5px 10px;border:1px solid #eee;cursor:pointer;}
	#tab ul li.cur{background-color: red}
	#tab .content{width:100%;border:1px solid #eeeeee;height: 100px;}
	</style>
	</head>
	<body>
	<div id="tab">
	<ul>
	<li class="cur">tab1</li>
	<li>tab2</li>
	<li>tab3</li>
	<li>tab4</li>
	</ul>
	<div id="c-box">
	<div class="content" id="content-0">
	tab-1第一个容器的内容
	</div>
	<div class="content" id="content-1" style="display: none;">
	tab-2第二个容器的内容
	</div>
	<div class="content" id="content-2" style="display: none;">
	tab-3第3个容器的内容
	</div>
	<div class="content" id="content-3" style="display: none;">
	tab-4第4个容器的内容
	</div>
	</div>



	<script type="text/javascript">
	//获取页面中需要得所有li的集合
	var liList=document.getElementsByTagName("li");
	//循环li集合
	for(var i=0;i<liList.length;i++){
	liList[i].index=i; //当前选中的li
	liList[i].onmouseover=function(){ //鼠标移入事件
	for(var j=0;j<liList.length;j++){ //循环div
	document.getElementById("content-"+j).style.display="none"; //所有div的都隐藏
	liList[j].className=""; //清除所有的li 的class属性值
	}
	liList[this.index].className="cur";//设置选中的li样式
	document.getElementById("content-"+this.index).style.display="block"; //显示选中的li对应div
	}
	}

	</script>
	</body>
	</html>

5、ClassName属性

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>className属性</title>


	<style type="text/css">
	.myDiv{
	height: 50px;
	width: 50px;
	border: 1px solid red;
	}
	.newStyle{
	height: 150px;
	width: 150px;
	border: 2px solid pink;
	}

	</style>
	</head>
	<body>

	<div class="myDiv" id="myDiv"></div>


	<script type="text/javascript">
	var div= document.getElementById("myDiv");
	div.onclick=function(){
	div.className="newStyle"; //newStyle是我们需要设置class的名称
	}


	</script>
	</body>
	</html>

6、EasyUI实现tabs

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>EasyUI实现tabs</title>
	</head>
	<body>

	<div id="myTabs">
	<ul>
	<li><a href="#a">第1个</a></li>
	<li><a href="#b">第2个</a></li>
	<li><a href="#c">第3个</a></li>
	<li><a href="#d">第4个</a></li>
	</ul>
	<div id="a">第1个选项卡</div>
	<div id="b">第2个选项卡</div>
	<div id="c">第3个选项卡</div>
	<div id="d">第4个选项卡</div>
	</div>

	<!-- 引入我们需要的js文件-->
	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript" src="../js/jquery-ui.js"></script>
	<script type="text/javascript" src="../js/jquery.ui.tabs.js"></script>

	<script type="text/javascript">
	$(function(){
	$("#myTabs").tabs({
	active:1, //默认选中第一个tab
	event:"mouseover"
	})

	})

	</script>

	</body>
	</html>

7、滚动距离

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>滚动距离</title>
	<style type="text/css">
	*{margin:0;padding: 0;}
	#box1{height:200px;width: 200px;background:#eee;border:1px solid #000;overflow-y:scroll;}
	p{line-height:40px;}
	</style>
	<script type="text/javascript">
	window.onload=function(){
	var box1=document.getElementById("box1");
	var text=document.getElementById("text");
	//当div滚动的时候
	box1.onscroll=function(){
	text.innerHTML="距离TOP多少像素："+box1.scrollTop;
	}
	}
	</script>
	</head>
	<body>
	<div id="box1">
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>4</p>
	<p>5</p>
	<p>6</p>
	<p>7</p>
	<p>8</p>
	<p>9</p>
	<p>10</p>
	<p>11</p>
	<p>12</p>
	<p>13</p>
	<p>14</p>
	</div>
	<div id="text"></div>
	</body>
	</html>

8、window.onload

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>window.onload</title>
	<!--
	window.onload
	注意点：
	01.在整个页面中只能存在一次，否则后面会覆盖前面
	02.页面中所有的内容加载完毕之后才执行！
	03.没有简写的方法
	-->

	</head>
	<body>

	<img src="../images/cat.jpg">

	<script type="text/javascript">
	//alert("页面没有加载完毕就可能执行！");
	window.onload=function(){
	alert("页面中所有的内容加载完毕之后才执行！");
	}

	</script>
	</body>
	</html>

9、picture浮动

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>滚动距离</title>
	<style type="text/css">
	*{margin:0;padding: 0;}
	#box{
	position: absolute;
	top: 0px;
	left: 0px;
	}
	</style>
	<script type="text/javascript">
	window.onload = function () {
	var box=document.getElementById("box");
	var time=null,x= 1,y= 1,speed=5;

	function go(){
	//水平方向
	if((box.offsetLeft+box.offsetWidth)>document.documentElement.clientWidth){
	x=-1;
	}
	if(box.offsetLeft<0){
	x=1;
	}
	box.style.left=box.offsetLeft+x*speed+"px";
	//垂直方向
	if((box.offsetTop+box.offsetHeight)>document.documentElement.clientHeight){
	y=-1;
	}
	if(box.offsetTop<0){
	y=1;
	}
	box.style.top=box.offsetTop+x*speed+"px";
	}
	//定时函数
	time=setInterval(go,100);
	//鼠标移上去停止
	box.onmousemove=function(){
	if(time!=null){
	clearInterval(time);
	}
	}
	//鼠标离开继续移动
	box.onmouseout=function(){
	time=setInterval(go,100);
	}


	}
	</script>
	</head>
	<body>
	<div id="box">
	<img src="../images/cat.jpg" height="200px" width="200px">
	</div>
	</body>
	</html>

JavaScript操作DOM对象

标签：css active write cli mouse client osi tle fse

原文地址：http://www.cnblogs.com/yunfeioliver/p/7784112.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行