关于DOM的增删改那些事

DOM的了解

Dom是针对HTML和XML文档的一个API(应用程序编程接口)，它秒回的是一个层次化的节点树，允许开发人添加，移除，和修改某一部分。

Document

1.Document类型可以表示HTML页面或基于XML的文档，不过最常见的还是作为HTMLDocument实例的document对象。

//所有浏览器都支持 document.documentElement和document.body
	var html =document.documentElement;
	alert(html === document.childNodes[0]);
	var body=document.body;

2.文档信息

/*
	IE8和之前版本为NULL,IE9+和Firefox如果存在文档类型声明，则将起作为味道的第一个子节点，
	Safari,Chrome和Opera如果存在文档类型则将其解析，但不作为文档的子节点
	*/
	var doctype=document.doctype;
	console.log(doctype);

	/* 获取文档标题 */
	var title=document.title;
	console.log(title)

	/*
	URL属性中包含页面完整的URL
	domain属性中只包含页面的域名
	referrer属性中则保存这链接到当前页面的那个页面的URL
	*/
	var url =document.URL;
	var domain=document.domain;
	var referrer=document.referrer;
	console.log('url'+url);
	console.log('domain'+domain);
	console.log('referrer'+referrer);

3.document的其他属性

<input type="text" name="box">
<div id="box">
	<div class="box1" name="name11">1</div>
	<div class="box2" name="name12">2</div>
	<div class="box3" name="name12">3</div>
	<div class="box4">4</div>
</div>

/* 
	getElementById:
	取得div元素的引用,IE7以及更早版本为NULL。
	但是IE7以及低版本中，当name特效和id都是box的时候，会返回input元素。
	所以写表单的name属性的时候尽量别和其他ID相同*/
	var oDiv=document.getElementById("box");
	console.log(oDiv);


	/*
	getElementsByTagName,接受一个参数(元素的标签名),
	返回一个HTMLCollection对象
	属性和方法：
	length属性获取元素的数量
	item()方法访问对象中的项
	namedItem()通过元素的name特性取得集合中的项
	【可以简化为[]，方括号传入数值或字符串形式的所有值之后，会自动调用item和namedItem方法】

	*/
	var oDiv1=document.getElementsByTagName("div");
	console.log(oDiv1.length);//5
	console.log(oDiv1.item(1));//<div class="box1" name="name11">1</div>
	console.log(oDiv1.namedItem('name11'));//<div class="box1" name="name11">1</div>
	console.log(oDiv1[1]);//<div class="box1" name="name11">1</div>


	/*
	其他少用的
	getElementsByName()返回带有给的name特性的所有元素
	document.anchors，所有带name特性的<a元素>
	document.forms，所有的<form>元素
	document.images，所有的<img>元素
	*/

	/*
	文档写入
	write(),writeln()写入到输出流中的文本
	open()和close()分布用于打开和关闭网页的输出流
	*/
	document.write("<strong>"+(new Date()).toString()+"</strong>")

Element类型

1.了解

Element类型用于表现XML或HTML元素，提供对元素标签名、子节点及特性的访问。

2.元素属性

/*
	访问元素的标签名，可以用nodeName也可以用tagName
	*/
	var oDiv=document.getElementById("box");
	console.log(oDiv.tagName);//DIV
	console.log(oDiv.tagName ==oDiv.nodeName)//true
	//用于判断是否这个元素【使用任何文档】
	if(oDiv.tagName.toLowerCase() == "div"){
		console.log("对的")
	}

	/* 获取类-className,title,lang等等*/
	console.log(oDiv.className);
	console.log(oDiv.title);
	console.log(oDiv.lang);

	/*
	因为元素特性太多，一个个获取太麻烦，虽有又出来三个新方法方便获取
	getAttribute(),setAttribute(),removeAttribute()
	*/
	console.log(oDiv.getAttribute("id"));
	console.log(oDiv.getAttribute("class"));
	oDiv.setAttribute("title","editTitle")
	console.log(oDiv.getAttribute("title"));

3.元素的增删

	/* 创建元素 */
	var pE=document.createElement("p");
	var oDiv=document.createElement("div");
	/*  创建文本节点*/
	var textNode=document.createTextNode("Hello World!");
	var otherText=document.createTextNode("petter Here");
	/*把元素添加到文档树
	appendChild()
	insertBefote()
	replaceChild()
	*/
	pE.appendChild(textNode);
	pE.appendChild(otherText);
	console.log(pE.childNodes.length);//2
	//normalize()将文本节点合并成一个节点
	pE.normalize();
	console.log(pE.childNodes.length);//2
	oDiv.appendChild(otherText);
	document.body.appendChild(pE);
	document.body.appendChild(oDiv);

	/* 删除元素 */
	document.body.removeChild(oDiv)