javascript笔记--（第十九章）DOM

2024-04-27 15:08:27

字体：大中小

来源：转载

供稿：网友

DOM

DOM中的三个字母，D（文档）可以理解为整个Web加载的网页文档；O（对象）可以理解为类似window对象之类的东西，可以调用属性和方法，这里我们说的是document对象；M（模型）可以理解为网页文档的树型结构

节点

加载HTML页面时，Web浏览器生成一个树型结构，用来表示页面内部结构。DOM将这种树型结构理解为由节点组成。

节点种类

节点总共分为三类：元素节点、文本节点、属性节点

查找元素

W3C提供了比较方便简单的定位节点的方法和属性，以便我们快速的对节点进行操作。分别为：getElementById()、getElementsByTagName()、getElementsByName()、getAttribute()、setAttribute()和removeAttribute()。

当我们获取到特定元素节点时，这个节点对象就被我们获取到了，而通过这个节点对象，我们可以访问它的一系列属性

<!DOCTYPE html><head>	<meta charset="UTF-8">	<title>Document</title></head><body>	<div style="color:black" id="box" title="mytitle" class="class" bbb="bbb_value">		hello	</div>	<input id="input" type="text" value="123"/>	<input id="input1" type="radio" checked/></body><script type="text/javascript">	document.getElementById('box').id;//获取id	//document.getElementById('box').id = 'person';//设置id	document.getElementById('box').title;//获取title	document.getElementById('box').title = 'new_title';//设置title	document.getElementById('box').style;//获取CSSStyleDeclaration对象	document.getElementById('box').style.color;//获取style对象中color的值	document.getElementById('box').style.color = 'red';//设置style对象中color的值	document.getElementById('box').className;//获取class	document.getElementById('box').className = 'box';//设置class		document.getElementById('box').getAttribute('className');//非IE不支持		console.log(document.getElementById('box').bbb);//获取自定义属性的值，非IE不支持	document.getElementById('box').setAttribute("bbb","new_bbb_value");	console.log(document.getElementById('box').getAttribute("bbb"));//new__bbb_value	document.getElementById('box').removeAttribute("bbb");//删除属性	console.log(document.getElementById('box').getAttribute("bbb"));//null	console.log(document.getElementById('input').value);//1234	console.log(document.getElementById('input1').checked);//true</script> </html>DOM节点
node节点属性
节点可以分为元素节点、属性节点和文本节点，而这些节点又有三个非常有用的属性，分别为：nodeName、nodeType和nodeValue<script type="text/Javascript">	console.log(document.getElementById('box').nodeType);//1，元素节点	console.log(document.getElementById('box').nodeName);//Div	console.log(document.getElementById('box').getAttribute("style").nodeValue);//undefined,getAttribute获取的是值，不是属性节点	console.log(document.getElementById('box').attributes.item(0).nodeValue);//color:black</script> 层次节点属性
节点的层次结构可以划分为：父节点与子节点、兄弟节点这两种。当我们获取其中一个元素节点的时候，就可以使用层次节点属性来获取它相关层次的节点。<!DOCTYPE html><head>	<meta charset="UTF-8">	<title>Document</title></head><body>	<div style="color:black" id="box" title="mytitle" class="class" bbb="bbb_value">		<span>hello1</span>		<span>hello2</span>		<span>hello3</span>	</div></body><script type="text/javascript">	var div = document.getElementById('box')	console.log(div.innerHTML);	/*		<span>hello1</span>		<span>hello2</span>		<span>hello3</span>	*/	console.log(div.childNodes.length);//得到子节点个数，IE3个，非IE7个，换行会产生空白节点	console.log(div.childNodes[0].nodeValue);//输出空白	console.log(div.attributes['bbb'].nodeValue);//bbb_value	console.log(div.attributes.getNamedItem('bbb').nodeValue);//和上面效果一样	console.log(div.firstChild.nodeValue);//输出空白	console.log(div.firstChild.innerHTML);//undefined	console.log(div.lastChild.nodeValue);//输出空白	console.log(div.ownerDocument);//#document	console.log(div.childNodes[0].nextSibling.innerHTML);//hello1	console.log(div.childNodes[2].PReviousSibling.innerHTML);//hello2	console.log(div.parentNode);//body对象</script> </html>注意：在获取到文本节点的时候，是无法使用innerHTML这个属性输出文本内容的。这个非标准的属性必须在获取元素节点的时候，才能输出里面包含的文本；在非IE中，标准的DOM具有识别空白文本节点的功能，所以在火狐浏览器是7个，而IE自动忽略了，如果要保持一致的子元素节点，需要手工忽略掉它。节点操作
DOM不单单可以查找节点，也可以创建节点、复制节点、插入节点、删除节点和替换节点。<!DOCTYPE html><head>	<meta charset="UTF-8">	<title>Document</title></head><body></body><script type="text/javascript">	document.write("<div id='box'></div>");	var span = document.createElement("span");	var text = document.createTextNode("hello");	span.appendChild(text);	document.getElementById("box").appendChild(span);	var h = document.createElement("h1");	var text1 = document.createTextNode("h1");	h.appendChild(text1);	document.getElementById("box").insertBefore(h,span);	var input = null;	input = document.createElement('input');	input.setAttribute('type', 'radio');	input.setAttribute('name', 'sex');	document.getElementById("box").appendChild(input);	//替换节点	var text2 = document.createTextNode("new_hello");	span.replaceChild(text2,span.childNodes[0]);	//克隆节点	var span1 = span.cloneNode(true);//true会复制内容，否则只复制结构	span1.id = "span1";	document.getElementById("box").appendChild(span1);	//删除节点	document.getElementById("box").removeChild(document.getElementById("span1"));</script></html>