DOM 中的Element详解

最新推荐文章于 2024-01-28 21:36:17 发布

荆莿鸟的绝唱

最新推荐文章于 2024-01-28 21:36:17 发布

阅读量1.1k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/only_love_strangers/article/details/46760131

版权

js 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<title>DOM_Element</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript">
			/*
			 Element属性说明
			 nodeType:1
			 nodeName:元素标签名
			 nodeVlaue:值为null
			 parentNode:可能是Document或Element
			 其子节点可能是Element、Text、Comment、ProcessingInstruction、CDATASection或
			 EntityReference。
			 
			 HTML
			 
			*/
			
			window.onload = function(){
				var div = document.getElementById("myDiv");
				alert(div.tagName);//DIV,元素的签名都是大写表示
				alert(div.tagName == div.nodeName);
				/*
				在xml或（有时候也包括XHTML）中，标签名则始终与源代码中的保持一致。
				假如你不确定脚本是在HTML或者是在XML文档中执行，最好是在比较之前将
				标签名转换为大小写相同的形式。
				*/
				if(div.tagName=="div"){//不能这样做容易出问题
					//do something.
				}
				if(div.tagName.toLowerCase()=="div"){//把标签名转成小写再比较
					//do something.
				}
				
				//取特性
				/*
					注意，传递给getAttribute() 的特性与实际的特性名必须相同，
					因此获取class需要传class而不是className，className访问对象属性时才有用。
					如果给定的特性名不存在则返回null
					通过getAttribute可以取得自定义的特性。
					特性名称不区分大小写即“id”和“ID”等同，
					注意的HTML5中规范自定义标签应当加上data-的前缀以便于验证。
					
					公认的特性都可以通过DOM对象访问，
					自定义的特性可以在ie中可以通过DOM对象访问其他的浏览器不支持。
				*/
				alert(div.getAttribute("id"));
				alert(div.getAttribute("class"));
				alert(div.getAttribute("myDiv"));
				alert(div.getAttribute("en"));
				alert(div.getAttribute("dir"));
				alert(div.getAttribute("diyAttr"));//取得自定义特性。
				
				//删除特性
				div.removeAttribute("en");
				alert(div.getAttribute("en"));
				
				//attributes属性
				var id = div.attributes.getNamedItem("id").nodeValue;
				alert(id);//myDiv
				var id2 = div.attributes["id"].nodeValue;
				alert(id2);//myDiv
				div.attributes["id"].nodeValue="someOtherId";
				alert(div.attributes["id"].nodeValue);//someOtherId
				
				var oldAttr = div.attributes.removeNamedItem("id");
				alert(oldAttr);
				
				//使用attributs遍历
				function outputAttributes(element){
					var pairs = new Array();
					var attrName = null;
					var attrValue = null;
					var i = null;
					var length = null;
					
					for(i=0,length = element.attributes.length;i<length;i++){
						attrName = element.attributes[i].nodeName;
						attrValue = element.attributes[i].nodeValue;
						pairs.push(attrName + "=\""+attrValue+"\"");
					}
					return pairs.join(" ");
				}
				
				alert(outputAttributes(div));//class="myDiv" title="myDiv" lang="en" dir="rtl" diyattr="diyAttr"
				
				/*
					每一个特性节点都有一个名为specified的属性，这个属性的值如果为true，这意味着要么
					是在html中指定了相应的特性，要么是通过setAttribute()方法设置了该特性。在ie中所有
					未设置过的特性的该属性都为false，而在其他浏览器中不会为这类特性生成对应的特性节点
					（因此，在这些浏览器中，任意的特性节点的specified值始终为true）。下面是改进代码。
				*/
				function outputAttributes1(element){
					var pairs = new Array();
					var attrName = null;
					var attrValue = null;
					var i = null;
					var length = null;
					
					for(i = 0 , length = element.attributes.length; i<length ; i++){
						attrName = element.attributes[i].nodeName;
						attrValue = element.attributes[i].nodeValue;
						if(element.attributes[i].specified){
							pairs.push(attrName +"=\""+attrValue +"\"");
						}
					}
					return pairs.join(" ");
				}
				
				alert(outputAttributes1(div));
				
				/*
				  创建元素
				*/
				var div = document.createElement("div");
				//动态设置属性
				div.id = "myNewDiv";
				div.className = "box";
				div.innerText = "你就是一个神经病";
				document.body.appendChild(div);
				/*动态设置属性问题在ie7以及更早版本中使用
				1、不能够动态设置<iframe> 的name元素，
				2、不同通过reset方法重设动态创建<input>元素
				3、动态创建type特性值为reset的<button>元素重设不了表单。
				4、动态创建一批name相同的单选按钮彼此毫无关系，
				另一种方式可以解决以上问题，除ie其他的浏览器不支持这种用法，
				所以使用要做浏览器检测
				var div2 = document.createElement("<div id=\"myNewDiv2\" class= \"box\">神经病2</div>");
				document.body.appendChild(div2);
				
				*/
				
				/*元素的子节点childNodes
				  下面html id为myList 
				  如果IE来解析ul元素会有3个子节点，分别是3个li。但如果是在其他的浏览器中，
				  ul中都会有7个元素，包括3个li元素4个文本节点（li之间的空白符）。如果像下面
				  这样将元素间的空白符删除，那么所有浏览器都会返回相同数目的子节点。
				  <ul id="myList"><li>Item1</li><li>Item2</li><li>Item3</li></ul>
				*/
				 var element = document.getElementById("myList");
				 var childNodeNum = 0;//用来计数子节点的数目
				 for(var i=0,len=element.childNodes.length;i<len;i++){	
					if(element.childNodes[i].nodeType == 1){//nodeType为1表示元素节点。
						childNodeNum++;
					}
				 }
				 alert(childNodeNum);
				
			}
		</script>
	</head>
	<body>
		<div id="myDiv" class="myDiv" title="myDiv" lang="en" dir="rtl" diyAttr="diyAttr">
			Hello Kitty!
		</div>
		
		<ul id="myList">
			<li>Item1</li>
			<li>Item2</li>
			<li>Item3</li>
		</ul>
	</body>
</html>