一、DOM 1.作用: DOM(document Object Model) 1.document文档 HTML XML文件标记语言 2.object(HTML元素转成的js对象) 注意:如果需要js操作html文档,就需要把html文档转成js对象 a.操作属性 b.操作内容

				innerText (IE可用) textContent(fire)
				innerHtml

				鉴于火狐和IE的不同写个方法

				//obj是方法 value 是值
				function fii(obj,value){
					if(document.all){
						if(typeof(value)=="undefined")
							return obj.innerText;
						  else
						    return obj.innerText=value;
					}else{
						if(typeof(value)=="undefined")
							return obj.innerContent;
						  else
						    return obj.innerContent=value;
					}
				}

				outerText

				outerHtml
c.操作样式
	 	<a id="widuu" href="yun.widuu.com" target="_blank" title="widuu">111111111</a>
		
		 	var obj=document.getElementById("widuu");
			obj.href="http://yun.widuu.com";
		 	obj.style.fontSize="29px";
		 	obj.style.backgroundColor="red";
		</script>
样式中background-color改变为backgroundColor这个是-替换成大写字母
		test{
			width:100px;
			htight:200px;
			color:red;
			bgcolor:yellow;
		}
		classname样式类
		 obj.classname="test";
		 obj.classname='';就是空
有了以上三点的操作之前先转成对象 转成对象的两种形式 1.标记名(多个)、id(唯一)、name(多个) document中的三个方法
	   var obj=getElementsByTagName("div");
	   var obj=getElementById("widuu");
	   var obj=getElementsByName("com");

	   2.通过数组

	   document.embeds=[object]
	   document.body=[object]
	   document.title=

	   document.applets=[object]
       document.all=[object HTMLAllCollection]
	   document.scripts=[object HTMLCollection]
	   document.forms=[object HTMLCollection]
	   document.images=[object HTMLCollection]
	   document.styleSheets=[object StyleSheetList]
	   document.anchors=[object HTMLCollection]

	   举例
	   	<form name='form1' aciton='' method>
		<input type="text" name="username" value="zhangsan">
		

		
		alert(document.form1.username.value);
		alert(document.forms.form1.username.value);
		alert(document.forms['form1'].username.value);
		//其他的document的属性是什么 我们可以遍历然后出来大家自己参考看下
			var pro='';
			for (pro in document){
				document.write("document."+pro+"="+document[pro]+"<br>");
			}
 
二、BOM D-document O-object M-model 将文档想成一个倒数的结构
	<htmL>
			<head>
				<title></title>
			</head>
			<body>
				<div>
					<p>
						<span><a></a></span>
					</p>
				</div>
				<form>

				</form>
			</body>
	</htmL>
	 				html
	 		head  			body
	 		title      div 			form
	 				p span  a
一、树状结构,每一个部分,元素,内容,属性 注释都是一个节点 二、只要知道一个节点,按关系找到其他节点, 父节点: parentNode 子节点(第一个,最后一个):childNodes firstChild lastChild 同胞节点(上一个,下一个):nextSibling previousSibling 三、找到节点:节点类型nodeType、节点名nodeName、节点值nodeValue ?每个节点都拥有包含着关于节点某些信息的属性。这些属性是: ? nodeName(节点名称) ? nodeValue(节点值) ? nodeType(节点类型) ? nodeName属性含有节点的名称。 ? 元素节点的nodeName是标签名称 ? 属性节点的nodeName是属性名称 ? 文本节点的nodeName永远是#text ? 文档节点的nodeName永远是#document 注释:nodeName所包含的XML元素的标签名称永远是大写的。 ? 对于文本节点,nodeValue属性包含文本。 ? 对于属性节点,nodeValue属性包含属性值。 ? nodeValue属性对于文档节点和元素节点是不可用的。 ? nodeType属性可返回节点的类型。 ? 最重要的节点类型是: 元素类型 节点类型 元素 1 属性 2 文本 3 注释 8 文档 9 举例
			<body>
				<div>
					<u>222</u>
					<b>333</b>
					<p id="pp">
						<a>
							<span></span>
						</a>
					</p>
					<h2></h2>
					<i>111</i>
				</div>
                         
				
					var pobj=document.getElementById("pp");
					alert(pobj.nodeType);           //节点类型
					alert(pobj.parentNode.nodeName); //取父节点
					alert(pobj.childNodes.length); //取子节点
					alert(pobj.nextSibling.nodeName); //下一个
					alert(pobj.previousSibling.nodeName);
				
			</body>
可以在一个文档流中 1.创建一个节点(页面有一个的不能创建) document.createElement("img"); 实例
		<body>
			qqqqqqqqqqqqqqqq<br>
			qqqqqqqqqqqqqqqq<br>
			qqqqqqqqqqqqqqqq<br>
			qqqqqqqqqqqqqqqq<br>
			<div id="one">
			</div>

			
				var one=document.getElementById("one");
				function test(){

					var obj=document.createElement("a");
					obj.href="http://yun.widuu.com";
					obj.target="_blank";
					obj.title="这是一个测试";
					obj.innerText="widuu.com";
					one.appendChild(obj);
				}
			
			aaaaaaaaaaaaa<br>
			aaaaaaaaaaaaa<br>
			aaaaaaaaaaaaa<br>
			aaaaaaaaaaaaa<br>
			<a href="javascript:test();">add</a>
			</body>
insertbefore();在节点之前加入 appendChild()追加子节点 2.添加到文档流中 3.删除一个节点 removeChild();//删除子节点 欢迎转载,转载请注明来自微度网络-网络技术中心http://yun.widuu.com

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部