DOM编程之:节点操作和样式
一、换图片
var im=document.getElementById("idd");
im.setAttribute("src","a2.jpg");
//src为<img>的属性,a2.jpg是要替换的新值。
im.src="a2.jpg";
几张图片循环播放:
int i=1; //全局变量
function mya(){
var im=document.getElementById("idd");
im.src="a"+i+".jpg";
i++;
if(i==4){
i=1;
}
setTimeout("mya()",1000); //隔1秒后执行mya()
}
- DOM编程
1.什么是DOM?
文档对象模型(Document Object Model)
通过DOM可以动态改变文档内容
2.动态改变文档内容的原理
(1)、解析文档(如HTML)并生成DOM树
(2)、通过DOM标准接口+编程语言改变文档内容
三、节点
1. 什么是节点
<html>
<head></head>
<body></body>
</html>
说明:这里html、head、body都是节点。
<div>
<ul>
<li></li>
</ul>
</div>
说明:这里div、ul、li都是节点,ul是li的父节点,div是ul的父节点。
2. 节点信息
nodeType 节点类型(1元素节点,2属性节点,3文本节点,8注释节点,9文档节点,11文档片段节点)
nodeValue 节点值
parentNode 当前节点的父节点
childNodes 当前节点的所有子节点
firstChild 当前节点的所有子节点中第一个节点
lastChild 当前节点的所有子节点中最后一个节点
previousSibling 当前节点的前一个兄弟节点
nextSibling 当前节点的后一个兄弟节点
3. 节点访问
document.getElementById()
node.getElementsByTagName()
4. 节点信息修改
node.setAttribute("name",value);//添加属性或更改属性值
node.getAttribute("name"); //获取属性值
5.移动节点
node.insertBefore(newChild, refChild); //在refChild节点前加入newChild节点
node.replaceChild(newChild, oldChild); //用newChild节点替换掉oldChild节点
node.appendChild(newChild); //将一个新节点添加在最后一个节点之后
node.removeChild(oldChild); /将oldChild子节点删除,该子节点下面的节点也一起被删除
6.创建节点
document.createElement(tagName);//创建一个指定标签名的元素节点,标签名可以是任何名字,包括自己创造的。IE支持复杂的:document.createElement("<input value=123 />");
FF不支持这个功能,只能输入标签名:document.createElement("input");
document.createTextNode(text); //创建一个文本节点,并以text参数为文本的值
document.createComment(comment); //创建一个注释节点,并以comment参数为注释的值
document.createDocumentFragment(); //创建一个文档片段节点
node.cloneNode(deep); //创建节点的另一种方法是对一个节点进行克隆
7.强大的innerHTML
(1).访问innerHTML
document.节点.innerHTML;
(2).修改innerHTML
document.节点.innerHTML = "值";
四、节点的增删改查
createElement() 创建节点
appendChild() 末尾追加方式插入节点
insertBefore() 在指定节点前插入新节点
cloneNode() 克隆节点
removeChild() 删除节点
replaceChild() 替换节点
1.创建节点
//创建个新节点:
var new=document.createElement("img"); //创建新节点,img为图片标签
new.src="a3.jpg";
new.width="300";
//获得目标节点
var old=document.getElementById("im");
//将新节点插入到目标节点之前
document.body.insertBefore(new,old);
2.追加节点
//指定要克隆的节点
var im=document.getElementById("id");
//克隆该id节点
var icopy=im.cloneNote(false); //默认是false,设置为 true,如果您需要克隆节点及其属性,以及后代;设置为 false,如果您只需要克隆节点及其后代
//将克隆的id节点追加到最后
document.body.appendChild(icopy);
3.删除节点
//指定要删除的节点id
var dNode=document.getElementById("id");
//删除该id节点
document.body.removeChild(dNode);
4.替换节点
//指定要替换的目标节点
var oNode=document.getElementById("id");
//创建一个新的节点
var nNode=document.createElement("img");
nNode.src="as1.jpg";
//将新节点替换目标节点
document.body.replaceChild(nNode,oNode);
五、表格相关对象
1. table表格对象
属性:rows[]
//返回表格中所有行的一个数组
方法:insertRow(index)
//从表格中插入一个新行
deleteRow(index)
var tb=document.getElementById("id"); //从表格中删除一行
var nr=tb.insertRow(2); //2为行数,在第2行的位置插入
注意:单纯的插入行是不会有任何效果,想达到真正插入行的效果,必须将这行的列也插入。var nd=tb.deleteRow(2);
2.tableRow表格行对象:
属性:cells[] 返回行中所有单元格数组
rowIndex 返回该行在表中的位置
方法:insertCell(index)
//在一行中的指定位置插入一个空的<td>标签
deleteCell(index)
//删除行中指定的单元格
例:
var tb=document.getElementById("id").insertRow(2);
var cella=tb.insertCell(0);
cella.innerHTML="插入第1列的内容";
var cellb=tb.insertCell(1);
cellb.innerHTML="插入第2列的内容";
注意:列的个数根据表格每行多少列来创建。
3.tableCeil单元格对象
属性:cellIndex
//返回单元格在某行单元格集合中的位置
innerHTML
//设置或返回单元格标签和结束标签之间的HTML
align
//设置或返回单元格内部数据的水平排列方法
className
//设置或返回元素的class属性
六、样式
1.常见样式
文本属性 |
font-size |
字体大小 |
font-family |
字体类型 |
|
边框属性 |
border |
设置四个边框所有的属性 |
border-width |
设置边框的宽度 |
|
border-style |
设置边框的样式 |
|
border-color |
设置边框的颜色 |
|
边界属性 |
margin |
设置所有外边框属性 |
margin-left margin-right margin-top margin-bottom |
分别设置元素的左、右、上、下外边距 |
|
填充属性 |
padding |
设置元素的所有内边距 |
padding-left padding-right padding-top padding-bottom |
分别设置元素的左、右、上、下内边距 |
2.获取样式属性值
2.1获取行内样式的方法
document.getElementById(elementId).样式属性值
案例:
var divObj=document.getElementById("test");
var objTop=divObj.style.top;
2.2获取类样式的方法
currentStyle
getComputedStyle()
案例:
var divObj=document.getElementById("test");
var objTop= divObj.currentStyle.top;
var objTop =document.defaultView.getComputedStyle(divObj,null).top;
3.制作随鼠标滚动的广告图片
3.1. scrollTop、scrollLeft属性
scrollTop |
设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 |
scrollLeft |
设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 |
clientWidth |
浏览器中可见内容的高度,不包括滚动条等边线,会随窗口的显示大小改变 |
clientHeight |
浏览器中可以看到内容的区域的高度 |
3.2实现思路
图片放在一个层中,使用CSS样式设置层的初始位置
页面加载时,获取图片所在层的具体位置,即页面的left和top位置
获取页面初始位置时,要判断当前浏览器的类型,本例只判断是IE还是fireFox
当滚动条滚动时,获取滚动条距离页面顶端和左侧的距离,同时改变层距离顶端和左侧的位置
3.3实现代码
function move(){
adverObject.style.top=adverTop+parseInt(document.documentElement.scrollTop)+"px";
adverObject.style.left=adverLeft+parseInt(document.documentElement.scrollLeft)+"px";
}
window.onload=inix;
window.onscroll=move;
4.呈的浮动
层的浮动:position:absolute;
top:20px;
left:20px;
right:20px;
bottom:20px;
滚动事件:
currentStyle
//得到当前样式
currentStyle.top //当前与top
5.控制css样式
控制CSS样式
style: document.getElementById("abc").style.color = "red";
className:document.getElementById("abc").className = "classas"; //classas为样式
控制图片
<img style='filter:flipv()' src='images/4.jpg' /> //旋转
<img style='filter:invert()' src='images/4.jpg' /> //绚丽
<img style='filter:blur(strength=15)' src='images/4.jpg' /> //模糊
<img style='filter:gray()' src='images/4.jpg' /> //灰色
如果大家想浏览我的下一篇文章,请留言
此文章属于原创,不准随意转载:https://blog.csdn.net/LYQ2332826438