js操作DOM对象
Posted 我可不是隔壁的老王
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js操作DOM对象相关的知识，希望对你有一定的参考价值。
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
<!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>
以上是关于js操作DOM对象的主要内容，如果未能解决你的问题，请参考以下文章