DOM_Element对象

Element对象

首先必须采用Document对象得到Element的引用

如：var element = document.getElementById(id);

Element对象常用的方法

setAttribute(name，value) 修改指定属性的值，第一个参数是属性名，第二个是属性值

getAttribute(name) 获取指定属性的值

removeAttribute(name) 移除指定属性的值

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<input type="text" id="text1" name="input" value="default"/>
<input type="button" id="buttId" value="提交" onclick="sub()" />
<script type="text/javascript">
	function sub(){
		var element = document.getElementById("text1");
		
		//获取指定属性值
		var name = element.getAttribute("value");
		document.writeln(name);
		
		//重新赋值
		var setName = element.setAttribute("value","重新赋值");
		document.writeln(setName);
		
		//移除属性值(注意不可以删除value值)
		var stId = element.getAttribute("id");
		document.writeln(stId);
		var reId = element.removeAttribute("id");
		document.writeln(reId);
		}
</script>
</body>
</html>

其它常用属性和方法（演示部分方法）

innerHTML - 节点（元素）的文本值

parentNode - 节点（元素）的父节点

childNodes - 节点（元素）的子节点

removeChild(node) - 删除子节点（元素）

attributes - 节点（元素）的属性节点

replaceChild(node) - 替换子节点

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<ul id="ulId">
<li>100</li>
<li>200</li>
<li>300</li>
<li>400</li>
<li>500</li>
</ul>
<script type="text/javascript">
	var ulId = document.getElementById("ulId");
	
	//节点元素的子节点（兼容性较差，不同浏览器数据有可能不同）
	document.writeln(ulId.childNodes.length);//Chrome打印11
	
	//另外一种方法，兼容性比较好
	document.writeln(ulId.getElementsByTagName("li").length);//Chrome打印5正确
	
	// 节点（元素）的文本值
	document.writeln(ulId.innerHTML);
</script>
</body>
</html>

Element对象

猜你喜欢