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>

</html>

说明：这里html、head、body都是节点。

<div>

<ul>

</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

DOM编程之：节点操作和样式