引言

HTML DMO将HTML文档表示为一棵DOM对象树，每个节点对象表示文档的特定部分，因此通过修改这些对象，就可以动态改变页面元素的属性；而通过添加、删除、替换、复制特定的节点，就可以为页面动态添加、删除、替换、复制相应的页面元素。

处理元素的属性

(1)getAttribute(name)：访问元素属性

(2)setAttribute(name,value)：修改元素属性

(3)removeAttribute(name)：删除元素属性

创建元素

第一步：document.createElement(tag) 创建节点对象

第二步：appendChild(node) 将新创建的元素添加到指定位置

例：

var new_p=document.createElement("p");//创建p元素节点
var new_text=document.createTextNode("hello world");//创建文本结点
document.body.appendChild(new_p);//为body元素节点附加p元素节点
new_p.appendChild(new_text);//为p元素节点附加文本结点

删除元素

要删除制定元素，可以使用 父元素节点的： removeChild(node)方法

例：

hr.parentNode.removeChild(hr);//删除水平线元素

替换元素

要用新元素替换旧的元素，可以使用 旧元素的父元素对象的方法： replaceChild(newnode,oldnode)方法

复制元素

使用元素对象的cloneNode(deep)方法将生成一个与该元素内容相同的副本对象，该副本对象没有父节点,即其parentNode属性为null。此外，深复制（参数deep值为true）将递归的复制所有子节点，而浅复制（参数deep值为false）只复制节点本身

例：

var cloned_img=img1.cloneNode();//复制<img>元素
cloned_img.id="img"+(i+2);//修改副体<img>元素的id属性，保证id唯一
img1.parentNode.appendChilld(cloned_img);//添加到页面

移动元素

当使用appendChild(node)、insertBefore(node,[refnode])等方法为页面添加元素时，如果被添加的元素对象在当前HTML DOM树中已经存在，那么它将从原来的位置移出，插入到新的位置

扫描二维码关注公众号，回复： 1019276 查看本文章

例：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>xxxxxs</title>

</head>
<body>
 
<h1>LIUTING</h1>
 
<p id="demo">自制跑马灯hhhhhh</p>

<div id="marqueen">
    <img src="1.png" alt="<">
</div>
 
<script>

	var marqueen=document.getElementById("marqueen");
	var new_img=new Array();
	for(var i=0;i<18;i++){
		new_img[i]=document.createElement("img");
		if(i<17){
		    new_img[i].src="1.png";
		} else if(i=17){
		    new_img[i].src="2.png";
		}
		marqueen.appendChild(new_img[i]);		
	}	
	function start_marqueen(){
		marqueen.appendChild(marqueen.firstChild);//将第一个元素移到末尾
	}
	window.setInterval("start_marqueen()",500);
	
</script>
 
</body>
</html>

注：

1.png:

2.png:

效果：将看到蓝色箭头图标不断左移

【JS】操作HTML DOM对象

引言