时间:2021-05-26
DOM:就是用JavaScript操作HTML节点。
知识点:
将HTML变成DOM树
看到HTML会画DOM树。
创建节点,添加节点,删除节点
varnodeObj = document.createElement(“节点名”); //创建元素节点
document.createTextNode(“文本”); //创建文本节点
父节点.appendChild(子节点); //把子节点添加到父节点下
父节点.removeChild(子节点);
//获得节点
document.getElementById(“id号”);
document.getElementsByTagName(“html的标签名”)[0];
父节点.getElementsByTagName(“html的标签名”)[0];
//获得子元素的节点
父节点.childNodes
父节点.firstChild
父节点.lastChild
//节点的属性
nodeType 1元素节点 2属性节点 3文本节点
nodeName 元素节点使用,返回标签名的大写字符串
nodeValue 文本节点使用,返回或设置文本
//获得兄弟节点
当前节点.nextSiblings
设置节点的属性
节点.setAttribute(属性名,值);
节点.getAttribute(属性名);
p.setAttrubute(“style”,”color:red;font-size:20px;”);
//一般做法,可以设置或获取
节点.属性名
设置文本
文本节点.nodeValue=文本;
案例:点击小图看大图
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="gb2312" />
<style type="text/css">
body{
background-color:pink;
}
#div{
margin:40px auto;
width:900px;
}
#ul li{
float:left;
margin-right:10px;
list-style-type:none;
}
p{
background-color:silver;
width:50%;
margin:0 auto;
top:10px;
text-align:center;
}
#divShow{
width:640px;
height:400px;
margin:10px auto;
clear:both;
}
</style>
</head>
<body>
<div id="div">
<ul id="ul">
<li>
<a href="imgs/0.jpg">
<img src="imgs_small/0.jpg" title="图片111"></img>
</a>
</li>
<li>
<a href="imgs/1.jpg">
<img src="imgs_small/1.jpg" title="图片222"></img>
</a>
</li>
<li>
<a href="imgs/2.jpg">
<img src="imgs_small/2.jpg" title="图片333"></img>
</a>
</li>
<li>
<a href="imgs/6.jpg">
<img src="imgs_small/6.jpg" title="图片444"></img>
</a>
</li>
<li>
<a href="imgs/4.jpg">
<img src="imgs_small/4.jpg" title="图片555"></img>
</a>
</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
//创建一个div节点
var divShow = document.createElement("div");
//设置div的id属性
divShow.setAttribute("id","divShow");
//创建一个img节点
var img = document.createElement("img");
//设置img的id属性
img.setAttribute("id","img");
//设置img的src属性
img.setAttribute("src","imgs/face.jpg");
//将img节点添加到div下
divShow.appendChild(img);
//创建文本说明标签p
var p = document.createElement("p");
p.setAttribute("id","p");
p.appendChild(document.createTextNode("说明"));
//得到HTML中的body节点
var body = document.getElementsByTagName("body")[0];
//将div添加到body节点下
body.appendChild(divShow);
body.appendChild(p);//把p添加到body下
//为元素添加单击事件
//节点对象.事件名 = new function(){};
//得到所有的<a>标签
var alist = document.getElementById("div").getElementsByTagName("a");
for(var i = 0;i < alist.length; i++){
//当鼠标点击时切换图片
alist[i].onclick = function(){
//this就表示当前被点击的节点
//点谁获得谁的href和title的值
var href = this.getAttribute("href");
var img = this.getElementsByTagName("img")[0];
var title = img.getAttribute("title");
//修改img标签的src属性
var img = document.getElementById("img");
img.setAttribute("src",href);
//修改p标签的文本
var p = document.getElementById("p");
p.firstChild.nodeValue=title;
//取消<a>标签的跳转
return false;
}
//当鼠标称上去的时候切换图片
alist[i].onmousemove = function(){
//this就表示当前被点击的节点
//点谁获得谁的href和title的值
var href = this.getAttribute("href");
var img = this.getElementsByTagName("img")[0];
var title = img.getAttribute("title");
//修改img标签的src属性
var img = document.getElementById("img");
img.setAttribute("src",href);
//修改p标签的文本
var p = document.getElementById("p");
p.firstChild.nodeValue=title;
//取消<a>标签的跳转
return false;
}
}
</script>
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
一、需求点击图片查看大图,再点大图隐藏。多用于移动端,因为移动端屏幕小,可能需要查看大图。二、代码JQuery点击图片查看大图bystarof.exampleI
本文实例为大家分享了JS+DIV实现拖动效果的具体代码,供大家参考,具体内容如下效果图思路代码Titlevarstartx;varstarty;varstart
微信小程序利用css实现遮罩效果实例详解实现效果图:如图所示,使用css实现小程序的遮罩效果,代码如下js文件代码://index.js//获取应用实例vara
先上效果图-功能展示-初高级棋盘切换效果实现思路及主要代码详解1.绘制棋盘利用Quartz2D绘制棋盘.代码如下-(void)drawBackground:(C
本文实例为大家分享了微信小程序实现翻牌抽奖的具体代码,供大家参考,具体内容如下效果图如下所示这里做的比较简陋,就花了一点时间实现了翻牌抽奖效果,提供思路.wxm